Javascript 停止提交表单中的输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3008035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop an input field in a form from being submitted
提问by Acorn
I'm writing some javascript (a greasemonkey/userscript) that will insert some input fields into a form on a website.
我正在编写一些 javascript（agreasemonkey/userscript），它将在网站上的表单中插入一些输入字段。
The thing is, I don't want those input fields to affect the form in any way, I don't want them to be submitted when the form is submitted, I only want my javascript to have access to their values.
问题是，我不希望这些输入字段以任何方式影响表单，我不希望在提交表单时提交它们，我只希望我的 javascript 能够访问它们的值。
Is there some way I could add some input fields into the middle of a form and not have them submitted when the form is submitted?
有什么方法可以在表单中间添加一些输入字段，而不是在提交表单时提交它们？
Obviously the ideal thing would be for the input fields to not be in the form element, but I want the layout of my resulting page to have my inserted input fields appear between elements of the original form.
显然，理想的情况是输入字段不在表单元素中，但我希望结果页面的布局让我插入的输入字段出现在原始表单的元素之间。
回答by Gal
You could insert input fields without "name" attribute:
您可以插入没有“名称”属性的输入字段：
<input type="text" id="in-between" />
Or you could simply remove them once the form is submitted (in jQuery):
或者您可以在提交表单后简单地删除它们（在 中jQuery）：
$("form").submit(function() {
$(this).children('#in-between').remove();
});
回答by Johrn
The easiest thing to do would be to insert the elements with the disabledattribute.
最简单的方法是插入具有disabled属性的元素。
<input type="hidden" name="not_gonna_submit" disabled="disabled" value="invisible" />
This way you can still access them as children of the form.
这样，您仍然可以将它们作为表单的子项访问。
Disabled fields have the downside that the user can't interact with them at all- so if you have a disabledtext field, the user can't select the text. If you have a disabledcheckbox, the user can't change its state.
禁用字段的缺点是用户根本无法与它们交互 - 因此，如果您有disabled文本字段，用户将无法选择文本。如果您有disabled复选框，则用户无法更改其状态。
You could also write some javascript to fire on form submission to remove the fields you don't want to submit.
您还可以编写一些 javascript 来触发表单提交以删除您不想提交的字段。
回答by Lesha Pipiev
Simple try to remove nameattribute from input element.
So it has to look like
简单的尝试从 input 元素中删除name属性。
所以它必须看起来像
<input type="checkbox" checked="" id="class_box_2" value="2">
回答by farvgnugn
I just wanted to add an additional option: In your input add the form tag and specify the name of a form that doesn't exist on your page:
我只想添加一个附加选项：在您的输入中添加表单标签并指定页面上不存在的表单的名称：
<input form="fakeForm" type="text" readonly value="random value" />
回答by Jacob Relkin
You can write an event handler for onsubmitthat removes the nameattribute from all of the input fields that you want not to be included in the form submission.
您可以编写一个事件处理程序，用于从您不希望包含在表单提交中的所有输入字段onsubmit中删除该name属性。
Here's a quick untested example:
这是一个未经测试的快速示例：
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;
回答by Will
I know this post is ancient, but I'll reply anyway. The easiest/best way I have found is just to simply set the name to blank.
我知道这个帖子很古老，但我还是会回复。我发现的最简单/最好的方法就是简单地将名称设置为空白。
Put this before your submit:
把这个放在你提交之前：
document.getElementById("TheInputsIdHere").name = "";
All in all your submit function might look like this:
总而言之，您的提交功能可能如下所示：
document.getElementById("TheInputsIdHere").name = "";
document.getElementById("TheFormsIdHere").submit();
This will still submit the form with all of your other fields, but will not submit the one without a name.
这仍将提交包含所有其他字段的表单，但不会提交没有名称的表单。
回答by Pikka pikka
Add disabled="disabled"in input and while jquery remove the attribute disabled when you want to submit it using .removeAttr('disabled')
在输入中添加disabled="disabled"并且当你想使用 .removeAttr('disabled') 提交它时，jquery 删除禁用的属性
HTML:
HTML：
<input type="hidden" name="test" value="test" disabled='disabled'/>
<input type="hidden" name="test" value="test" disabled='disabled'/>
jquery:
查询：
$("input[name='test']").removeAttr('disabled');
$("input[name='test']").removeAttr('disabled');
回答by Delfshkrimm
All of the above answers already said everything about (not) naming the form controls or programmatically removing them before actually submitting your form.
以上所有答案都已经说明了（不）在实际提交表单之前命名表单控件或以编程方式删除它们的所有内容。
Although, across my research I found one other solution that I haven't seen mentioned in this post:
If you encapsulate the form controls you want to be unprocessed/not sent, inside another <form>tag with no methodattribute nor path(and obviously no submit type control like a button or submit input nested in it), then submitting the parent form won't include those encapsulated form controls.
虽然，在我的研究中，我发现了另一个我在这篇文章中没有提到的解决方案：
如果你封装了你想要未处理/不发送的表单控件，在另一个<form>没有method属性的标签中path（显然没有提交类型控制像按钮或提交嵌套在其中的输入），那么提交父表单将不包括那些封装的表单控件。
<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>
The [name="notSent"] control value won't be processed nor sent to the server POST endpoint, but the one from [name="sent"] will.
[name="notSent"] 控制值不会被处理，也不会发送到服务器 POST 端点，但来自 [name="sent"] 的值会。
This solution might be anecdotic but I'm still leaving it for posterity...
这个解决方案可能是轶事，但我仍然把它留给后代......
回答by ring bearer
Handle the form's submit in a function via onSubmit() and perform something like below to remove the form element:
Use getElementById()of the DOM, then using [object].parentNode.removeChild([object])
通过 onSubmit() 在函数中处理表单的提交并执行如下操作以删除表单元素：使用getElementById()DOM，然后使用[object].parentNode.removeChild([object])
suppose your field in question has an id attribute "my_removable_field" code:
假设您的字段有一个 id 属性“my_removable_field”代码：
var remEl = document.getElementById("my_removable_field");
if ( remEl.parentNode && remEl.parentNode.removeChild ) {
remEl.parentNode.removeChild(remEl);
}
This will get you exactly what you are looking for.
这将为您提供您正在寻找的内容。
回答by BlairHippo
Do you even need them to be input elements in the first place? You can use Javascript to dynamically create divs or paragraphs or list items or whatever that contain the information you want to present.
您甚至首先需要它们作为输入元素吗？您可以使用 Javascript 动态创建 div 或段落或列表项或任何包含您要呈现的信息的内容。
But if the interactive element is important and it's a pain in the butt to place those elements outside the <form>block, it ought to be possible to remove those elements from the form when the page gets submitted.
但是，如果交互元素很重要并且将这些元素放在<form>块之外是一件很痛苦的事情，那么在提交页面时应该可以从表单中删除这些元素。
