通过 JavaScript 将参数传递给表单答案

【问题标题】：Passing parameters to a form, via JavaScript通过 JavaScript 将参数传递给表单
【发布时间】：2013-05-10 13:07:26
【问题描述】：

我有一个传递许多参数的表单。至此，库存参数正在传递中：

var params = "title=" + document.getElementById("title").value + 
             "&url=" + document.getElementById("url").value + 
             "&snippet=" + document.getElementById("snippet").value +
             "&tags=" + document.getElementById("tags").value +
             "&status_bookmark=" + document.getElementById("status_bookmark").value +
             "&comment=" + document.getElementById("comment").value +
             "&status_comment=" + document.getElementById("status_comment").value;

我正在尝试将其他表单元素附加到此参数字符串，它们是：

var i, lng = document.getElementById('addbookmark').length;
// If the length property is undefined, then there is only one checkbox.
if (typeof lng === "undefined") {
    params + "&topic-link-item-1=" + document.getElementById("topic-link-item-1").value;
    params + "&topic-link-comment-box-1=" + document.getElementById("topic-link-comment-box-1").value;
}
else {
    for (i = 0; i < lng; i++) {
        params + "&topic-link-item-" + i + "=" + document.getElementById("topic-link-item-" + i).value;
        params + "&topic-link-comment-box-" + i + "=" + document.getElementById("topic-link-comment-box-" + i).value;
    }
}

在这里，我使用了取自 another StackOverflow article 的代码，正如您所见，我正在尝试构建一系列配对参数，这些参数与我通过 jQuery 在其他地方生成的临时表单元素相匹配，其中有效。

但是，这些值似乎没有通过表单传递，而其他表单元素正在传递。

有什么建议吗？

更新

我根据建议修改了代码，但它不起作用：

var i, formObj = document.form['addbookmark'], formObjLng = document.form['addbookmark'].length;
// If the length property is undefined, then there is only one checkbox.
if ((typeof formObjLng !== "undefined")) {
    for (i = 0; i < formObjLng; i++) {
        if ((formObj.elements['topic-link-item-' + i].type == "checkbox") && (formObj.elements['topic-link-item-' + i].checked)) {
            params = params + "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i)).value;
            params = params + "&topic-link-comment-box-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-comment-box-" + i)).value;
        }
    }
}

至于表单，它只是一个 ID 为“addbookmark”的表单，并且再次说明我之前所说的，除了我在这里尝试的之外，其他一切都有效。

【问题讨论】：

你提到的“表格”在哪里？是否有实际的 html 表单元素？
您的表单是POST 还是GET？如果您的服务器端代码需要 POST，那么通过 GET 传递参数将不起作用。
什么是 addbookmark ？如果是表单元素，使用form['name'].elements['elementname'].type来检测表单元素的类型（复选框等）。
向我们展示您处理这些参数的服务器端代码。
大家好，正如我所说，除上述之外的其他一切都完美；只是 JavaScript 不起作用。

标签： javascript

【解决方案1】：

您的代码存在 2 个问题。您需要使用 encodeURIComponent 函数对值进行 URL 编码。您还需要在连接时将结果分配回params 变量：

var params = 
    "title=" + encodeURIComponent(document.getElementById("title").value) + 
    "&url=" + encodeURIComponent(document.getElementById("url").value) + 
    "&snippet=" + encodeURIComponent(document.getElementById("snippet").value) +
    "&tags=" + encodeURIComponent(document.getElementById("tags").value) +
    "&status_bookmark=" + encodeURIComponent(document.getElementById("status_bookmark").value) +
    "&comment=" + encodeURIComponent(document.getElementById("comment").value) +
    "&status_comment=" + encodeURIComponent(document.getElementById("status_comment").value);

以及您要添加的其他值：

var i, lng = document.getElementById('addbookmark').length;
// If the length property is undefined, then there is only one checkbox.
if (typeof lng === "undefined") {
    params += "&topic-link-item-1=" + encodeURIComponent(document.getElementById("topic-link-item-1").value);
    params += "&topic-link-comment-box-1=" + encodeURIComponent(document.getElementById("topic-link-comment-box-1").value);
}
else {
    for (i = 0; i < lng; i++) {
        params += "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i).value);
        params += "&topic-link-comment-box-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-comment-box-" + i).value);
    }
}

注意方法：

params += "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i).value);

相当于：

params = params + "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i).value);

和你最初做的不一样：

params + "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i).value);

您只是连接 2 个值，而从未将结果分配回 params 变量。

【讨论】：

嗨达林，正如我所说，第一系列参数正在工作。这只是第二个系列不是。
不，它们正在工作，因为用户没有在这些文本框中输入危险字符。只要他输入例如& 或= 登录其中一个文本框，一切都会中断。这就是您需要使用encodeURIComponent 函数的原因。就第二个问题而言，您应该将结果分配回params 变量，如我的回答所示。您应该使用params = params + ... 而不是简单的params + ...。这就是您的代码不起作用的原因。
我已做出更改以反映您的建议。
不，你建议的添加破坏了一切。此外，它们不是必需的，因为我在应用程序本身中执行表单验证。即使删除了 encodeURIComponent()，它也不起作用。

【解决方案2】：

我很确定 Javascript 不允许以你正在做的方式追加文本。

应该是

参数 = 参数 +

【讨论】：

我已做出更改以反映您的建议。