By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 1,133 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

Validating a Select Field

P: 2
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.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
  1. <script type="text/javascript">
  2. function ValidateSelect(form)
  3. {
  4.         var error=false;
  5.     document.getElementById('1Error').style.display = 'none';
  6.     document.getElementById('2Error').style.display = 'none';
  7.     document.getElementById('3Error').style.display = 'none';
  8.  
  9.     document.getElementById('submit').style.display = 'none';
  10.     document.getElementById('loading').style.display = 'block';
  11.     with(form)
  12.     {
  13.         if(one.value=='-1'||one.value=='0')
  14.         {
  15.             document.getElementById('1Error').style.display = 'block';
  16.             error=true;
  17.         }
  18.         if(two.value=='-1'||two.value=='0')
  19.         {
  20.             document.getElementById('2Error').style.display = 'block';
  21.             error=true;
  22.         }
  23.         if(three.value=='-1'||three.value=='0')
  24.         {
  25.             document.getElementById('3Error').style.display = 'block';
  26.             error=true;
  27.         }
  28.         if(error==true)
  29.         {
  30.             document.getElementById('loading').style.display = 'none';
  31.             document.getElementById('submit').style.display = 'block';
  32.             return(false);
  33.         }
  34.         else
  35.         {
  36.             return(true);
  37.         }
  38.     }
  39. }
  40. </script>
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!!!
Sep 20 '08 #1
Share this Question
Share on Google+
2 Replies


P: 7
Code is ok

include name/id property for submit button.

Alternatively use

<input type="button" onClick="ValidateSelect()" value="Submit">

Suggestive script changes:

var form=document.getElementById('select');

In error else block include

form.submit;

This should solve the issue.
Sep 21 '08 #2

P: 2
Code is ok

include name/id property for submit button.

Alternatively use

<input type="button" onClick="ValidateSelect()" value="Submit">

Suggestive script changes:

var form=document.getElementById('select');

In error else block include

form.submit;

This should solve the issue.
Thanks!!!
That fixed it!!!
Sep 21 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.