linking the Dynamic DDL With SUBMIT BUTTON in HTML

Question

i have created a DYNAMIC DROPDOWNLIST DDL2 which is linked to DDL1 by script tag.i want the options of ddl2 to open some pages when clicked on and submit button is pressed. ddl1 consists of 5 states and ddl2 consists of location of those states connected dynamically. below that i also have one more ddl which ive successfully linked because it is not a dynamically linked dropdown list. can some one please tell me the code for linking the ddl2 i.e goa asf,goa lpg ro etc list to pages? the codes are shown below:

   <!DOCTYPE HTML>
   <HTML>
   <HEAD>
   <TITLE> STATES</TITLE>
   <script type="text/javascript">
    function configureDropDownLists(ddl1,ddl2) {
  var goa = ['GOA ASF', 'Goa LPG Plant'];
  var maharashtra = ['AKOLA IRD', 'AURANGABAD LPG PLANT''WADALA I  TERMINAL'];
 var rajasthan = ['AJMER LPG PLANT ','AJMER TERMINAL', 'AWA-SALAWAS PIPELINE PROJ'];
var gujrat = ['AHMEDABAD NWZ LPG ', 'AHMEDABAD NWZ RETAIL', 'AHMEDABAD RETAIL RO'];
var madhyapradesh =['BAKANIA RIL', 'BHOPAL DSRO', 'BHOPAL RRO'];

    switch (ddl1.value) {
    case 'Goa':
        ddl2.options.length = 0;
        for (i = 0; i < goa.length; i++) {
            createOption(ddl2, goa[i],goa[i]);
        }
        break;
    case 'Maharashtra':
        ddl2.options.length = 0; 
    for (i = 0; i < maharashtra.length; i++) {
        createOption(ddl2, maharashtra[i],maharashtra[i]);
        }
        break;
    case 'Rajasthan':
        ddl2.options.length = 0;
        for (i = 0; i < rajasthan.length; i++) {
            createOption(ddl2, rajasthan[i],rajasthan[i]);
        }
        break;
    case 'Gujrat':
        ddl2.options.length = 0;
        for (i = 0; i < gujrat.length; i++) {
            createOption(ddl2, gujrat[i],gujrat[i]);
        }
        break;
     case 'MadhyaPradesh':
        ddl2.options.length = 0;
        for (i = 0; i < madhyapradesh.length; i++) {
            createOption(ddl2, madhyapradesh[i],madhyapradesh[i])
          }
        break;
        default:
            ddl2.options.length = 0;
        break;
         }

      }

    function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
     }
    </script>
    </HEAD>

    <BODY>
    <div>
     <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A STATE:</H1>

      <select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
      <option value=""></option>
      <option value="Goa">Goa</option>
      <option value="Maharashtra">Maharashtra</option>
      <option value="Rajasthan">Rajasthan</option>
      <option value="Gujrat">Gujrat</option>
      <option value="MadhyaPradesh">MadhyaPradesh</option>
      </select>

       <select id="ddl2">
       </select><br>
       <br>
       <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
      </div> 
        <div>
      <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An ASSET:</H1>
     <form id="link">
    <select multiple="multiple" size="1">

    <option value="http://stackoverflow.com/">4GB RAM PC- Lot 500 HCL</option>
     <option value="http://google.com/">4GB RAM PC- Lot 450 HCL</option>
     <option value="http://yahoo.com/">HD 245 Gold  Lot 50</option>
     <option value="http://bing.com/">Marathon 255 (40)</option>
     <option value="http://php.net/">Wep HQ 2100 (20)</option>
     <option value="ADF Scanner (45)">ADF Scanner (45)</option>       
    </select><BR>

     <br>
     <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; ">
  </form>
  </div>
  <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script>
$('#link').on('submit', function (e) {
    e.preventDefault();
    var $form = $(this),
            $select = $form.find('select'),
            links = $select.val();
    if (links.length > 0) {
        for (i in links) {
            link = links[i];
            window.open(link);
        }
    }
  });
    </script>

   </BODY>
    </HTML>

The code given above is my whole pages code. also i have recieved this code for linking it but it does not work. i dont know why. please help me with a code if u know. or tell me the changes that i will have to do in the code given below so that it works.

  <!DOCTYPE HTML>
   <HTML>
   <HEAD>
   <TITLE> STATES</TITLE>
  <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script type="text/javascript">

    allLinks= {goa:{0:"google.com",1:"www.gmail.com"},
    maharashtra : 
    {0:'www.yahoo.com',1:"www.microsoft.com",2:"www.apple.com"},
    rajasthan :
    {0:'www.stackoverflow.com',1:'www.cnn.com',2:'www.nasa.gov'}
   }

       function configureDropDownLists(ddl1,ddl2) {

         var goa = ['GOA ASF', 'Goa LPG Plant', ];
         var maharashtra = ['AKOLA IRD', 'AURANGABAD LPG 
         PLANT','WADALA I TERMINAL'];
        var rajasthan = ['AJMER LPG PLANT ','AJMER 
         TERMINAL','UDAIPUR RRO'];
        var gujrat = ['AHMEDABAD NWZ LPG ','AHMEDABAD NWZ RETAIL','VADODARA IRD '];
          var madhyapradesh =['BAKANIA RIL', 'BHOPAL DSRO', 'BHOPAL RRO'];


          switch (ddl1.value) {
          case 'goa':
          ddl2.options.length = 0;
          for (i = 0; i < goa.length; i++) {
          createOption(ddl2, goa[i],i);
             }
          break;
          case 'maharashtra':
         ddl2.options.length = 0;
         case 'maharashtra':
        ddl2.options.length = 0; 
        for (i = 0; i < maharashtra.length; i++) {
        createOption(ddl2, maharashtra[i],i);
         }
        break;
        case 'rajasthan':
        ddl2.options.length = 0;
        for (i = 0; i < rajasthan.length; i++) {
        createOption(ddl2, rajasthan[i],i);
         }
        break;
        case 'gujrat':
        ddl2.options.length = 0;
        for (i = 0; i < gujrat.length; i++) {
         createOption(ddl2, gujrat[i],i);
          }
       break;
         case 'madhyapradesh':
         ddl2.options.length = 0;
         for (i = 0; i < madhyapradesh.length; i++) {
         createOption(ddl2, madhyapradesh[i],i);
              }
           break;
           default:
           ddl2.options.length = 0;
           break;
           }
                }

           function createOption(ddl, text, value) {
           var opt = document.createElement('option');
          opt.value = value;
          opt.text = text;
          ddl.options.add(opt);
            }

            $(document).ready(function(){

              $('#link').on('submit', function (e) {
             e.preventDefault();
              alert('submited, opening link');

               var $form = $(this);

               $select1 = $form.find('select#ddl1').val(); //state
               $select2 = $form.find('select#ddl2').val(); //city
                window.open('http://'+allLinks[$select1][$select2]); 
                 });
                    });
                  </script>
                  </head>

    <BODY> 
     <div id='link'>
      <form>
        <select id="ddl1" 
       onchange="configureDropDownLists(this,document.getElemen
       tById('ddl2'))">
     <option value=""></option>
      <option value="goa">Goa</option>
        <option value="maharashtra">Maharashtra</option>
        <option value="rajasthan">Rajasthan</option>
        <select id="ddl2">
       </select><br>
       <br>
        <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
       </div>
       </body>
        </html>

score 2 · Accepted Answer · answered Jun 30 '16 at 08:02

Ok, so first of all inside your function configureDropDownLists for each variable you need to add a value 'Select' for eg.

var goa = ['Select','GOA ASF', 'Goa LPG Plant'];

what this statement will do is by default the value in your ddl2 will be set to 'Select'

Secondly replace your ddl2 select tag with

<select id="ddl2" onchange ="openpage()">

Now inside your this 'openpage' function create a JSON object which links each ddl2 value to a corresponding webpage

var newpage = {"list":[
               {"state": "GOA ASF", "page" : "webpagelink"},
               {"state": "GOA LPG PLANT", "page" : "webpagelink"},
               and so on for all the values
              ]};

also inside this function perform this task

x =document.getElementById("ddl2");
var state =x.options[x.selectedIndex].value;
if( state != 'select')
{
  loop through all the values in the Json pbject and compare them with state, if a match occurs then do the following//
  window.open(newpage.list[i].page);
}

here 'i' is the index where the match occurs. Hope this should help you out

loop through all the values in the Json pbject and compare them with state, if a match occurs then do the following// window.open(newpage.list[i].page); } can u tell me the code for this? — Neha Shetty, Jul 01 '16 at 05:29
so the codes that i got from net is not proper right? i should just make changes in my original code pages u mean. right? — Neha Shetty, Jul 01 '16 at 05:35

score 0 · Answer 2 · answered Jul 01 '16 at 05:43

   <!DOCTYPE HTML>
   <HTML>
   <HEAD>
   <TITLE> STATES</TITLE>
   <script type="text/javascript">
    function configureDropDownLists(ddl1,ddl2) {
  var goa = ['select',GOA ASF', 'Goa LPG Plant'];
  var maharashtra = ['select','AKOLA IRD', 'AURANGABAD LPG PLANT''WADALA I  TERMINAL'];
 var rajasthan = ['select','AJMER LPG PLANT ','AJMER TERMINAL', 'AWA-SALAWAS PIPELINE PROJ'];
var gujrat = ['AHMEDABAD NWZ LPG ', 'AHMEDABAD NWZ RETAIL', 'AHMEDABAD RETAIL RO'];
var madhyapradesh =['BAKANIA RIL', 'BHOPAL DSRO', 'BHOPAL RRO'];

    switch (ddl1.value) {
    case 'Goa':
        ddl2.options.length = 0;
        for (i = 0; i < goa.length; i++) {
            createOption(ddl2, goa[i],goa[i]);
        }
        break;
    case 'Maharashtra':
        ddl2.options.length = 0; 
    for (i = 0; i < maharashtra.length; i++) {
        createOption(ddl2, maharashtra[i],maharashtra[i]);
        }
        break;
    case 'Rajasthan':
        ddl2.options.length = 0;
        for (i = 0; i < rajasthan.length; i++) {
            createOption(ddl2, rajasthan[i],rajasthan[i]);
        }
        break;
    case 'Gujrat':
        ddl2.options.length = 0;
        for (i = 0; i < gujrat.length; i++) {
            createOption(ddl2, gujrat[i],gujrat[i]);
        }
        break;
     case 'MadhyaPradesh':
        ddl2.options.length = 0;
        for (i = 0; i < madhyapradesh.length; i++) {
            createOption(ddl2, madhyapradesh[i],madhyapradesh[i])
          }
        break;
        default:
            ddl2.options.length = 0;
        break;
         }

      }

    function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
     }
   var newpage = {"list":[
           {"state": "GOA ASF", "page" : "webpagelink"},
           {"state": "GOA LPG PLANT", "page" : "webpagelink"},            
          ]};
   x =document.getElementById("ddl2");
  var state =x.options[x.selectedIndex].value;
  if( state != 'select')
   {
      loop through all the values in the Json pbject and compare them                        with state, if a match occurs then do the following//
       window.open(newpage.list[i].page);
    }

    </script>
    </HEAD>

    <BODY>
    <div>
     <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A STATE:</H1>

      <select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
      <option value=""></option>
      <option value="Goa">Goa</option>
      <option value="Maharashtra">Maharashtra</option>
      <option value="Rajasthan">Rajasthan</option>
      <option value="Gujrat">Gujrat</option>
      <option value="MadhyaPradesh">MadhyaPradesh</option>
      </select>

       <select id="ddl2" onchange ="openpage()">
       </select><br>
       <br>
       <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
      </div> 
        <div>
      <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An ASSET:</H1>
     <form id="link">
    <select multiple="multiple" size="1">

    <option value="http://stackoverflow.com/">4GB RAM PC- Lot 500 HCL</option>
     <option value="http://google.com/">4GB RAM PC- Lot 450 HCL</option>
     <option value="http://yahoo.com/">HD 245 Gold  Lot 50</option>
     <option value="http://bing.com/">Marathon 255 (40)</option>
     <option value="http://php.net/">Wep HQ 2100 (20)</option>
     <option value="ADF Scanner (45)">ADF Scanner (45)</option>       
    </select><BR>

     <br>
     <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; ">
  </form>
  </div>
  <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script>
$('#link').on('submit', function (e) {
    e.preventDefault();
    var $form = $(this),
            $select = $form.find('select'),
            links = $select.val();
    if (links.length > 0) {
        for (i in links) {
            link = links[i];
            window.open(link);
        }
    }
  });
    </script>

   </BODY>
    </HTML>

is this the right structure of the code? also pls tell me the code for this--{ loop through all the values in the Json pbject and compare them with state, if a match occurs then do the following// window.open(newpage.list[i].page); } @AashishAilawadi — Neha Shetty, Jul 01 '16 at 05:45
you have no put 'select' in gujarat and madhya pradesh. Plus the json object and the code follwing after it is to be put in function openpage(); as far as the looping code is concerned you can find it in looping through json objects using javascript — Aashish Ailawadi, Jul 01 '16 at 07:56

linking the Dynamic DDL With SUBMIT BUTTON in HTML

2 Answers2