提交表单时如何将变量捕获到 window.location.search 中？答案

【问题标题】：how to capture variables into the window.location.search when submitting a form?提交表单时如何将变量捕获到 window.location.search 中？
【发布时间】：2011-06-05 12:13:42
【问题描述】：

好的，我有一个表格，这就是我想要用它做的：

提交后，（前提是提交成功）：

将表单中特定输入字段“x”的值捕获到变量“xval”中
将变量 'xval' 的值附加到 url 中
然后导航到特定页面...

看，我有几个页面的内容是有条件的，这取决于我通过 url 传递的变量...所以第 1 步的地址如下所示：

whatever.com/products.html?home?try

在第 2 步，也就是表格，它看起来像这样"

whatever.com/products.html?home?try?5?john@gmail.com

第 3 步，应该是读取 url，并相应地显示信息。

重申一下，当用户完成第 2 步时，我不知道如何捕获变量并将它们附加到 url...

我在提交按钮上尝试了一个功能，它导致导航在没有提交验证的情况下触发...我在表单标签本身上尝试了“onsubmit”事件处理程序，但它似乎没有工作...

想法？有什么建议吗？

【问题讨论】：

您是否尝试使用method="GET" 设置表单？
URL 中的问号不能超过一个。如果你这样做了，那么我相信你会遇到意外的行为和跨浏览器的困难......查询字符串应该被编码为更像page=home&action=try&stage=5&email=john@gmail.com
@Pointy - 不，会尝试一下...... @vitch - 真的吗？我一直在使用它与多个问号，什么不是......但是好的，谢谢你的提醒......
@vitch - 这有点离题，但你能解释一下如何以你的方式传递变量吗？在我的情况下，我使用“？”作为分离器并将不同的位置捕获到不同的变量中。请注意，这仅在 js 中，没有服务器端脚本...
@vitch - 好的，所以我做了一些阅读，我有一个从 bloggingdeveloper.com 获得的函数，它允许我从查询字符串中捕获值，但是如何设置它们呢？是不是像这样设置它的平凡过程 - “window.location.href?page=' + source +&action=' + action + '&stage=' + stage + '&email=' + email”;

标签： javascript html forms variables

【解决方案1】：

我想说：坚持在 GET 字符串 (?this=that&foo=bar) 中定义表单字段的公认方式。这将是一种使用新参数加载页面的方法：

var locationstr = location.href.split('?')[0], //URL without params
    try = document.getElementById('try_inputfield').value,
    email = document.getElementById('email_inputfield').value,
    newLocation = [locationStr,
                   '?home=1',
                    '&try=',
                     try,
                    '&email=',
                     email].join('');         // glue new parameters
location.replace(newLocation);                // replace location

如果您想阅读和使用location.search 定义的属性，这是一个字符串扩展，用于将查询字符串转换为对象：

String.prototype.q2obj = function(){
    var qArr = this.split('&')
        ,qObj = {}
        ,i =-1;
    while(++i<qArr.length) {
            qfrag = qArr[i].split('=');
            qObj[qfrag[0]] = qfrag[1];
   }
   return qObj;
};
//usage
var queryObj = location.search.substr(1).q2obj();

【讨论】：

【解决方案2】：

确保在输入组件上设置名称属性。如果您使用类似这样的简单表单提交，则应将值附加到 url。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
    </head>
    <body>
        <form>
            <input id="txt-name" name="name"/>
            <button type="submit">Submit</button>
        </form>
    </body>
</html>

【讨论】：

抱歉，我不太明白，你能解释一下这里发生了什么以及你打算如何解决我的问题吗？我不知道 html
我不会像其他人那样说，所以请从阅读此页面开始：w3schools.com/html/html_forms.asp
基本上提交按钮向服务器提交一个新的get请求。提交按钮还有一个“方法”属性，可用于指定该操作是一个帖子。执行新的获取请求时，表单会构造参数字符串。参数字符串是通过获取所有名称属性并将它们放在键值对中来构造的。参数字符串以 ?然后像 key=value 一样附加键值对，并用 & 分隔。所以参数字符串看起来像 ?key1=value1&key2=value2