Java Script Validation for Select box

ssaslam · May 21, 2013

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>

Sign In

Java Script Validation for Select box

Recommended Posts

ssaslam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information