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, Feb 12 '16 at 19:18

Rob M. · Accepted Answer · 2016-02-12T22:02:23.707

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 '16 at 22:02

answered Feb 12 '16 at 19:20

Rob M.

35,491
6
51
50

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 have the selected="selected" added to it based on your snippet? – user5920040 Feb 12 '16 at 20:46
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 – Rob M. Feb 12 '16 at 20:49
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? – user5920040 Feb 12 '16 at 21:58
The javascript is being executed before select is in the DOM, I'll update my answer with how you can resolve this issue – Rob M. Feb 12 '16 at 22:01

score 0 · Answer 2 · answered Feb 12 '16 at 19:21

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 '16 at 19:21

Vinny M

762
4
14

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

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!

score 0 · Answer 4 · answered Feb 12 '16 at 19:29

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=','');

javascript pass a variable in url then select option is selected

4 Answers4