CODEWITHSUNDEEP
javascripthtml
DonCroce
DonCroce

Reputation: 475

Javascript Dropdown (Select)

So, I have this code:

<form id="a">

<select name="day1" id="day1">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
...
</select>

<select name="month1" id="month1">
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
...
</select>

<select name="day2" id="day2">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
...
</select>

<select name="month2" id="month2">
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
...
</select>

<input type="submit" value="Submit" />

</form>

I need the script to redirect the browser to

http://example.com/?from=AA-BB&to=XX-YY

after the form is submitted.

AA would be the selected value from select area "day1",

BB would be the selected value from select area "month1",

XX would be the selected value from select area "day2",

YY would be the selected value from select area "month2"

Thanks in advance!

Upvotes: 0

Views: 255

Answers (3)

Jon Newmuis
Jon Newmuis

Reputation: 26520

In plain javascript, you can do the following (separated into the variables as you represented them):

function submitHandler() {
    var AA = document.a.day1.value;
    var BB = document.a.month1.value;
    var XX = document.a.day2.value;
    var YY = document.a.month2.value;

    location.href = "http://example.com/?from=" + AA + "-" + BB + "&to=" + XX + "-" + YY;
}

Then set onsubmit for your form, as follows:

<form name="a" onsubmit="submitHandler(); return false;">

Upvotes: 0

mitch
mitch

Reputation: 1831

How about...

var sFrom="02-03",sTo="03-02";

var from = sFrom.split('-');
var to= sTo.split('-');
console.log(from);
console.log(to);

$('select#day1 > option[value="'+from[0]+'"]').attr('selected','selected');

$('select#month1 > option[value="'+from[1]+'"]').attr('selected','selected');


$('select#day2 > option[value="'+to[0]+'"]').attr('selected','selected');

$('select#month2 > option[value="'+to[1]+'"]').attr('selected','selected');

As for the querystring retrieval, check this link out

Upvotes: 0

JaredPar
JaredPar

Reputation: 755317

Try the following 

var day1 = $('#day1 option:selected').text();
var month1 = $('#month1 option:selected').text();
var day2 = $('#day2 option:selected').text();
var month2 = $('#month2 option:selected').text();
var suffix = 'from=' + day1 + '-' + month1 + '&to=' + day2 + '-' + month2;
window.location = 'http://mypage.com/?' + suffix;

Upvotes: 1

Related Questions