javascript pass a variable in url then select option is selected

Question

I am trying to figure out how to pass a variable assigned to a link on one page and then have it prefill a select option in a form on another page.

Source page link: example.com/page?value=2

Page with form:

<select name="select_name" id="id_name" class="select-success">
<option selected="selected" value=""></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>

From reading various posts and the code I have to work with not really matching that criteria. I am a bit js illiterate. I cobbled this together on the page with the form:

document.getElementByType(“select").value = location.search.replace('?','');

Not getting any results. The form is being generated in the backend so I cannot add a id/class or anything to the <option>.

will you like to use local storage rather than passing it throught url? — brk
– brk, Commented Feb 12, 2016 at 19:18

Rob M. · Accepted Answer · 2016-02-12 22:02:23Z

1

This will turn the querystring into an key => value object:

var qs = location.search.substr(1).split('&').reduce(function(prev, cur) {
  var split = cur.split('=');
  prev[split[0]] = decodeURIComponent(split[1]);
  return prev;
}, {});

And this will set the selected item:

window.addEventListener('load', function() {
   document.getElementById("id_name").value = qs.value;
});

edited Feb 12, 2016 at 22:02

answered Feb 12, 2016 at 19:20

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

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

4 Comments

user5920040 Over a year ago

Thanks for the answer, but it does not seem to working or maybe I am missing something. In the url ?value=2, that should have <option value="2">Option 2</option> have the selected="selected" added to it based on your snippet?

Rob M. Over a year ago

It should not have the selected attribute moved to it based on my snippet, that attribute is for initializing a select with a default selected value (other than the first in the list). The select should show Option 2, and document.getElementById("id_name").value should be 2

user5920040 Over a year ago

I am getting the Cannot set property 'value' of null error on document.getElementById("id_name").value = qs.value; - when I am on the form page - any ideas?

Rob M. Over a year ago

The javascript is being executed before select is in the DOM, I'll update my answer with how you can resolve this issue

Vinny M · Accepted Answer · 2016-02-12 19:21:45Z

0

I would use local storage to do this. Check out: https://github.com/js-cookie/js-cookie

On the first page simply:

Cookies.set('name', 'value');

On the subsequent page:

Cookies.get('name'); // => Returns 'value'

answered Feb 12, 2016 at 19:21

Vinny M

7704 silver badges14 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:15:40Z

0

I'm not a Javascript expert, but you can surely use some previously-made solutions to solve your problem.

On this other StackOverflow post you can find how to modify an URL to set a GET parameter, and also check if the parameter already exists.

To change a SELECT value, I recommend you assign an ID to it, and then reference it by ID rather than Type. Something like this:

document.getElementById('id_name').value = window.location.search.replace("?", "");

Hope this helps!

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Feb 12, 2016 at 19:26

Ignacio Téllez

4514 silver badges14 bronze badges

Comments

SteamDev · Accepted Answer · 2016-02-12 19:29:33Z

0

1.) You aren't properly parsing the search string.

location.search // "?value=2"

2.) .getElementByType() isn't a method

Solution

There are fancier ways of parsing query string values, but this is a 1-line solution that should work for you.

document.getElementById('id_name').value = location.search.replace('?value=','');

answered Feb 12, 2016 at 19:29

SteamDev

4,4345 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

javascript pass a variable in url then select option is selected

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related