Set Selected Option for Another HTML Class

Question

How do I set the selected option for another page before loading that page?

Say I have page A and B.
If user clicks a button on page A, it will change a default option in page B to "something" and then it will take the user to page B. (so I want it to change before page B loads).

post the code that you are working with at the moment, http://jsfiddle.net — SaiyanToaster, Aug 11 '14 at 18:07
Run script before page load - http://stackoverflow.com/questions/2920129/can-i-run-javascript-before-the-whole-page-is-loaded — Ilya Luzyanin, Aug 11 '14 at 18:10

score 0 · Answer 1 · answered Aug 11 '14 at 18:16

If you are set on using purely JS HTML with no backend language you can try using a GET Variable.

Page 1 HTML:

<a href="p2.html?v=1">Option 1</a><br />
<a href="p2.html?v=2">Option 2</a><br />

P2 HTML:

<form>
  <input id="Option1" type="radio" name="Option" value="1">Option 1 </input>
  <input id="Option2" type="radio" name="Option" value="2">Option 2 </input>
</form>

Page 2 JS:

var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})  //Parse GET Params
document.getElementById("Option" + queryDict["v"]).checked = true;  //Set Option checked

score 0 · Answer 2 · answered Aug 11 '14 at 21:44

I would use JavaScript's localStorage() object for this. So, on page A you'd have something like:

$(document).ready(function(){
    $('a.PageALink').click(function(){
        localStorage.setItem("PageAValue", $(this).text()); // Or use the data attribute, if you want the stored value to be something else, e.g. <a data-value="value to store" href="somewebsite.com">link text</a>
});

And then on Page B:

$(document).ready(function(){
    $('a.PageBLink').text(localStorage.PageAValue);
});

Of course, this answer assumes that either your page already has jQuery included or that you know how to include it. If this isn't a fit for you, let us know what your limitations are in terms of dependencies, and/or scripting.

Set Selected Option for Another HTML Class

2 Answers2