Neha Shetty Neha Shetty - 5 months ago 10
PHP Question

linking the Dynamic DDL With SUBMIT BUTTON in HTML

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>

Answer

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