how to keep the same form after window.location.replace

Question

I have a form with a select drop down menu which calls on a javascript function that reloads the page with the parameters as a query string. I want to have the same dropdown option selected when the page is replaced. How should I go about doing this?

Select form:

<select name="fill_position" id="fill_position" onchange="reloadShowForm()">

JS:

function reloadShowForm() { 
    var fill_pos = $('#fill_position').val();
    window.location.replace(window.location.href + "&fill_position=" + fill_pos);
}

score 1 · Answer 1 · answered Sep 04 '13 at 18:05

One solution is to read query parameter from the url that you are passing window.location.href + "&fill_position=" + fill_pos. i.e., fill_position and then window onload process the result.

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}


var fillPosition = getUrlVars()["fill_position"];
if (fillPosition !== null) {
  $("#fill_position").val(fillPosition);
}

It should be `getUrlVars()["fill_position"]`, shouldn't it? – ComFreek Sep 04 '13 at 18:09 — ComFreek, Sep 04 '13 at 18:09

score 1 · Accepted Answer · edited May 23 '17 at 12:28

You have to parse the GET parameters at first.

Here is a function from radicand provided in this post:

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

Add it to your code and then use this snippet:

var fillPosition = getURLParameter("fill_position");
if (fillPosition !== null) {
  $("#fill_position").val( getURLParameter("fill_position") );
}

score 0 · Answer 3 · answered Sep 04 '13 at 18:26

0

I would upvote ComFreek's concise and useful answer but lack sufficient reputation to do so. I would also comment on your post the following question, but again, lack reputation.

Question: why reload the page? Would it not be simpler to use jquery or similar to perform ajax calls to post your selected value and dynamically insert the resulting subsequent content?

Opinion: This would give you the ability to use some transitions, keep your address bar url clean and improve the user experience (e.g. no page loading lag / screen refresh).

answered Sep 04 '13 at 18:26

J E Carter II

1,436
1
22
39

I really really would like to as well but I'm actually building a rails app and I figured that this is the only way to pass data to ruby.. anyway, I upvoted ComFreek for ya. Cheers – Tony Baik Sep 04 '13 at 18:30
Thanks. Have fun with Ruby. I only have trainee level experience there, but I imagine you should be able to build a controller to receive ajax calls - should be pretty straight forward but might not work for your app depending on your time constraints, security considerations and general comfort with MVC pattern development. Ideas worth getting to know if you have time as they'll save you a lot down the road. – J E Carter II Sep 04 '13 at 19:03
@JECarterII Welcome to StackOverflow :) I agree that your suggestions would provide a better UI experience for the user. Using hash tags would be even better because they would provide the ability to bookmark the URIs. – ComFreek Sep 04 '13 at 19:34
@ComFreek - cheers - I forgot about hash tags. Agreed, good solution in this case. And thanks for the welcome. StackOverflow has been an incredibly helpful resource to me over the years, time to give back if I'm able. – J E Carter II Sep 04 '13 at 19:41

how to keep the same form after window.location.replace

3 Answers3