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

113

我正在编写一些javascript（lubricmonkey /用户脚本），它将一些输入字段插入网站上的表单中。

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

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

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

— 橡子
source

2

如果他们提交了怎么办？您可以选择要使用服务器端语言处理的字段。

— Sarfraz 2010年

6

我不认为提交表单时会显示未命名的表单元素-如果您可以编写JS通过ID引用它们，则可以将其名称保留为空，从而有效地阻止了它们的提交。

— gddc 2010年

2

将名称属性字段留空

— deostroll 2010年

@萨法兹·艾哈迈德（Sarfraz Ahmed）：我正在编写一个candymonkey脚本，所以我无法控制该网站。

— 橡子

11

根据w3：被包含在表单的提交中。字段（表单元素）必须在form元素内定义，并且必须具有name属性。没有名称或不包含在表单中的元素不会提交给服务器。

— 肯纳贝克

158

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

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

或者，您也可以在提交表单后直接删除它们jQuery：

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

— 加尔
source

7

省略名称会阻止其提交吗？酷，我不知道。这对所有浏览器都有效吗？它是标准的一部分，还是实现的怪癖？

— BlairHippo 2010年

2

@Acorn我不太确定，但是值得一读。本质上，如果省略“名称”属性值，则无法通过任何方法访问该值...因此，可能是该值只是被浏览器丢弃了。如果对您来说安全至关重要，请使用jquery / javascript选项（请注意，在轻松禁用javascript时将提交字段-因此请勿依赖于您的任何安全性机制）。

— 加尔2010年

17

我测试了使用chrome，firefox，safari删除name属性，似乎表单字段正使用一个空字符串作为名称提交到服务器。我使用WebScarab检查了发布数据，发现正在发送数据。现在，我想我将不得不禁用这些字段以防止它们被提交。

— kldavis4'8

1

@ kldavis4-条带（stripe.js）和Braintree（braintree.js）似乎都[链接] braintreepayments.com/docs/python/guide/getting_paid 使用“ 省去名称”属性概念来阻止数据访问服务器从而减少了对“ PCI”合规性的需求……如果您说正在发送“数据”，它们是否出错？

— 拉胡尔·迪格

4

输入标签没有名称，表单数据仍会传输吗？

— 凯文·惠勒

57

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

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

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

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

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

— 约恩
source

我的想法是使我插入的字段可用，以便用户可以更改复选框等，然后将其提交给我的JavaScript。

— 橡子

3

如果仅禁用onsubmit字段或基于选中的复选框，则Disabled仍然可以工作。这样，您不仅可以丢弃该name属性，而且还可以保留该属性，以备以后使用。

— JMTyler 2013年

当您必须使用AJAX提交表单并且不想从表单中删除输入或删除其name属性时，这非常有用。

— Nolonar 2014年

15

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

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

— 莱莎·皮皮耶夫（Lesha Pipiev）
source

这应该是答案:)）

— MáximaAlekz

1

这适用于复选框。但是请注意，与单选按钮一起使用时，这会中断对其他单选按钮的自动取消选择。

— anre

10

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

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

— Farvgnugn
source

1

尽管这可能有效（未经测试），除非您在fakeForm其他地方实际定义（无需提交），否则将导致HTML无效。

— Brian H.

1

如果您不想添加javascript，则需要在表单内通过用户交互进行输入。从我的角度来看，这是迄今为止最简单的解决方案。

— yannisalexiou

1

注意：此解决方案不适用于IE。检查这里

— 哈维

@Harvey Yikes！感谢您的单挑！

— Joshua Pinter

9

您可以为其编写事件处理程序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;

— 雅各布·雷金
source

2

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

将其放在您提交之前：

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

总而言之，您的Submit函数可能如下所示：

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

这仍然会提交表单以及您所有其他字段，但是不会提交没有名称的表单。

— 将
source

简单明了。我喜欢！

— pbarney

2

在输入中添加disabled =“ disabled”，而当您要使用.removeAttr（'disabled'）提交时，jQuery会删除禁用的属性

HTML：

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

jQuery的：

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

— 皮卡皮卡
source

2

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

尽管在我的研究中，我发现了本文中未提及的另一种解决方案：
如果封装表单控件，而您想不对其进行处理/不发送，则将其封装在另一个<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”]中的值将被处理。

这个解决方案可能很有趣，但我仍然留给后代...

— 德尔夫什克里姆
source

有趣的观察，但是您是否在各种浏览器中进行了测试？我想知道这是出于设计，规范还是仅仅是浏览器行为的怪癖。随着浏览器的变化，它将成为未来的可靠方法吗？

— scipilot

1

通过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);
}

这将为您提供所需的确切信息。

— 环形承载
source

0

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

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

— 布莱尔·河马
source

是的，我确实需要将它们作为输入元素，因为我正在尝试获取用户输入。

— 橡子

0

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

展开摘要

— 丹尼斯·卢亚诺诺夫（Denis Lukyanov）
source

不幸的是，form属性在IE / Edge中不起作用。caniuse.com/#search=form%20attribute

— 乔治·黑利亚尔

0

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

每次都对我有用:)

— Vasilakakis Anastasios
source