0

My problem is a bit hard to explain but i will try my best. I have a page that looks a little bit like this:

<form>
  <input type="radio" name="option" id="option1" value="1"><label for="option1">Option 1</label>
  <input type="radio" name="option" id="option2" value="2"><label for="option2">Option 2</label>
  <input type="radio" name="option" id="option3" value="3"><label for="option3">Option 3</label>
  <input type="submit" value="Ok">
</form>
<div id="option1Container">
  Content
</div>
<div id="option2Container">
  Content
</div>
<div id="option3Container">
  Content
</div>

All of the option containers are hidden so when the user checks the radiobutton for an option and clicks "ok" the page scrolls down to the chosen option which is fading in.

I have a jquery-code that senses if there is ?option=X in the url so that i can link to the option i want from other pages. So if a user goes to www.myurl.com/?option=2 the page with the above code loads and scrolls down to the container for option 2.

Now, what i want to do is that i want ?option=X to be added to the url when the user uses the radio buttons to choose option and submit. That way the users can copy the adress and send to their friends.

Something like this:

$( "form" ).submit(function( event ) {
  var value = $(this).find('input[name="option"]:checked').val();
  // Add "?option=" + value to URL
});

I cant get it to work and i cant find any guides about it. Is there anyone who knows how to do this?

sebbur
  • 31
  • 1
  • 3
  • You can use `window.history.pushState` to [Modify the URL without reloading the page](/questions/824349/modify-the-url-without-reloading-the-page?rq=1) – Joseph Marikle Jun 09 '16 at 17:54
  • I think that for your problem, it would be better to use a fragment url, something like: http://getbootstrap.com/getting-started/#examples Where 'examples' is the id of the element which you want to scroll. In the radio click event listener you would do: window.location.href = '#option2Container'; – tenhsor Jun 09 '16 at 19:22

0 Answers0