I am trying to use javascript to validate a form that has three select inputs. Here is the form:
[HTML]<form name="select" action="main.php" method="post" onsubmit="return ValidateSelect(this)">
<select name="one">
<option value="0" selected="selected">-Select An Option-</option>
</select>
<select name="two">
<option value="0" selected="selected">-Select An Option-</option>
</select>
<select name="three">
<option value="0" selected="selected">-Select An Option-</option>
</select>
<input type="submit" value="Submit" />
<div id="loading" style="display:none;">Loading...</div>
<div id="1Error" style="display:none;">Please Select an Option for 1</div>
<div id="2Error" style="display:none;">Please Select an Option for 2</div>
<div id="3Error" style="display:none;">Please Select an Option for 3</div>
</form>[/HTML]
The Option 0 is not a valid choice and shouldn't be submitted. So I created this javascript to validate it:
Expand|Select|Wrap|Line Numbers
- <script type="text/javascript">
- function ValidateSelect(form)
- {
- var error=false;
- document.getElementById('1Error').style.display = 'none';
- document.getElementById('2Error').style.display = 'none';
- document.getElementById('3Error').style.display = 'none';
- document.getElementById('submit').style.display = 'none';
- document.getElementById('loading').style.display = 'block';
- with(form)
- {
- if(one.value=='-1'||one.value=='0')
- {
- document.getElementById('1Error').style.display = 'block';
- error=true;
- }
- if(two.value=='-1'||two.value=='0')
- {
- document.getElementById('2Error').style.display = 'block';
- error=true;
- }
- if(three.value=='-1'||three.value=='0')
- {
- document.getElementById('3Error').style.display = 'block';
- error=true;
- }
- if(error==true)
- {
- document.getElementById('loading').style.display = 'none';
- document.getElementById('submit').style.display = 'block';
- return(false);
- }
- else
- {
- return(true);
- }
- }
- }
- </script>
1. When the form is submitted, hide all error messages and replace the submit button with text that says Loading...
2. Check each select box for an actual selection (Besides the Chose an Option one or not selection at all). If the box doesn't have a selection (or has the Chose an Option one selected), display the error for that box.
3. If there are any missing boxes, replace the loading text with the submit button and cancel the forum's submission. If not, continue with the submission of the form.
If possible, could you please include the full code if you can determine my problem.
Thanks Everyone!!!