Help with simple form html + javascript

Discussion in 'JavaScript' started by csdname, Nov 25, 2009.

  1. #1
    Hi.
    I have a form with 10 text inputs, and I want a <select> with options yes and no, that when people select sim that command add more 1 input and one select.
    If people select yes they are listed in one sport club and if not they select no.

    code:

    <td>Are you listed in a club ? : </td>
    <td>
    <select style="width:340px" id='fed' name='fed'>
    <option value="no" onclick="showInputs();" SELECTED >No</option>
    <option value="yes" onclick="showInputs();">Yes</option>
    </select>
    </td>
    </tr>

    //if people select yes this will appear :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    <tr>
    <td>&nbsp;</td><td>&nbsp;</td>
    </tr>

    <tr>
    <td>Licence Nº: </td><td><input id="licence" name="licence" type="text" size="65" maxlength="65" value='Preencher se for federado.' onblur="if(this.value=='') this.value='Preencher se for federado.';" onfocus="if(this.value=='Preencher se for federado.') this.value='';" onkeyup="caLicence('licence')" /></td>
    </tr>

    <tr>
    <td>&nbsp;</td><td>&nbsp;</td>
    </tr>

    <tr>
    <td>Club: </td>
    <td>
    <select style="width:355px" id='club' name='club'>
    //this create the clubes list
    <?php
    include_once (DIR_WEB_CT . 'c_createaccount.php');
    echo( s_clubs() );
    ?>
    </select>
    </td>
    </tr>

    //:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    How can I do this???
    Please help me with this, is urgent.
     
    csdname, Nov 25, 2009 IP
  2. gandalf117

    gandalf117 Active Member

    Messages:
    111
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #2
    I just changed the the function associated with onclick No. I suppose that if the user is on 'No' it should display what you want to display when the user is on 'Yes'.
    Is this what you want:

    <html>
    	<head>	
    		<script type="text/javascript">
    		
    		function showInputs()
    		{
    			var temp = document.getElementById("table_div").getElementsByTagName("tbody")[0].innerHTML;
    			var tablePointer = document.getElementById("table_div").getElementsByTagName("tbody")[0];
    
    			if(!tablePointer.getElementsByTagName("tr")[1])
    			{
    				tablePointer.innerHTML = temp + "<tr><td>&nbsp;</td><td>&nbsp;</td></tr>\
    				<tr>\
    					<td>Licence Nº: </td><td><input id=\"licence\" name=\"licence\" type=\"text\" size=\"65\" maxlength=\"65\" value=\"Preencher se for federado.\" \
    					onblur=\"if(this.value=='') this.value='Preencher se for federado.';\" onfocus=\"if(this.value=='Preencher se for federado.') this.value='';\" onkeyup=\"caLicence('licence')\"></td>\
    				</tr>\
    				<tr>\
    					<td>&nbsp;</td><td>&nbsp;</td>\
    				</tr>\
    				<tr>\
    					<td>Club: </td>\
    					<td>\
    						<select style=\"width:355px\" id=\"club\" name=\"club\">\
    						<?php\
    							include_once (DIR_WEB_CT . 'c_createaccount.php');\
    							echo( s_clubs() );\
    						?>\
    						</select>\
    					</td>\
    				</tr>";
    			}
    			document.getElementById("fed").selectedIndex = 1;
    		}
    
    		function hideInputs()
    		{
    			var tablePointer = document.getElementById("table_div").getElementsByTagName("tbody")[0];
    
    			var i = 1;
    			while(tablePointer.getElementsByTagName("tr")[i])
    			{
    				tablePointer.removeChild(tablePointer.getElementsByTagName("tr")[i]);
    			}			
    		}
    		</script>
    	</head>
    
    	<body>
    		<div id="table_div">
    			<table width="80%">
    				<tr>
    					<td>Are you listed in a club ? : </td>
    					<td>
    						<select style="width:340px" id='fed' name='fed'>
    							<option value="no" onclick="hideInputs();">No</option>
    							<option value="yes" onclick="showInputs();">Yes</option>
    						</select>
    					</td>
    				</tr>
    			</table>
    		</div>
    	</body>
    </html>
    Code (markup):
     
    Last edited: Nov 26, 2009
    gandalf117, Nov 26, 2009 IP