I have this dependent radio and dropdown box, it works fine. Now I am trying to validate and its failing to validate. When i click on a radio button it should display "select a make" and If i dont select anything it should prompt me to select something rather than just submit. Also when i try to reset, what ever ive selected does not clear away.
Any help will be great. Thanks in advance.
Original code is from http://forums.phpfreaks.com/topic/145947-radio-button-to-change-drop-down-fields/
<html>
<head>
</head>
<body>
<form id="formname" name="formname" method="post" action="#" onsubmit="return validate()">
Make:<br>
<input type="radio" name="make" value="Chrysler" onclick="changeMake(this.value);"> Chrysler<br />
<input type="radio" name="make" value="Ford" onclick="changeMake(this.value);"> Ford<br />
<input type="radio" name="make" value="GMC" onclick="changeMake(this.value);"> GMC<br />
<br>
Model:
<select name="model" id="model" onchange="changeModel(this.value);" disabled="disabled">
<option> -- Select a Make -- </option>
</select>
<br><br>
Output: <span id="output"></span>
<input type="reset">
<input type="submit">
</form>
</body>
<script type="text/javascript">
var models = new Array();
models['Chrysler'] = ['Pacifica', 'PT Cruiser', 'Sebring'];
models['Ford'] = ['Ranger', 'Taurus', 'Mustang'];
models['GMC'] = ['Acadia', 'Sierra', 'Yukon'];
function changeMake(make)
{
var modelList = models[make];
changeSelect('model', modelList, modelList);
document.getElementById('model').disabled = false;
document.getElementById('model').onchange();
}
function changeModel(modelValue)
{
document.getElementById('output').innerHTML = modelValue;
return;
}
function changeSelect(fieldID, newValues, newOptions)
{
selectField = document.getElementById(fieldID);
selectField.options.length = 0;
if (newValues && newOptions)
{
for (i=0; i<newValues.length; i++)
{
selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
}
}
}
</script>
</html>
