被提交停止在一个形式的输入字段

StackOverflow https://stackoverflow.com/questions/3008035

题

我正在写一些javascript（Greasemonkey的/ userscript），将插入一些输入字段到网站上的形式。

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

有没有一些方法，我可以添加一些输入字段到表单的中间，没有提交表单时他们提交？

显然，理想的事情将是输入字段不能在表单元素，但我想我的结果页上有我的插入输入字段的原始形式的元素之间出现的布局。

有帮助吗？

解决方案

您可以插入输入字段，而 “name” 属性：

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

或者一旦提交表单（以jQuery），你可以简单地将其删除：

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

其他提示

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

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

这样，您仍然可以访问它们作为形式的孩子。

残疾人领域都有缺点是，用户可以在清一色所以他们没有互动，如果你有一个disabled文本字段，用户不能选择文本。如果你有一个disabled框，用户不能改变其状态。

您也可以写表单提交一些JavaScript火灾删除您不想提交领域。

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

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

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

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

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

添加的禁用=“禁用” 在输入和同时的jquery删除属性禁用时要使用.removeAttr提交它（“禁用”）

<强> HTML：

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

<强> jquery的：

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

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

您提交之前将这个：

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

所有的一切你提交功能，可能是这样的：

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

这仍然会提交表单与所有其他领域，但不会提交一个没有名字。

处理在通过的onSubmit（函数提交表格），并执行类似下面以除去表单元素： DOM的使用getElementById()，然后使用[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);
}

这将让你你在寻找什么。

你甚至需要他们在第一时间输入元素？您可以使用JavaScript动态产生任何包含对本你想要的信息的div或段落或列表项或

但是，如果交互元件是很重要的，它是在一个痛苦的对接放置<form>块之外的那些元件，它应该是可能的，当页面被提交以从表单中删除那些元素。 

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

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

这个作品为我每次：）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top