
September 12th, 2009, 01:43 PM
|
|
Contributing User
|
|
Join Date: Apr 2007
Posts: 110
Time spent in forums: 1 Day 20 h 21 m 40 sec
Reputation Power: 3
|
|
|
Javascript - Displaying form field depending on drop down list
Hi,
I am trying to write a script that allows me to select a value from a list and then display form fields depending on the value selected.
When i select camper from the field named camper, the form displays the field mobile_number but none of th others.
I have tried differnt things but i am pretty new to javascript and nothing i do makes a difference and all i can get is the mobile number field to display.
Below is my code and any suggestions would be appreciated.
Thank you.
Code:
<!--
function displayoptional(){
var a= document.forms['capform'].elements['camper'].value
if(a ='camper'){
document.getElementById('optional').style.display = '';
}
else if(a ='owner')
{
document.getElementById('optional').style.display = 'none';
}//endif
}//end displayoptional function
Code:
<form action="register.php" method="post" name="capform" class="FormGeneric" onSubmit="return capCheck(this);">
<p> </p>
<table width="400" border="0">
<tr>
<td width="221">Please select one of the following</td>
<td width="169"><select name="camper" id="camper" onchange='displayoptional()'>
<option value=1>camper</option>
<option value=2 selected="selected">owner</option>
</select></td>
</tr>
<tr>
<td>Email Address</td>
<td><span style="width:275px">
<input type="text" name="email_address" size="30" value="[var.email_address]" />
</span></td>
</tr>
<tr>
<td>Username</td>
<td><span style="width:275px">
<input type="text" name="user_name" size="20" value="[var.user_name]" />
</span></td>
</tr>
<tr>
<td>Password</td>
<td><span style="width:275px">
<input type="password" name="password" size="20" value="[var.password]" />
</span></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="password" name="confirm_password" size="20" value="[var.confirm_password]" /></td>
</tr>
<tr>
<td> </td>
<td><div style='display:none' id='optional'><span class="style204">
Please Enter a mobile number:
<input id='mobile_number' type='text' name="mobile_number" value="[var.mobile_number]" >
</div> </td>
</tr>
<tr>
<td> </td>
<td><div style='display:none' id='optional'><span class="style204">
Please Enter a phone number:
<input id='phone_number' type='text' name="phone_number" value="[var.phone_number]" >
</div> </td>
</tr>
<tr>
<td> </td>
<td><div style='display:none' id='optional'><span class="style204">
Please Enter an address:
<input id='address' type='text' name="address" value="[var.address]" >
</div> </td>
</tr>
<tr>
<td> </td>
<td><div style='display:none' id='optional'><span class="style204">
Please Enter a postcode:
<input id='postcode' type='text' name="postcode" value="[var.postcode]" >
</div> </td>
</tr>
<tr>
<td> </td>
<td><div style='display:none' id='optional'><span class="style204">
Please Enter a choice:
<input id='choice' type='text' name="choice" value="[var.choice]" >
</div> </td>
</tr>
<tr>
<td> Select here to agree to </td>
<td><span style="width:275px">
<input type="radio" value="yes" name="terms" [var.checked] />
<a href="page.php?page=3" target="_blank">Our terms</a></span></td>
</tr>
<tr>
<td><img src="image.php" alt="" name="capimage" border="0" id="capimage" /></td>
<td><span style="width:150px; text-align:left">
<input type="text" value="" name="captext" size="17" />
</span></td>
</tr>
<tr>
<td> </td>
<td> <input type="submit" value="Register" name="registe_r" onclick='checkform()'/>
<input type="hidden" name="form_submitted" value="yes"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
|