Solved

Javascript populate data in dropboxes

Posted on 2004-03-28
4
315 Views
Last Modified: 2008-03-17
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
Comment
Question by:babasri101
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 30

Expert Comment

by:third
ID: 10700793
<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
 
LVL 30

Accepted Solution

by:
third earned 300 total points
ID: 10700809
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
 
LVL 12

Assisted Solution

by:lil_puffball
lil_puffball earned 200 total points
ID: 10700852
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
 
LVL 30

Expert Comment

by:third
ID: 10700905
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

Featured Post

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question