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

Validate--dropdown menu lists--no selection made

P: 6
How would you validate a page that had several drop down menus. When the submit button is submitted, and NO selection has been made?

See code below:
[HTML]<html>
<head>

</head>
<body>

<table width="100%" height="500px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="600px" valign="top" bgcolor="#F5F0DD"><table width="100%" height="452" border="1" bgcolor="#BFD5EA">
<form action="remcardqueue.asp" method="post">
<input name="subject" type="hidden" value="AMM | Remembrance Card Package Order" />
<input name="MAILCODE" type="hidden" value="XXXX" />
<tr>
<td height="66" colspan="3"><div align="center"><font color="#006633" size="5">Remembrance Card Package Selection</font></div></td>
</tr>
<tr>
<td width="22%" height="66"><div align="center"><img src="images/cards/1111.jpg" alt="Association Standard Remembrance Card Package" border="0"><br />
<span class="smallfont">Click to view details</span></div></td>
<td width="58%" class="surveysmall"><p><b><font color="#006633">Association Standard Remembrance Card Package</font><font color="#006600">(One of each of the cards shown here)<br />
</font></b><span class="surveyfont"> X1111</span> </p> </td>
<td width="20%" class="surveysmall"><div align="right">

<select name="X1111" id="X1111">
<option value="0">0</option>
<option value="1">1</option>
</select></div></td>
</tr>
<tr>
<td height="58"><div align="center"><a href="http://www.amm.org/cards/cdpkg/d011.asp" target="_NewWin"><img src="images/cards/D011.jpg" alt="Baby Remembrance" width="30" height="45" border="0"><br />
<span class="smallfont">Click to view details</span></a></div></td>
<td class="surveysmall"><p><b><font color="#006633">Baby Remembrance Folder</font></b><br />
<span class="surveyfont">D011</span> </td>
<td class="surveysmall"><div align="right">

<select name="D011" id="D011">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://www.amm.org/cards/cdpkg/dfp006.asp" target="_NewWin"><img src="images/cards/dfp006.jpg" alt="Family Prayer" width="32" height="45" border="0" /></a><br />
<a href="http://www.amm.org/cards/cdpkg/dfp006.asp" target="_NewWin"><span class="smallfont">Click to view details</span></a></div></td>
<td><p><span class="surveysmall"><b><font color="#006633">Family Prayer Folder
</font></b><br />
</span><span class="surveyfont">DFP006</span>
</td>
<td><div align="right">

<select name="DFP006" id="DFP006">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://www.amm.org/cards/cdpkg/dh215.asp" target="_NewWin"><img src="images/cards/DH215.jpg" alt="Healing Remembrance" width="30" height="41" border="0" /></a><br />
<a href="http://www.amm.org/cards/cdpkg/dh215.asp" target="_NewWin"><span class="smallfont">Click to view details</span></a></div></td>
<td><span class="surveysmall"><b><font color="#006633">Healing Folder</font></b><br />
</span><span class="surveyfont">DH215</span> </td>
<td><div align="right">

<select name="DH215" id="DH215">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://www.amm.org/cards/cdpkg/dh005.asp" target="_NewWin"><img src="images/cards/dh005.jpg" alt="Healing Remembrance" width="31" height="45" border="0" /></a><br />
<a href="http://www.amm.org/cards/cdpkg/dh005.asp" target="_NewWin"><span class="smallfont">Click to view details</span></a></div></td>
<td><span class="surveysmall"><b><font color="#006633">Healing Folder</font></b><br />
</span><span class="surveyfont">DH005</span> </td>
<td><div align="right">

<select name="DH005" id="DH005">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://www.amm.org/cards/cdpkg/dh106.asp" target="_NewWin"><img src="images/cards/dh106.jpg" alt="Healing Remembrance" width="30" height="42" border="0" /></a><br />
<a href="http://www.amm.org/cards/cdpkg/dh106.asp" target="_NewWin"><span class="smallfont">Click to view details</span></a></div></td>
<td><span class="surveysmall"><b><font color="#006633">Healing Folder</font></b><br />
</span><span class="surveyfont">DH106</span> </td>
<td><div align="right">

<select name="DH106" id="DH106">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://www.amm.org/cards/cdpkg/d3106.asp" target="_NewWin"><img src="images/cards/d3106.jpg" alt="Memorial Remembrance" width="32" height="45" border="0" /></a><br />
<a href="http://www.amm.org/cards/cdpkg/d3106.asp" target="_NewWin"><span class="smallfont">Click to view details</span></a></div></td>
<td><span class="surveysmall"><b><font color="#006633">Memorial Remembrance Folder</font></b><br />
</span><span class="surveyfont">D3106</span> </td>
<td><div align="right">

<select name="D3106" id="D3106">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></div></td>
</tr>
<tr bgcolor="f5f0dd">
<td colspan="4"><div align="center">
<p>&nbsp; </p>

<input type="submit" name="button" id="button" value="Create Your Card Package"/>
</div></td>
</tr>
</form>
</table>
</td>
</tr>
</table>

</body>
</html>[/HTML]
Jun 23 '08 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
Add an onsubmit event handler to the form:
[html]<form ... onsubmit="return validate()">[/html]In your validate() function, check that the selectedIndex of each is not 0. If you need only one selection, if even one has a selectedIndex not equal to 0 or value neq. 0, then return true.
Jun 24 '08 #2

P: 6
Add an onsubmit event handler to the form:
[html]<form ... onsubmit="return validate()">[/html]In your validate() function, check that the selectedIndex of each is not 0. If you need only one selection, if even one has a selectedIndex not equal to 0 or value neq. 0, then return true.

I first tried one dropdown menu list and used your suggestion above, and it worked, but when I tried to added a second dropdown and use the OR operator, it didn't work. So my question is: How do you validate more than one dropdown menu list?

Below the script that didn't work using the OR:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <title>Untitled Document</title>
  5.  <script LANGUAGE="JavaScript">
  6. <!--
  7. function ValidateForm(form){
  8. ErrorText= "";
  9. if ( form.age.selectedIndex == 0 ) || (form.card.selectedIndex == 0)
  10. { alert ( "Please make a selection." ); return false; }
  11.  
  12. if (ErrorText= "") 
  13. { form.submit() }
  14.  
  15.     }
  16. -->
  17. </script>
  18.  
  19. </head>
  20.  
  21. <body>
  22. <br><form name="feedback" action="mailto:ammwebmaster@amm.org" method=post>
  23.     <p>Your Age:    </p>
  24.     <p>
  25.         <select name="age"> 
  26.             <option value="">Please Select an Option:</option> 
  27.             <option value="0-18 years">0-18 years</option> 
  28.             <option value="18-30 years">18-30 years</option> 
  29.             <option value="30-45 years">30-45 years</option> 
  30.             <option value="45-60 years">45-60 years</option> 
  31.             <option value="60+ years">60+ years</option>
  32.                 </select>
  33.     </p>
  34.     <P>
  35.     <select name="card">
  36.         <option value="0">0</option>
  37.         <option value="1">1</option>
  38.         <option value="2">2</option>
  39.  
  40.     </select>
  41.     <p>
  42.         <input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
  43.         <input type="reset" value="Reset">
  44.         </p>
  45. </form>
  46. </body>
  47.  
  48. </html>
  49.  
Jun 24 '08 #3

acoder
Expert Mod 15k+
P: 16,027
There are two problems. You're not changing errorText, so checking for errorText doesn't make sense. Secondly, you're actually setting errorText in the if-statement rather than comparing. Use double-equals for comparison. Having said that, however, you don't need to check for the value of errorText, since if there's an error, you'll already have returned from the function with return false.
Jun 24 '08 #4

P: 6
There are two problems. You're not changing errorText, so checking for errorText doesn't make sense. Secondly, you're actually setting errorText in the if-statement rather than comparing. Use double-equals for comparison. Having said that, however, you don't need to check for the value of errorText, since if there's an error, you'll already have returned from the function with return false.
I'm sorry but I don't understand! The Code below works now but there is only one drop down list. How do I get the other drop down list to be validated too. Viewer needs to have a selection from one drop down list or the other or receive an Error message--"please make your selection"
Expand|Select|Wrap|Line Numbers
  1.  <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <title>Untitled Document</title>
  5.  <script LANGUAGE="JavaScript">
  6. <!--
  7. function ValidateForm(form){
  8. if (form.age.selectedIndex == 0)
  9. { alert ( "Please make a selection." )
  10.     ; return false; }
  11.     }
  12. -->
  13. </script>
  14. </head>
  15. <body>
  16. <br><form name="feedback" action="mailto:ammwebmaster@amm.org" method=post>
  17.     <p>Your Age:    </p>
  18.     <p>
  19.         <select name="age"> 
  20.             <option value="">Please Select an Age Option:</option> 
  21.             <option value="0-18 years">0-18 years</option> 
  22.             <option value="18-30 years">18-30 years</option> 
  23.             <option value="30-45 years">30-45 years</option> 
  24.             <option value="45-60 years">45-60 years</option> 
  25.             <option value="60+ years">60+ years</option>
  26.                 </select>
  27.     </p>
  28.     <P>
  29.    Select the QTY of cards:
  30.     <select name="card">
  31.         <option value="0">0</option>
  32.         <option value="1">1</option>
  33.         <option value="2">2</option>
  34.     </select>
  35.     <p>
  36.         <input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
  37.         <input type="reset" value="Reset">
  38.         </p>
  39. </form>
  40. </body>
  41. </html>
  42.  
can you show me an example of the script you use?
Jun 24 '08 #5

acoder
Expert Mod 15k+
P: 16,027
Oh, I see the error in your previous code. Change this:
Expand|Select|Wrap|Line Numbers
  1. if ( form.age.selectedIndex == 0 ) || (form.card.selectedIndex == 0)
  2. { alert ( "Please make a selection." ); return false; }
  3.  
to
Expand|Select|Wrap|Line Numbers
  1. if ((form.age.selectedIndex == 0 ) || (form.card.selectedIndex == 0))
  2. {
  3.     alert ( "Please make a selection." );
  4.     return false;
  5. }
Note the extra brackets/parentheses. Also note that the language attribute of the script tag is deprecated. Use the type attribute instead:
[html]<script type="text/javascript">[/html]
Jun 24 '08 #6

P: 6
Oh, I see the error in your previous code. Change this:
Expand|Select|Wrap|Line Numbers
  1. if ( form.age.selectedIndex == 0 ) || (form.card.selectedIndex == 0)
  2. { alert ( "Please make a selection." ); return false; }
  3.  
to
Expand|Select|Wrap|Line Numbers
  1. if ((form.age.selectedIndex == 0 ) || (form.card.selectedIndex == 0))
  2. {
  3.     alert ( "Please make a selection." );
  4.     return false;
  5. }
Note the extra brackets/parentheses. Also note that the language attribute of the script tag is deprecated. Use the type attribute instead:
[html]<script type="text/javascript">[/html]
Thank YOU!
I had to put && in in place of the || but I got it to work. Code is below.
How would you get a page that had 7 dropdown menus
to be validate? So the viewer has to at least select one
dropdown before hitting the submit button??? Can you put && over and over again?


Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. <!--
  3. function ValidateForm(form){
  4.       if ((form.age.selectedIndex == "" ) && (form.card.selectedIndex == 0))
  5.          {
  6.              alert ( "Please make a selection." );
  7.              return false;
  8.          }
  9.      else 
  10.          {
  11.          alert ("You have made your selection.");
  12.           return true;
  13.             }
  14.         }
  15. -->
  16. </script>
Thanks again for all your help. I have learned a lot with this..
Jun 24 '08 #7

acoder
Expert Mod 15k+
P: 16,027
Of course, you're checking if all of them are not selected, so it would be &&, not ||
How would you get a page that had 7 dropdown menus
to be validate? So the viewer has to at least select one
dropdown before hitting the submit button??? Can you put && over and over again?
You could, but it might make more sense to use getElementsByTagName("select") and looping over the elements, so that if you add more drop-down elements, you don't need to change the code, e.g.
Expand|Select|Wrap|Line Numbers
  1. var selects = form.getElementsByTagName("select");
  2. var anySelected = false;
  3. for (i = 0; i < selects.length; i++) {
  4.     if (selects[i].selectedIndex != 0) {
  5.         anySelected = true;
  6.         break;
  7.     }
  8. }
  9. if (!anySelected) {
  10.     // alert error
  11.     return false;
  12. }
Jun 24 '08 #8

Post your reply

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