使用 JQuery 提交 GET 表单时如何更改查询字符串?

发布于 2024-11-09 03:49:06 字数 1390 浏览 0 评论 0原文

假设我的页面中有一个简单的表单,如下所示:

<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>

当我提交表单时,我有以下网址:

http://.../properties/search?min_price=100000&max_price=200000

我想更改此网址:

http://.../properties/search?price=100000,200000

为此,我使用 JQuery 和 < a href="http://plugins.jquery.com/project/query-object" rel="noreferrer">JQuery 查询字符串插件:

$(document).ready(function() {
    $("#form_search").submit(function() {
        var querystring = rewrite_interval_qstring();
        // querystring equals "?price=100000,200000" -> exactly what I want !

        // ???
    });
});

如何更改(注释“???”)提交网址?我分别测试了以下指令,但不起作用。

window.location = querystring;
window.location.href = querystring;
window.location.search = querystring;

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;

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

当梦初醒 2024-11-16 03:49:06

你快到了。拦截提交事件(正如您所做的那样),提取最小值和最大值,构建您的 url 并设置 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;
    });
});

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;
    });
});
痞味浪人 2024-11-16 03:49:06

您需要防止发生默认提交操作

$(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.
    });
});

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.
    });
});
凝望流年 2024-11-16 03:49:06

Rob Cowie 的回答是一种方法。另一种方法是添加一个名为“价格”的隐藏字段,并在提交之前填写您想要的值。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文