...
PDA

text box visible/invisble based on checkbox selection

siliviasalsa
06-15-2007, 05:56 PM
<!------------
Hello

i have check boxes and corresponding textboxes.

i wish to have my text box show or hide bases on the text box checked.

for example.

if
check box honda is checked then the text box honda shows on the screen.
if it unchecked then it is not shown.

I want this to also be the same for toyota and subaru.

Thanks in advance.


i am completely new in javascript and wish to get a snippets to add to my existing code.




-------------->
<html>
<head>
</head>

<body>


<h1>&nbsp;</h1>

<table>
<cfform action="CarAddAction.cfm" method="POST">
<tr>
<td>Honda:</td>
<td><center><input type="checkbox" name="HONDA_MODEL" value="HONDA" checked></center></td>
</tr>
<tr>
<td>Toyota:</td>
<td><center><input type="checkbox" name="Toyota_MODEL" value="Toyota" Unchecked></center></td>
</tr>
<tr>
<td>SUBARU:</td>
<td><center><input type="checkbox" name="SUBARU_MODEL" value="SUBARU" unchecked></center></td>
</tr>



<tr><td>Honda Model</td>
<td>
<input type="Text"
name="Honda_Model"
Value=""
size="22"
maxlength="20">
</td>
<tr></tr>
<tr><td>Toyota Model</td>
<td>
<input type="Text"
name="Toyota_Model"
Value=""
size="22">
</td>
<tr></tr>
<tr><td>Subaru Model</td>
<td>
<input type="Text"
name="Subaru_Model"
Value=""
size="22">
</td>
<tr></tr>
<td>&nbsp;</td>
<td>
<input type="submit" value="Add make to Database">
</td>
</tr>

</cfform>
</table>

</body>
</html>
A1ien51
06-15-2007, 09:07 PM
basic idea is:

onclick='document.formName.textboxName.style=(this.checked)?"block":"none";'

Eric
Bill Posters
06-15-2007, 09:13 PM
Rough e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">

tr {
height: 1.75em;
}

.hide {
display: none;
}

</style>
<script type="text/javascript">

window.onload = function() {

prepTexts();

}

function prepTexts() {

var txts = [];
txts[0] = document.getElementsByName('Honda_Model')[1];
txts[1] = document.getElementsByName('Toyota_Model')[1];
txts[2] = document.getElementsByName('Subaru_Model')[1];

for (var i = 1, tEl; tEl = txts[i]; i++) {
tEl.className = 'hide' ;
}

}

function toggleText(objName) {

var obj = document.getElementsByName(objName)[1];
obj.className = (obj.className == 'hide') ? '' : 'hide' ;

}

</script>
</head>
<body>

<h1>blah</h1>

<form action="CarAddAction.cfm" method="post">
<table border="0">
<tr>
<td>Honda:</td>
<td><input type="checkbox" name="Honda_Model" value="Honda" checked="checked" onclick="toggleText(this.name);"></td>
</tr>
<tr>
<td>Toyota:</td>
<td><input type="checkbox" name="Toyota_Model" value="Toyota" onclick="toggleText(this.name);"></td>
</tr>
<tr>
<td>Subaru:</td>
<td><input type="checkbox" name="Subaru_Model" value="Subaru" onclick="toggleText(this.name);"></td>
</tr>
<tr>
<td>Honda Model</td>
<td><input type="text" name="Honda_Model" id="Honda_Model" value="" size="22"></td>
</tr>
<tr>
<td>Toyota Model</td>
<td><input type="text" name="Toyota_Model" id="Toyota_Model" value="" size="22"></td>
</tr>
<tr>
<td>Subaru Model</td>
<td><input type="text" name="Subaru_Model" id="Subaru_Model" value="" size="22"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" value="Add make to Database"></td>
</tr>
</table>
</form>

</body>
</html>
glenngv
06-16-2007, 12:33 AM
It's not good to have both the checkbox and textbox to have the same name. You might experience unexpected problem in the server-side when accessing the posted values. What you can do is change the name of the checkbox and set its value to the name of the associated textbox.
window.onload = function() {

prepTexts();

}

function prepTexts() {

document.getElementById('Honda_Model').className='hide';
document.getElementById('Toyota_Model').className='hide';
document.getElementById('Subaru_Model').className='hide';
}

function toggleText(objChk) {

var obj = objChk.form.elements[objChk.value];
obj.className = (obj.className == 'hide') ? '' : 'hide' ;

}

<input type="checkbox" name="chkHonda" value="Honda_Model" checked="checked" onclick="toggleText(this);" />
...
<input type="text" name="Honda_Model" id="Honda_Model" value="" size="22" />

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum