Hello,
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.ph p" method="post" onsubmit="retur n ValidateSelect( this)">
<select name="one">
<option value="0" selected="selec ted">-Select An Option-</option>
</select>
<select name="two">
<option value="0" selected="selec ted">-Select An Option-</option>
</select>
<select name="three">
<option value="0" selected="selec ted">-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:
For some reason the form submits even if the selects have options selected. I realize that there are no other options for the selects. This is because the options are added by a PHP script that is working perfectly. If my code is confusing (I am almost fluent in JS), here is some pseudo-code:
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!!!
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.ph p" method="post" onsubmit="retur n ValidateSelect( this)">
<select name="one">
<option value="0" selected="selec ted">-Select An Option-</option>
</select>
<select name="two">
<option value="0" selected="selec ted">-Select An Option-</option>
</select>
<select name="three">
<option value="0" selected="selec ted">-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:
Code:
<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!!!
Comment