Trying to get a form drop down list like on an automotive website
-
Trying to make a form list where you select an item in the first list, then the list below unlocks/ungrays itself and you can select the next item. Like on any car parts website, you select the year, then the make, the model, trim, etc.
Any ideas?
-
Hi,
Create template and add that template to your theme.Use this code and do changes according to your requirements.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js” ></script>
<script src=”https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js”></script><script>
function fnbusiness(str) {
document.getElementById(‘private’).style.display=”none”;
document.getElementById(‘com’).style.display=”none”;
if(str==”Private Company”)
{
document.getElementById(‘private’).style.display=”block”;
document.getElementById(‘com’).style.display=”none”;
}
else
{
document.getElementById(‘private’).style.display=”none”;
document.getElementById(‘com’).style.display=”block”;
}
}
</script>
<form method=”POST” id=”regform” name=”myform” action=””>
<table align=”center”>
<tr>
<td>
<label id=”label” for=”tname”>Type of business</label>
</td>
<td>
<select name=”tname” id=”tname” onchange=”fnbusiness(this.value)”>
<option value=”select”>Select</option>
<option value=”Government Department”>Government Department</option>
<option value=”ASX Listed Company”>ASX Listed company</option>
<option value=”Private Company”>Private Company</option>
</select>
</td>
</tr>
</table><table align=”center” id=”com” style=”display:none”>
<tr>
<td colspan=”2″>
<label id=”label” for=”sole”>company sole trader</label>
</td>
</tr>
<tr>
<td>
<label id=”label” for=”ACN”>ACN</label>
</td>
<td>
<input type=”” name=”ACN” id=”ACN” class=”required”>
</td>
</tr>
<tr>
<td>
<label id=”label” for=”ABN”>ABN</label>
</td>
<td>
<input type=”” name=”ABN” id=”ABN” class=”required”>
</td>
</tr><tr>
<td>
<label id=”label” for=”trade”>Trading Name</label>
</td>
<td>
<input type=”text” name=”trade” id=”trade” class=”required”>
</td>
</tr><tr>
<td colspan=”2″>
<label id=”label” for=”postal”>Postal address</label>
</td>
</tr><tr>
<td>
<label id=”label” for=”street”>Street Address</label>
</td>
<td>
<input type=”text” name=”street” id=”street” class=”required”>
</td>
</tr><tr>
<td>
<label id=”label” for=”city”>City</label>
</td>
<td>
<input type=”text” name=”city” id=”city” class=”required” maxlength=”25″>
</td>
</tr><tr>
<td>
<label id=”label” for=”state”>State</label>
</td>
<td>
<input type=”text” name=”state” id=”state” class=”required” maxlength=”30″>
</td>
</tr><tr>
<td>
<label id=”label” for=”zip”>Zip</label>
</td>
<td>
<input type=”text” name=”zip” id=”zip” class=”required” maxlength=”5″>
</td>
</tr><tr>
<td>
<label id=”label” for=”country”>Country</label>
</td>
<td>
<input type=”text” name=”country” id=”country” class=”required” maxlength=”30″>
</td>
</tr><tr>
<td colspan=”2″>
<input type=”checkbox” onclick=”return address();” name=”physical” value=”address” />Physical Address same as above</td>
</tr><tr>
<td>
<label id=”label” for=”street”>Street Address</label>
</td>
<td>
<input type=”text” name=”street1″ id=”street1″ class=”required”>
</td>
</tr><tr>
<td>
<label id=”label” for=”city”>City</label>
</td>
<td>
<input type=”text” name=”city1″ id=”city1″ class=”required” maxlength=”25″>
</td>
</tr><tr>
<td>
<label id=”label” for=”state”>State</label>
</td>
<td>
<input type=”text” name=”state1″ id=”state1″ class=”required” maxlength=”30″>
</td>
</tr><tr>
<td>
<label id=”label” for=”zip”>Zip</label>
</td>
<td>
<input type=”text” name=”zip1″ id=”zip1″ class=”required” maxlength=”5″>
</td>
</tr><tr>
<td>
<label id=”label” for=”country”>Country</label>
</td>
<td>
<input type=”text” name=”country1″ id=”country1″ class=”required” maxlength=”30″>
</td>
</tr><tr>
<td colspan=”2″>
<label id=”label” for=”phone”>Phone Numbers</label>
</td>
</tr><tr>
<td>
<label id=”label” for=”office”>office</label>
</td>
<td>
<input type=”text” name=”office” id=”office” class=”required” maxlength=”15″>
</td>
</tr><tr>
<td>
<label id=”label” for=”mobile”>Mobile</label>
</td>
<td>
<input type=”text” name=”mobile” id=”mobile” class=”required” maxlength=”15″>
</td>
</tr><tr>
<td>
<label id=”label” for=”fax”>Fax</label>
</td>
<td>
<input type=”text” name=”fax” id=”fax” class=”required” maxlength=”15″>
</td>
</tr><tr> <td colspan=”2″ align=”center”><input type=”submit” value=”Submit” /></td>
</tr>
</table>
</form><div id=”private” style=”display:none”>
<form method=”POST” name=”pname” id=”pname” action=””><table align=”center”>
<tr>
<td colspan=”2″>
<label id=”label” for=”postal”>Postal address</label>
</td>
</tr><tr>
<td>
<label id=”label” for=”street”>Street Address</label>
</td>
<td>
<input type=”text” name=”street” id=”street” class=”required”>
</td>
</tr><tr>
<td>
<label id=”label” for=”city”>City</label>
</td>
<td>
<input type=”text” name=”city” id=”city” class=”required” maxlength=”25″>
</td>
</tr><tr>
<td>
<label id=”label” for=”state”>State</label>
</td>
<td>
<input type=”text” name=”state” id=”state” class=”required” maxlength=”30″>
</td>
</tr><tr>
<td>
<label id=”label” for=”zip”>Zip</label>
</td>
<td>
<input type=”text” name=”zip” id=”zip” class=”required” maxlength=”5″>
</td>
</tr><tr>
<td>
<label id=”label” for=”country”>Country</label>
</td>
<td>
<input type=”text” name=”country” id=”country” class=”required” maxlength=”30″>
</td>
</tr><tr>
<td colspan=”2″>
<input type=”checkbox” onclick=”return address();” name=”physical” value=”address” />Physical Address same as above</td>
</tr><tr>
<td>
<label id=”label” for=”street”>Street Address</label>
</td>
<td>
<input type=”text” name=”street1″ id=”street1″ class=”required”>
</td>
</tr><tr>
<td>
<label id=”label” for=”city”>City</label>
</td>
<td>
<input type=”text” name=”city1″ id=”city1″ class=”required” maxlength=”25″>
</td>
</tr><tr>
<td>
<label id=”label” for=”state”>State</label>
</td>
<td>
<input type=”text” name=”state1″ id=”state1″ class=”required” maxlength=”30″>
</td>
</tr><tr>
<td>
<label id=”label” for=”zip”>Zip</label>
</td>
<td>
<input type=”text” name=”zip1″ id=”zip1″ class=”required” maxlength=”5″>
</td>
</tr><tr>
<td>
<label id=”label” for=”country”>Country</label>
</td>
<td>
<input type=”text” name=”country1″ id=”country1″ class=”required” maxlength=”30″>
</td>
</tr><tr>
<td colspan=”2″>
<label id=”label” for=”phone”>Phone Numbers</label>
</td>
</tr><tr>
<td>
<label id=”label” for=”office”>office</label>
</td>
<td>
<input type=”text” name=”office” id=”office” class=”required” maxlength=”15″>
</td>
</tr><tr>
<td>
<label id=”label” for=”mobile”>Mobile</label>
</td>
<td>
<input type=”text” name=”mobile” id=”mobile” class=”required” maxlength=”15″>
</td>
</tr><tr>
<td>
<label id=”label” for=”fax”>Fax</label>
</td>
<td>
<input type=”text” name=”fax” id=”fax” class=”required” maxlength=”15″>
</td>
</tr><tr> <td colspan=”2″ align=”center”><input type=”submit” value=”Submit” /></td>
</tr>
</table></div>
- The topic ‘Trying to get a form drop down list like on an automotive website’ is closed to new replies.