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

Form Validation with List menu

ak1dnar
Expert 100+
P: 1,584
I have created HTML form and a Java script to validate the form.
Here is my requirement.

When user select one from any list menu others should set to ALL.
Its working here but the problem is we will say that user will first select
one from Brand as IBM then he will select Type as Laptop. then what will happen again brand will set to All. I need to avoid happening this.. again i want to repeat the same for all the other menus. please be good enough to help on this.


Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <title>Untitled Document</title>
  3. <script language="JavaScript" type="text/JavaScript">
  4. <!--
  5.  
  6. function checkForm(form)
  7. {
  8.  
  9. var vtype = document.form.type.selectedIndex;
  10. var vbrand = document.form.brand.selectedIndex;
  11. var vproc = document.form.proc.selectedIndex;
  12. var vram = document.form.ram.selectedIndex;
  13.         if (vtype == 0) 
  14.         {
  15.             alert("Please select the Type!");
  16.             document.form.type.focus();
  17.             return false;
  18.         }        
  19.         if (vbrand == 0) 
  20.         {
  21.             alert("Please select the brand!");
  22.             document.form.brand.focus();
  23.             return false;
  24.         }        
  25.         if (vproc == 0) 
  26.         {
  27.             alert("Please select the proc!");
  28.             document.form.proc.focus();
  29.             return false;
  30.         }
  31.         if (vram == 0)     
  32.         {
  33.             alert("Please select the RAM!");
  34.             document.form.ram.focus();
  35.             return false;
  36.         }    
  37.  
  38. }
  39. /* 
  40. To set the List menu Values to All
  41. */
  42. function global()
  43. {
  44.     var global_type = document.form.type.selectedIndex;
  45.     if (global_type != 0) 
  46.         {
  47.         document.form.brand.selectedIndex =5;
  48.         document.form.proc.selectedIndex = 7;
  49.         document.form.ram.selectedIndex = 4;
  50.         return false;
  51.         }
  52. }
  53. //-->
  54. </script>
  55. </head>
  56.  
  57. <body>
  58. <table width="236" border="0" cellspacing="0" cellpadding="0">
  59.       <form id="form" name="form" method="post" action="" onSubmit="return checkForm(this);" >
  60.         <tr>
  61.           <td colspan="2" align="left" valign="top">&nbsp;</td>
  62.         </tr>
  63.         <tr>
  64.           <td width="84" align="left" valign="top">&nbsp;</td>
  65.           <td width="158" align="left" valign="top"><span class="text">
  66.             <select name="type" class="text" onchange="return global();">
  67.               <option value="0">Select the Type</option>
  68.               <option value="1">Desktop</option>
  69.               <option value="2">Laptop</option>
  70.               <option value="3">All</option>
  71.             </select>
  72.           </span></td>
  73.         </tr>
  74.         <tr>
  75.           <td height="25" colspan="2" align="left" valign="bottom">&nbsp;</td>
  76.         </tr>
  77.         <tr>
  78.           <td align="left" valign="top">&nbsp;</td>
  79.           <td align="left" valign="top"><span class="text">
  80.            <select name="brand" class="text">
  81.               <option value="0">Select the Brand</option>
  82.               <option value="1">IBM</option>
  83.               <option value="2">DELL</option>
  84.               <option value="3">Sony</option>
  85.           <option value="4">Compaq</option> 
  86.               <option value="5">All</option>
  87.             </select>
  88.           </span></td>
  89.         </tr>
  90.         <tr>
  91.           <td height="25" colspan="2" align="left" valign="bottom">&nbsp;</td>
  92.         </tr>
  93.         <tr>
  94.           <td align="left" valign="top">&nbsp;</td>
  95.           <td align="left" valign="top"><span class="bt-11">
  96.           <select class="text" name="proc">
  97.               <option value="0">Select the Processor --------</option>
  98.               <option value="1">3.6</option>
  99.               <option value="2">3.0</option>
  100.               <option value="3">2.8</option>
  101.               <option value="4">2.6</option>
  102.               <option value="5">2.4</option>
  103.               <option value="6">2.0</option>
  104.               <option value="7">All</option>
  105.             </select>
  106.           </span></td>
  107.         </tr>
  108.         <tr>
  109.           <td height="25" colspan="2" align="left" valign="bottom">&nbsp;</td>
  110.         </tr>
  111.         <tr>
  112.           <td align="left" valign="top">&nbsp;</td>
  113.           <td align="left" valign="top"><span class="bt-11">
  114.            <select class="text" name="ram">
  115.               <option value="0" selected="selected">Select the RAM ---------</option>
  116.               <option value="1">512</option>
  117.               <option value="2">256</option>
  118.               <option value="3">128</option>
  119.               <option value="4">All</option>
  120.             </select>
  121.           </span></td>
  122.         </tr>
  123.  
  124.         <tr>
  125.           <td align="left" valign="top">&nbsp;</td>
  126.           <td height="35" align="right" valign="bottom"><input name="submit" type="submit" value="Sumbit">
  127. </td>
  128.         </tr>
  129.  
  130.       </form>
  131.     </table>
  132. </body>
  133. </html>
  134.  
  135.  
Feb 16 '07 #1
Share this Question
Share on Google+
6 Replies

acoder
Expert Mod 15k+
P: 16,027
Keep a global variable, oldTypeIndex (e.g.), and in your global() function, check for this. If it's 0, then set everything to All, otherwise just set the oldTypeIndex to the new selected index:
Expand|Select|Wrap|Line Numbers
  1. var oldTypeIndex=0;
  2. function global()
  3. {
  4.     var global_type = document.form.type.selectedIndex;
  5.     if (oldTypeIndex != 0) 
  6.         {
  7.         document.form.brand.selectedIndex =5;
  8.         document.form.proc.selectedIndex = 7;
  9.         document.form.ram.selectedIndex = 4;
  10.         return false;
  11.         }
  12.     else {
  13.         oldTypeIndex = global_type;
  14.         }
  15. }
Feb 16 '07 #2

ak1dnar
Expert 100+
P: 1,584
Hi Thanks for the Solution. :)
I'll try it and get back if i found difficulties down there.
Feb 16 '07 #3

ak1dnar
Expert 100+
P: 1,584
Sorry I have to open this thread again.
Please take a look at for the coding here.

Run the HTML and Follow the steps:

First select the Brand, Processor, Ram.Then select the Type.
All the previously selected things has set to All Again How to Avoid this.
I want keep the values for this kind of selection.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <title>Untitled Document</title>
  3. <script language="JavaScript" type="text/JavaScript">
  4. <!--
  5.  
  6. function checkForm(form)
  7. {
  8.  
  9. var vtype = document.form.type.selectedIndex;
  10. var vbrand = document.form.brand.selectedIndex;
  11. var vproc = document.form.proc.selectedIndex;
  12. var vram = document.form.ram.selectedIndex;
  13.         if (vtype == 0) 
  14.         {
  15.             alert("Please select the Type!");
  16.             document.form.type.focus();
  17.             return false;
  18.         }        
  19.         if (vbrand == 0) 
  20.         {
  21.             alert("Please select the brand!");
  22.             document.form.brand.focus();
  23.             return false;
  24.         }        
  25.         if (vproc == 0) 
  26.         {
  27.             alert("Please select the proc!");
  28.             document.form.proc.focus();
  29.             return false;
  30.         }
  31.         if (vram == 0)     
  32.         {
  33.             alert("Please select the RAM!");
  34.             document.form.ram.focus();
  35.             return false;
  36.         }    
  37.  
  38. }
  39. /* 
  40. To set the List menu Values to All
  41. */
  42. var oldTypeIndex=0;
  43. function global()
  44. {
  45.     var global_type = document.form.type.selectedIndex;
  46.     if (oldTypeIndex != 0) 
  47.         {
  48.         document.form.brand.selectedIndex =5;
  49.         document.form.proc.selectedIndex = 7;
  50.         document.form.ram.selectedIndex = 4;
  51.         return false;
  52.         }
  53.     else {
  54.         oldTypeIndex = global_type;
  55.         }
  56. }
  57. //-->
  58. </script>
  59. </head>
  60.  
  61. <body>
  62. <table width="236" border="0" cellspacing="0" cellpadding="0">
  63.       <form id="form" name="form" method="post" action="" onSubmit="return checkForm(this);" >
  64.         <tr>
  65.           <td colspan="2" align="left" valign="top">&nbsp;</td>
  66.         </tr>
  67.         <tr>
  68.           <td width="84" align="left" valign="top">Type</td>
  69.           <td width="158" align="left" valign="top"><span class="text">
  70.             <select name="type" class="text" onchange="return global();">
  71.               <option value="0">Select the Type</option>
  72.               <option value="1">Desktop</option>
  73.               <option value="2">Laptop</option>
  74.               <option value="3">All</option>
  75.             </select>
  76.           </span></td>
  77.         </tr>
  78.         <tr>
  79.           <td height="25" colspan="2" align="left" valign="bottom">&nbsp;</td>
  80.         </tr>
  81.         <tr>
  82.           <td align="left" valign="top">Brand</td>
  83.           <td align="left" valign="top"><span class="text">
  84.            <select name="brand" class="text">
  85.               <option value="0">Select the Brand</option>
  86.               <option value="1">IBM</option>
  87.               <option value="2">DELL</option>
  88.               <option value="3">Sony</option>
  89.           <option value="4">Compaq</option> 
  90.               <option value="5">All</option>
  91.             </select>
  92.           </span></td>
  93.         </tr>
  94.         <tr>
  95.           <td height="25" colspan="2" align="left" valign="bottom">&nbsp;</td>
  96.         </tr>
  97.         <tr>
  98.           <td align="left" valign="top">Processor</td>
  99.           <td align="left" valign="top"><span class="bt-11">
  100.           <select class="text" name="proc">
  101.               <option value="0">Select the Processor --------</option>
  102.               <option value="1">3.6</option>
  103.               <option value="2">3.0</option>
  104.               <option value="3">2.8</option>
  105.               <option value="4">2.6</option>
  106.               <option value="5">2.4</option>
  107.               <option value="6">2.0</option>
  108.               <option value="7">All</option>
  109.             </select>
  110.           </span></td>
  111.         </tr>
  112.         <tr>
  113.           <td height="25" colspan="2" align="left" valign="bottom">&nbsp;</td>
  114.         </tr>
  115.         <tr>
  116.           <td align="left" valign="top">Ram</td>
  117.           <td align="left" valign="top"><span class="bt-11">
  118.            <select class="text" name="ram">
  119.               <option value="0" selected="selected">Select the RAM ---------</option>
  120.               <option value="1">512</option>
  121.               <option value="2">256</option>
  122.               <option value="3">128</option>
  123.               <option value="4">All</option>
  124.             </select>
  125.           </span></td>
  126.         </tr>
  127.  
  128.         <tr>
  129.           <td align="left" valign="top">&nbsp;</td>
  130.           <td height="35" align="right" valign="bottom"><input name="submit" type="submit" value="Sumbit">
  131. </td>
  132.         </tr>
  133.  
  134.       </form>
  135.     </table>
  136. </body>
  137. </html>
  138.  
Feb 21 '07 #4

acoder
Expert Mod 15k+
P: 16,027
So when exactly do you want it set to All? You can check for the selected indexes of the rest and check if they are 0 or not and then set them to ALL.
Feb 21 '07 #5

P: 6
How would you set this up if you just wanted to check to see if at least one menu was selected. Validate that at least one menu had a value of 1 or more?
Jun 19 '08 #6

acoder
Expert Mod 15k+
P: 16,027
Yes, or that at least one menu has a selectedIndex not equal to 0.
Jun 19 '08 #7

Post your reply

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