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

我正在编写一些 javascript (一个 greasemonkey/userscript) ,它将在网站的表单中插入一些输入字段。

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

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

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

141257 次浏览

最简单的事情是插入带有 disabled属性的元素。

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

这样,您仍然可以作为窗体的子级访问它们。

禁用字段的缺点是用户根本无法与它们交互——所以如果您有一个 disabled文本字段,用户就无法选择文本。如果有一个 disabled复选框,则用户不能更改其状态。

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

您可以插入没有“ name”属性的输入字段:

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

或者你也可以在提交表单后删除它们(在 jQuery中) :

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

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

假设所讨论的字段具有 id 属性“ my _ remove _ field” 密码:

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

这会让你得到你想要的。

首先,您是否需要将它们作为输入元素?您可以使用 Javascript 动态创建 div、段落或列表项,或者包含您想要显示的信息的任何内容。

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

您可以为 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;

我知道这个帖子很老了,但我还是会回复的。我找到的最简单/最好的方法就是简单地将名称设置为空白。

在递交申请前,请注意以下事项:

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

总的来说,提交函数可能是这样的:

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

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

简单地尝试从 input 元素中删除 姓名属性。
所以必须看起来

<input type="checkbox" checked="" id="class_box_2" value="2">
$('#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>

你需要在你的表格上添加一项:

<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;
}
}

这对我每次都管用:)

在输入中添加 伤残 = “伤残”,并在 jquery 中移除当您希望使用. RemoveAttr (‘ disable’)提交时禁用的属性

HTML:

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

Jquery:

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

我只是想添加一个额外的选项: 在输入中添加表单标记并指定页面上不存在的表单的名称:

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

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

不过,在我的研究中,我发现了另外一个我在这篇文章中没有提到的解决方案:
如果你封装了表单控件,你想要未处理/未发送,在另一个 <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>

[ name = “ notSent”]控件值不会被处理,也不会发送到服务器 POST 端点,但是[ name = “ sent”]中的控件值会被处理。

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

包装不希望与 <fieldset disabled>一起提交的输入

<form action="/">
<fieldset disabled>
<input type="text" value="John" name="name">
<input type="number" value="100" name="age">
</fieldset>
</form>