javascript - 停止提交表单中的输入字段

Question

我正在编写一些javascript（一个greasemonkey/userscript），它将一些输入字段插入到网站上的表单中。

问题是，我不希望这些输入字段以任何方式影响表单，我不希望在提交表单时提交它们，我只希望我的 javascript 能够访问它们的值。

有什么方法可以在表单中间添加一些输入字段，而在提交表单时不提交它们？

显然，理想的情况是输入字段不在表单元素中，但我希望结果页面的布局让我插入的输入字段出现在原始表单的元素之间。

Answer 1

您可以插入没有“名称”属性的输入字段：

<input type="text" id="in-between" />

或者您可以在提交表单后简单地删除它们（在 中jQuery）：

$("form").submit(function() {
   $(this).children('#in-between').remove();
});

Answer 2

最简单的做法是插入带有disabled属性的元素。

<input type="hidden" name="not_gonna_submit" disabled="disabled" value="invisible" />

这样，您仍然可以将它们作为表单的子级访问。

禁用字段的缺点是用户根本无法与它们交互 - 因此，如果您有一个disabled文本字段，则用户无法选择文本。如果您有一个disabled复选框，则用户无法更改其状态。

您还可以编写一些 javascript 来触发表单提交以删除您不想提交的字段。

Answer 3

简单尝试从输入元素中删除名称属性。
所以它必须看起来像

<input type="checkbox" checked="" id="class_box_2" value="2">

Answer 4

我只是想添加一个附加选项：在您的输入中添加表单标签并指定您页面上不存在的表单的名称：

<input form="fakeForm" type="text" readonly value="random value" />

Answer 5

您可以编写一个事件处理程序，从您不希望包含在表单提交中的所有输入字段中onsubmit删除该属性。name

这是一个未经测试的快速示例：

var noSubmitElements = [ 'someFormElementID1', 'someFormElementID2' ]; //...
function submitForm() {
    for( var i = 0, j = noSubmitElements.length; i < j; i++ ) {
        document.getElementById(noSubmitElements[i]).removeAttribute('name');
    }
}
form.onsubmit = submitForm;

Answer 6

以上所有答案都已经说明了关于（不）命名表单控件或在实际提交表单之前以编程方式删除它们的所有内容。

虽然，在我的研究中，我发现了另一个我在这篇文章中没有提到的解决方案：
如果你封装了你想要不被处理/不发送的表单控件，在另一个没有属性<form>的标签中，也没有（显然没有提交类型控件像按钮或提交嵌套在其中的输入），然后提交父表单将不包括那些封装的表单控件。methodpath

<form method="POST" path="/path">
  <input type="text" name="sent" value="..." />
  <form>
    <input type="text" name="notSent" value="..." />
  </form>
  <input type="submit" name="submit" value="Submit" />
</form>

[name="notSent"] 控制值不会被处理也不会发送到服务器 POST 端点，但来自 [name="sent"] 的控制值会。

这个解决方案可能是轶事，但我仍然把它留给后代......

Answer 7

我知道这篇文章很古老，但我还是会回复。我发现的最简单/最好的方法就是简单地将名称设置为空白。

把这个放在你提交之前：

document.getElementById("TheInputsIdHere").name = "";

总而言之，您的提交功能可能如下所示：

document.getElementById("TheInputsIdHere").name = "";
document.getElementById("TheFormsIdHere").submit();

这仍然会提交包含所有其他字段的表单，但不会提交没有名称的表单。

Answer 8

在输入中添加disabled="disabled"，当你想使用 .removeAttr('disabled') 提交它时，jquery 删除属性 disabled

HTML：

<input type="hidden" name="test" value="test" disabled='disabled'/>

jQuery：

$("input[name='test']").removeAttr('disabled');

Answer 9

通过 onSubmit() 在函数中处理表单的提交并执行以下操作以删除表单元素：使用getElementById()DOM，然后使用[object].parentNode.removeChild([object])

假设您的相关字段有一个 id 属性“my_removable_field”代码：

var remEl = document.getElementById("my_removable_field");
if ( remEl.parentNode && remEl.parentNode.removeChild ) {
remEl.parentNode.removeChild(remEl);
}

这将为您提供您正在寻找的东西。

Answer 10

您甚至首先需要它们作为输入元素吗？您可以使用 Javascript 动态创建 div 或段落或列表项或任何包含您想要呈现的信息的内容。

但是，如果交互元素很重要，并且将这些元素放在<form>块之外很麻烦，那么在提交页面时应该可以从表单中删除这些元素。

Answer 11

$('#serialize').click(function () {
  $('#out').text(
    $('form').serialize()
  );
});

$('#exclude').change(function () {
  if ($(this).is(':checked')) {
    $('[name=age]').attr('form', 'fake-form-id');
  } else {
    $('[name=age]').removeAttr('form');    
  }
  
  $('#serialize').click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/">
  <input type="text" value="John" name="name">
  <input type="number" value="100" name="age">
</form>

<input type="button" value="serialize" id="serialize">
<label for="exclude">  
  <input type="checkbox" value="exclude age" id="exclude">
  exlude age
</label>

<pre id="out"></pre>

Answer 12

您需要在表单中添加 onsubmit：

<form action="YOUR_URL" method="post" accept-charset="utf-8" onsubmit="return validateRegisterForm();">

脚本将是这样的：

        function validateRegisterForm(){
        if(SOMETHING IS WRONG)
        { 
            alert("validation failed");
            event.preventDefault();
            return false;

        }else{
            alert("validations passed");
            return true;
        }
    }

这对我每次都有效:)