CODEWITHSUNDEEP
phphtmllistjavaquery
Neha Shetty
Neha Shetty

Reputation: 69

How to link submit button with OPTION LIST created in html using javascript

i am developing a webpage which has a dependent drop down list.in which the first list contains 5 states and the 2nd contains the cities within that states.i have used the script shown below to link the two drop down list. can i link a submit button in such a way to the 2nd dependent drop down list that when one option is selected in the list and the submit button is clicked, it should open another page, whereas when another option is selected and submit button is clicked it should open some other page. Basically I want each option to open some linked page when the submit button is clicked. By searching, I understood that I have to use php/javaquery for this but I am not getting the appropriate code for the same.

I do not want the submit button to open only 1 specific page. Rather,I want it to open 6 different pages corresponding to different options selected.

if yes what codes should i use because the second list is not in the (select tag) its created using javascript shown below: 

 <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','UDAIPUR RRO'];
 var gujrat = ['AHMEDABAD NWZ LPG ', 'AHMEDABAD NWZ RETAIL','VADODARA IRD '];
 var madhyapradesh =['BAKANIA RIL', 'BHOPAL DSRO', 'BHOPAL RRO'];//this is my dependent list. i want these options to have links.

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>

 <br>
 <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>

this is my design code! when i select on goa in the 1st drop down list i get locations of goa in the 2nd dependent drop down list (eg: Goa Asf)by the codes ive written. but what i want it to do is when i click on an option (eg: Goa Asf) and click on submitbutton it will open a page "http:" whereas when i select other option it will option another page.

i know how to link a normal dropdown list designed in html with the submit button.bt i dont know how to connect the list created by javascript with the submit button. please help me with the codes and tell me how i can do it. this is the code that i have used for linking the normal dropdown list with option button. this ive used for some other webpage. i want to do this with the same above codes

       <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);
        }
    }
});

please tell me the codes if u know.

Upvotes: 0

Views: 1166

Answers (1)

T.Shah
T.Shah

Reputation: 2768

This is how you will get the value of selected option. I have shown for the first drop down, but if you want, you can get the value of the second one similarly. Then either you can create an array or make a switch case statement to submit the form to different pages.

<div>
    <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A STATE:</H1>
    <form name="myForm" id="myForm" action="">
         <select id="ddl" name="dd1" 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" name="dd12">
    </select><br>
    <br>
    <!--<input class="SubmitButton" type="submit" name="submit"  id="submit" value="Submit" style="font-size:20px; " />-->
    <button id="submit" name="submit">Submit</button>


    </form>

    </div> 



   <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
   <script>
    $(document).ready(function()
    { 
        $('#submit').on('click', function (e) {
            //e.preventDefault();
            var linkTo = $('select[name="dd1"]' ).val();
            var goTo;
            alert(linkTo);

            switch (linkTo) {
            case 'Goa':
                goTo = "www.google.com";
                break;
            case 'Maharashtra':
                goTo = "www.yahoo.com";
                break;
            }



            $("#myForm").attr("action", goTo);
             alert(goTo);
            $("#myform").submit();

        });

    });

Hope this helps...

Upvotes: 1

Related Questions