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

Question

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

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

有什么方法可以将一些输入字段添加到表单的中间，并且在表单提交时没有提交它们？

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

Answer 1

你可以插入输入字段没有“name”属性：

<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

处理表单提交在一个函数中通过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 4

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

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

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

我知道这个帖子是古老的，但无论如何，我会回答。我找到的最简单/最好的方法就是简单地将名称设置为空白。前

将这个您的提交：

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

所有在所有提交功能，可能是这样的：

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

这仍然将提交表单与所有其他领域，而将不要提交没有名字的人。

Answer 7

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

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

Answer 8

$('#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 9

您需要在您的表单中添加的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; 
     } 
    } 

这对我的作品每次:)

Answer 10

输入添加禁用=“禁用”和jQuery的同时去除

当你想使用.removeAttr提交它禁用（“禁用”）属性

HTML：

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

的jQuery：

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

Answer 11

我只是想增加一个额外的选项：在你输入添加表单标签，并指定不网页上的存在形式的名称：

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