• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 332
  • Last Modified:

Javascript populate data in dropboxes

I have two dropboxes, Select1, Select2 in Form2. Select1 has 5 options. Select2 is disabled. Only if i select "money order or check" options, in first dropbox, second dropbox should be active and give its two options and i cannot skip without selecting anything from the second dropdown.

Code is as follows.

<html>
      <head>
            
      </head>
      <body>
            <TABLE border="0">
                  <TR>
                        <form id="Form2" name="Form2" action="" method="post">
                              <TD width="127">Payment Method:</TD>
                              <TD><SELECT id="Select1" name="Select1">
                                          <OPTION value="0" selected></OPTION>
                                          <OPTION value="1">Computer</OPTION>
                                          <OPTION value="2">Pay by Phone</OPTION>
                                          <OPTION value="3">Wire Transfer</OPTION>
                                          <OPTION value="4">Money Order</OPTION>
                                          <OPTION value="5">Check</OPTION>
                                    </SELECT></TD>                        
                  </TR>
                  <TR>                        
                              <TD width="127">Mailing Method:</TD>
                              <TD><SELECT id="Select2" name="Select2">
                                          <OPTION value="7" selected></OPTION>
                                          <OPTION value="8">Overnight</OPTION>
                                          <OPTION value="9">Regular</OPTION>
                                    </SELECT></TD>
                  </TR>
                  </form>
            </TABLE>
      </body>
</html>

Thanks in advance for ur help.

Ragz.
0
babasri101
Asked:
babasri101
  • 3
2 Solutions
 
thirdCommented:
<html>
     <head>
         
     </head>
     <body>
          <TABLE border="0">
               <TR>
                    <form id="Form2" name="Form2" action="" method="post">
                         <TD width="127">Payment Method:</TD>
                         <TD><SELECT id="Select1" name="Select1" onchange="this.form.Select2.disabled = this.selectedIndex <= 3;">
                                   <OPTION value="0" selected></OPTION>
                                   <OPTION value="1">Computer</OPTION>
                                   <OPTION value="2">Pay by Phone</OPTION>
                                   <OPTION value="3">Wire Transfer</OPTION>
                                   <OPTION value="4">Money Order</OPTION>
                                   <OPTION value="5">Check</OPTION>
                              </SELECT></TD>                    
               </TR>
               <TR>                    
                         <TD width="127">Mailing Method:</TD>
                         <TD><SELECT id="Select2" name="Select2" disabled>
                                   <OPTION value="7" selected></OPTION>
                                   <OPTION value="8">Overnight</OPTION>
                                   <OPTION value="9">Regular</OPTION>
                              </SELECT></TD>
               </TR>
               </form>
          </TABLE>
     </body>
</html>
0
 
thirdCommented:
modified a bit,

<html>
     <head>
          <script>
                 function flag(obj){
                     obj.form.Select2.selectedIndex = 0;
               obj.form.Select2.disabled = obj.selectedIndex <= 3;
                   }
              </script>
     </head>
     <body>
          <TABLE border="0">
               <TR>
                    <form id="Form2" name="Form2" action="" method="post">
                         <TD width="127">Payment Method:</TD>
                         <TD><SELECT id="Select1" name="Select1" onchange="flag(this)">
                                   <OPTION value="0" selected></OPTION>
                                   <OPTION value="1">Computer</OPTION>
                                   <OPTION value="2">Pay by Phone</OPTION>
                                   <OPTION value="3">Wire Transfer</OPTION>
                                   <OPTION value="4">Money Order</OPTION>
                                   <OPTION value="5">Check</OPTION>
                              </SELECT></TD>                    
               </TR>
               <TR>                    
                         <TD width="127">Mailing Method:</TD>
                         <TD><SELECT id="Select2" name="Select2" disabled>
                                   <OPTION value="7" selected></OPTION>
                                   <OPTION value="8">Overnight</OPTION>
                                   <OPTION value="9">Regular</OPTION>
                              </SELECT></TD>
               </TR>
               </form>
          </TABLE>
     </body>
</html>
0
 
lil_puffballCommented:
To make sure the user selects something put this in your form tag:

<form id="Form2" name="Form2" action="" method="post" onsubmit="if(this.form.select2.disabled=false&&this.form.select2.selectedIndex==0){alert('Please choose something from select 2.');return false;}">
0
 
thirdCommented:
babasri101,

thanks!



lil_puff,

or just

if(this.form.select2.selectedIndex==0){alert('Please choose something from select 2.');return false;}

if babasri101 used my second post.

;-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now