Javascript Dropdown (Select)

Question

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!

score 1 · Accepted Answer · answered Nov 09 '11 at 21:27

1

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;

answered Nov 09 '11 at 21:27

JaredPar

733,204
149
1,241
1,454

I used to think I knew some jQuery but, the more I read the good answers here at stackoverflow; the more I see how much more I have to learn. That's great! – zequinha-bsb Nov 09 '11 at 21:30
1

@zzzzBov it was unclear if the OP wanted the value or the text. If they wanted the value then yes `val()` would be more appropriate. – JaredPar Nov 09 '11 at 21:32
We always assume the "other" party has the remainder of the puzzle but, just in case, DonCroce, you will need to, of course, put a onSubmit='your-on-submit-processing-function();' and put all that stuff that JaredPar handed to you in there. – zequinha-bsb Nov 09 '11 at 21:33

Jon Newmuis · Answer 2 · 2011-11-09T22:45:26.000

0

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;">

edited Nov 09 '11 at 22:45

answered Nov 09 '11 at 21:28

Jon Newmuis

25,722
2
45
57

still redirects me to index.php?day1=03&month1=11&day2=08&month2=11 The variables are okay, I've tested them in an alert. The whole url with the params gets alerted correctly - The form still gets submitted though and I end on my index.php, no redirect took place to example.com – DonCroce Nov 09 '11 at 21:45
added
and works now :)
– DonCroce Nov 09 '11 at 21:59
Good catch; I've updated the answer accordingly, for completeness. – Jon Newmuis Nov 09 '11 at 22:45

score 0 · Answer 3 · edited May 23 '17 at 12:21

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

Javascript Dropdown (Select)

3 Answers3