Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    text box visible/invisble based on checkbox selection

    <!------------
    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>

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    basic idea is:
    Code:
    onclick='document.formName.textboxName.style=(this.checked)?"block":"none";'
    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Rough e.g.
    Code:
    <!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>

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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.
    Code:
    		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' ;
    
    		}
    Code:
    <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" />


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •