Click to See Complete Forum and Search --> : Show/hide Input Box


mknapp06
12-05-2006, 07:48 AM
I need to have multiple hyperlinks on a page that will show or hide a form text input box associated with each link. anyone have any suggestions?

yellabuff
12-05-2006, 08:04 AM
<html>
<head>
<title>Untitled</title>
<script>
function showTextBox(id) {
document.getElementById(id).style.display = "block";
}
function hideTextBox(id) {
document.getElementById(id).style.display = "none";
}
</script>
</head>

<body>
<a href="javascript:showTextBox('box01')">Show Box 1</a> - <a href="javascript:hideTextBox('box01')">Hide Box 1</a><br>
<a href="javascript:showTextBox('box02')">Show Box 2</a> - <a href="javascript:hideTextBox('box02')">Hide Box 2</a><br>
<a href="javascript:showTextBox('box03')">Show Box 3</a> - <a href="javascript:hideTextBox('box03')">Hide Box 3</a><br>
<a href="javascript:showTextBox('box04')">Show Box 4</a> - <a href="javascript:hideTextBox('box04')">Hide Box 4</a><br>

<form>
<input type="text" name="box01" id="box01" value="Box 1" style="display:none">
<input type="text" name="box01" id="box02" value="Box 2" style="display:none">
<input type="text" name="box01" id="box03" value="Box 3" style="display:none">
<input type="text" name="box01" id="box04" value="Box 4" style="display:none">
</form>

</body>
</html>

Mr J
12-05-2006, 08:06 AM
Something on these lines maybe?


<script type="text/javascript">

function show(id){
if(document.getElementById(id).style.display=="none"){
document.getElementById(id).style.display="block"
}
else{
document.getElementById(id).style.display="none"
}
}

</script>
<a href="#null" onclick="show('t1')">Link 1</a> <input type="text" id="t1" style="display:none"><BR>
<a href="#null" onclick="show('t2')">Link 2</a> <input type="text" id="t2" style="display:none"><BR>
<a href="#null" onclick="show('t3')">Link 3</a> <input type="text" id="t3" style="display:none"><BR>

mknapp06
12-05-2006, 08:07 AM
The text boxes and links will all be in there own individaul forms. will that still work? I have an ASP loop that goes through and creates all the boxes and each will need to be unique.

yellabuff
12-05-2006, 09:22 AM
yes, it'll work the same since the form element is being accessed by the id.