如何防止表单元素发送一些我们不想要的字段？

IT技术 javascript jquery forms
2021-03-01 05:29:11

我有一个包含大约 5 个字段的表单元素，最终查询将通过处理这些字段的值来创建这些字段。所以我只想向服务器发送最终查询，而不是所有查询。如何从提交中排除这些字段（使用 jQuery）？

<form action="abc/def.aspx" method="get">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="text" name="field3" />
    <input type="text" name="field4" />
    <input type="text" name="field5" />
    <input type="hidden" name="final" />
    <input type="submit" value="Send" />
</form>

表单提交的输出如下所示：

abc/def.aspx?field1=val1&field2=val2&field3=val3&field4=val4&field5=val5&final=finalQuery
3个回答

删除您不想提交给服务器的字段上的 name 属性。

<form action="abc/def.aspx" method="get">
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="hidden" name="final" />
    <input type="submit" value="Send" />
</form>

这是实现您想要的最简单的方法，它适用于所有主要浏览器。

W3 规范讨论仅在存在名称时提交表单值：http : //www.w3.org/TR/html401/interact/forms.html#h-17.2

它工作正常;) !!! 一个没有任何 JS 代码的好的和直接的解决方案。应该是不错的答案
2021-04-29 05:29:11

在提交时删除元素。

在提交处理程序上： 

$(formElement).submit(function() {
    $(this.field1).remove(); //removing field 1 from query
    return true; //send
});

禁用表单元素也会阻止它被输入到查询中。（在 Chrome 上测试）

$(formElement).submit(function() {
    this.field1.disabled = true;
    return true; //send
});
或者，脚本可以仅禁用输入。我想如果它是一个普通的表单提交并不重要，但是如果它是一个 Ajax 表单提交，您可能希望这些字段之后仍然存在，并且将“禁用”设置为 false 比放置更容易一些输入返回。
2021-04-21 05:29:11
+1 - 对于完整版本，可以$(':text', this).remove();正常工作，也不需要退货。
2021-04-24 05:29:11
如果表单验证在一个函数中，让它返回一个布尔值并在执行 digitalFresh 解决方案之前要求它，为了更灵活的解决方案，也许你应该使用类似 jquery ajaxForm jquery.malsup.com/form它有验证/预提交方法的选项, 回调和各种有用的东西
2021-05-08 05:29:11
嗯...使用您的方法禁用表单字段，即使表单验证无效。我如何检查表单验证是否为真然后禁用字段？
2021-05-16 05:29:11

我认为最好的解决方案是处理提交，然后自己发送请求：

$(form).submit(function() {
    //do everything you need in here to get the final result
    var finalResult = alotoflogic();
    $.get("abc/def.aspx",final=finalResult, "callbackfunction", "responseType");
    return false;
});

这应该完全符合您的要求。编辑：正如亚历克斯指出的那样，此解决方案不会将您发送到该页面，如果您需要转到新页面，则只需获取结果即可：

$(form).submit(function() {
    //do everything you need in here to get the final result
    var finalResult = alotoflogic();
    window.location('abc/def.aspx?final='+finalResult);
    return false;
});

这样浏览器就会被重定向到那个页面，并且只发送最终结果。

好点亚历克斯，刚刚编辑添加非 ajax 解决方案;) ty
2021-04-29 05:29:11
正常的表单提交会将浏览器重定向到新位置。照原样，这不会那样做——它只会获取 GET 的结果，然后……谁知道呢，取决于回调函数。
2021-05-08 05:29:11
其它你可能感兴趣的问题
上一篇jQuery 插件 DataTables：如何突出显示当前搜索文本？ 下一篇单页应用程序和 CSRF 令牌