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!

JaredPar · Accepted Answer · 2011-11-09 21:27:16Z

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 9, 2011 at 21:27

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zequinha-bsb Over a year ago

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!

JaredPar Over a year ago

@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.

zequinha-bsb Over a year ago

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.

Community · Accepted Answer · 2017-05-23 12:21:11Z

0

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

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Nov 9, 2011 at 22:39

mitch

1,83115 silver badges14 bronze badges

Comments

Jon Newmuis · Accepted Answer · 2011-11-09 22:45:26Z

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 9, 2011 at 22:45

answered Nov 9, 2011 at 21:28

Jon Newmuis

26.7k3 gold badges48 silver badges57 bronze badges

3 Comments

DonCroce Over a year ago

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 Over a year ago

added <form name="a" onsubmit="submitHandler();return false;"> and works now :)

Jon Newmuis Over a year ago

Good catch; I've updated the answer accordingly, for completeness.

Collectives™ on Stack Overflow

Javascript Dropdown (Select)

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related