How to change the querystring when I submit my GET form using JQuery?
Solution 1
You need to prevent the default submit action from happening
$(document).ready(function() {
$("#form_search").submit(function(event) {
event.preventDefault(); // <-- add this
var querystring = rewrite_interval_qstring();
// querystring equals "?price=100000,200000" -> exactly what I want !
window.location.href = querystring; // <-- this should work.
});
});
Solution 2
You're almost there. Intercept the submit event (as you are doing), extract the min and max values, build your url and set window.location.href
$(document).ready(function() {
$("#form_search").submit(function(event) {
event.preventDefault();
$this = $(this);
// var url = rewrite_interval_qstring();
var min_price = $('#min_price').val();
var max_price = $('#max_price').val();
var url = $this.attr('action') + '?price=' + min_price + ',' + max_price;
window.location.href = url;
});
});
Solution 3
Answer by Rob Cowie is one method. Another one is adding a hidden field named "price" and fill it before submitting it with the value you want.
Sandro Munda
I'm always aiming for excellence and productivity in everything I do. I'm an entrepreneur with a software engineer background. As the founder and CEO at Forest Admin, I spend most of my time building this new B2B product category and execute the go-to-market strategy.
Updated on June 12, 2022Comments
-
Sandro Munda about 2 years
Suppose that I have a simple form in my page like this :
<form action="/properties/search" method="GET" id="form_search"> <p> <label for="price">Min price:</label> <input type="text" name="min_price" id="min_price"> </p> <p> <label for="price">Max price:</label> <input type="text" name="max_price" id="max_price"> </p> <p> <input type="submit"> </p> </form>
When I submit my form, I have the following url :
http://.../properties/search?min_price=100000&max_price=200000
I want to change this url to have :
http://.../properties/search?price=100000,200000
To do that, I'm using JQuery and the JQuery querystring plugin :
$(document).ready(function() { $("#form_search").submit(function() { var querystring = rewrite_interval_qstring(); // querystring equals "?price=100000,200000" -> exactly what I want ! // ??? }); });
How can I change (comment "???") the submit url ? I have tested the following instructions separately, but it does not work.
window.location = querystring; window.location.href = querystring; window.location.search = querystring;