Question

好的，我有一张表格，这就是我想用它做的事情：

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

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

请参阅，我有几个页面是有条件的，取决于我通过网址传递的变量...所以第1步的地址如下所示：

whatever.com/products.html?home?try

在第2步，即表单，它看起来像这样“

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

步骤3，应该读取网址，并据此显示信息。

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

我在提交按钮上尝试了一个函数，导致导航在没有提交验证的情况下触发...我在表单标签上尝试了'onsubmit'事件处理程序，它似乎不起作用...

想法？建议？

Answer 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();

Answer 2

确保在输入组件上设置name属性。如果您使用简单的表单提交，则应将值附加到网址。

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

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

2 个答案: