How to modify URL Query String without reload

Question

I'm using the following method to change the query URL parameter corresponding to the input/dropdown on a form. Currently window.location.href will cause a page reload on change. How can I integrate history.replaceState() instead to modify the URL without reloading?

REGEX function

function replaceQueryString(url, param, value) {
    var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i");
    if (url.match(re))
        return url.replace(re, '$1' + param + "=" + value + '$2');
    else
        return url + '&' + param + "=" + value;
}

On input change

$("#input_field").on('change', function(e) {
    window.location.href = replaceQueryString(window.location.href, 'input_value', $(this).val());
});

Update

I've now managed to update the URL to the value domain.com/2 on change, but how can I run it through the replaceQueryString function to parse it into domain.com/?input_value=2

$("#input_field").on('change', function(e) {
     window.history.replaceState("#input_field", "input_value", $(this).val());
});

@guest271314 it should be changing the URL to domain.com/?input_value=3&next_filter_value=2 etc. — scopeak
– scopeak, Commented Sep 29, 2017 at 16:58
window.history.replaceState({}, "input_value", replaceQueryString(location.href, "input_value", $(this).val()))? — guest271314
– guest271314, Commented Sep 29, 2017 at 17:32

guest271314 · Accepted Answer · 2017-09-29 17:41:39Z

1

Pass replaceQueryString() function to third parameter of .replaceState()

window.history.replaceState({}
, "input_value"
, replaceQueryString(location.href, "input_value", $(this).val()));

answered Sep 29, 2017 at 17:41

guest271314

1

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

Collectives™ on Stack Overflow

How to modify URL Query String without reload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related