Question

在下一页中，使用Firefox，“删除”按钮会提交表单，但“添加”按钮不会。如何阻止删除按钮提交表单？

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function addItem() {
  var v = $('form :hidden:last').attr('name');
  var n = /(.*)input/.exec(v);
  var newPrefix;
  if ( n[1].length == 0 ) {
    newPrefix = '1';
  } else {
    newPrefix = parseInt(n[1])+1;
  }
  var oldElem = $('form tr:last');
  var newElem = oldElem.clone(true);
  var lastHidden = $('form :hidden:last');
  lastHidden.val(newPrefix);
  var pat = '=\"'+n[1]+'input';
  newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"'+newPrefix+'input'));
  newElem.appendTo('table');
  $('form :hidden:last').val('');
}
function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    rows[rows.length-1].html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}
</script>
</head>
<body>
<form autocomplete="off" method="post" action="">
<p>Title:<input type="text" /></p>
<button onclick="addItem(); return false;">Add Item</button>
<button onclick="removeItem(); return false;">Remove Last Item</button>
<table>
<th>Name</th>

<tr>
  <td><input type="text" id="input1" name="input1" /></td>
  <td><input type="hidden" id="input2" name="input2" /></td>
</tr>
</table>
<input id="submit" type="submit" name="submit" value="Submit">
</form>
</body>
</html>

Answer 1

您正在使用HTML5按钮元素。请记住，原因是此按钮具有提交的默认行为，如W3规范中所述，如下所示： W3C HTML5 Button

所以你需要明确指定它的类型：

<button type="button">Button</button>

以覆盖默认提交类型。我只想指出发生这种情况的原因=）

=）

Answer 2

在按钮上设置类型：

<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>

...当事件处理程序发生异常时，它们将阻止它们触发提交操作。然后，修复您的removeItem()函数，使其不会触发异常：

function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    // change: work on filtered jQuery object
    rows.filter(":last").html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}

请注意更改：您的原始代码从jQuery集中提取了一个HTML元素，然后尝试在其上调用jQuery方法 - 这引发了异常，从而导致该按钮的默认行为。

FWIW，你可以采用另一种方式...使用jQuery连接你的事件处理程序，并使用jQuery的preventDefault()对象上的event方法预先取消默认行为：

$(function() // execute once the DOM has loaded
{

  // wire up Add Item button click event
  $("#AddItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of add logic
  });

  // wire up Remove Last Item button click event
  $("RemoveLastItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of remove last logic
  });

});

...

<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>

此技术可将您的所有逻辑保存在一个位置，从而使调试更容易......它还允许您通过将按钮上的type更改回submit来实现后备并处理事件服务器端 - 这称为unobtrusive JavaScript。

Answer 3

前段时间我需要一些非常相似的东西......我明白了。

所以我在这里提出的是如何让一个表单能够通过JavaScript提交，而无需任何验证和执行验证，只有当用户按下按钮（通常是发送按钮）时。

对于示例，我将使用最小形式，仅使用两个字段和一个提交按钮。

记住想要的东西：从JavaScript开始，它必须能够在没有任何检查的情况下提交。但是，如果用户按下这样的按钮，则必须完成验证并仅在通过验证时发送表单。

通常所有人都会从这附近的东西开始（我删除了所有额外的东西并不重要）：

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

查看表单标记如何没有onsubmit="..."（请记住这是一个没有它的条件）。

问题是，无论onclick是否返回true或false，表单始终都会提交。

如果我为type="submit"更改了type="button"，它似乎可以正常工作，但却没有。它从不发送表单，但可以轻松完成。

所以最后我用了这个：

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

在function Validator上return True;，我还添加了一个JavaScript提交句子，类似于：

function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }
}

id=""仅适用于JavaScript getElementById，name=""仅适用于POST数据。

这样就可以按照我的需要工作。

我只是为表单上不需要onsubmit功能的人设置此功能，但在用户按下按钮时进行一些验证。

为什么我不需要在表单标签上提交onsubmit？很容易，在其他JavaScript部分我需要执行提交但我不希望有任何验证。

原因：如果用户是执行我想要的提交的用户并且需要进行验证，但如果是JavaScript，有时我需要执行提交，而这样的验证会避免它。

这可能听起来很奇怪，但不是在考虑例如：登录...有一些限制......比如不允许使用PHP会话而且不允许使用cookie！

因此，任何链接都必须转换为此类表单提交，因此登录数据不会丢失。如果还没有登录，它也必须工作。因此，不必对链接执行验证。但是如果用户没有输入字段，用户和传递，我想向用户显示一条消息。因此，如果缺少一个，则不得发送表格！有问题。

查看问题：只有当用户按下按钮时，一个字段为空时才能发送表单，如果是必须能够发送的JavaScript代码，则不能发送。

如果我在表单标记上对onsubmit进行处理，我需要知道它是用户还是其他JavaScript。由于没有参数可以传递，因此无法直接传递，因此有些人会添加一个变量来判断是否必须进行验证。验证函数的第一件事是检查变量值等...太复杂了，代码没有说出真正想要的东西。

所以解决方案是不要在表单标签上提交onsubmit。 Insead把它放在真正需要的地方，按钮上。

另一方面，为什么要提交代码，因为从概念上讲我不想提交onsubmit验证。我真的想要按钮验证。

不仅代码更清晰，它必须在哪里。记住这个： - 我不希望JavaScript验证表单（必须始终由服务器端的PHP完成） - 我想向用户显示一条消息，告诉所有字段不能为空，需要JavaScript（客户端）

那么为什么有些人（想想或告诉我）必须在onsumbit验证上完成？不，从概念上讲，我没有在客户端进行onsumbit验证。我只是在按下按钮时做了什么，所以为什么不让它实现呢？

嗯，代码和风格完美无缺。在我需要发送表单的任何JavaScript上，我只是说：

document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there

当我不需要时，它会跳过验证。它只是发送表单并加载不同的页面等。

但是，如果用户点击提交按钮（又名type="button"而不是type="submit"），则会在提交表单之前完成验证，如果无效则不会发送。

希望这有助于其他人不要尝试冗长而复杂的代码。如果不需要，请不要使用onsubmit，并使用onclick。但请记住将type="submit"更改为type="button"，请不要忘记通过JavaScript执行submit()。

Answer 4

我同意Shog9，但我可能会改用：

<input type = "button" onClick="addItem(); return false;" value="Add Item" />

According to w3schools，<button>标记在不同的浏览器上有不同的行为。

Answer 5

假设您的HTML表单包含eval

id="form_id"

将此jQuery代码段添加到您的代码中以查看结果

<form id="form_id">
<!--your HTML code-->
</form>

Answer 6

$("form").submit(function () { return false; }); 这将阻止按钮提交，或者您只需将按钮类型更改为“按钮”<input type="button"/>而不是<input type="submit"/> 只有在此按钮不是此表单中的唯一按钮时才能使用。

Answer 7

您可以使用jQuery简单地获取按钮的引用，并阻止其传播，如下所示：

 $(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            return false;
    });});

Answer 8

这是一个html5错误，就像已经说过的那样，你仍然可以将按钮作为提交（如果你想覆盖javascript和非javascript用户）使用它，如：

     <button type="submit" onclick="return false"> Register </button>

通过这种方式，您将取消提交，但仍然可以在jquery或javascript函数中执行任何操作，并为没有javascript的用户执行提交。

Answer 9

像 <button>Click to do something</button> 这样的按钮是提交按钮。

您必须添加 type

Answer 10

我确信在FF上

removeItem

函数遇到JavaScript错误，这不会发生在IE上

当出现javascript错误时，“return false”代码将无法运行，使页面回发

Answer 11

return false;

您可以在函数末尾或函数调用后返回false。

只要这是最后发生的事情，表单就不会提交。

Answer 12

以正常方式设置按钮并使用event.preventDefault，如..

private static String determineTermuxArchName() {
    // Note that we cannot use System.getProperty("os.arch") since that may give e.g. "aarch64"
    // while a 64-bit runtime may not be installed (like on the Samsung Galaxy S5 Neo).
    // Instead we search through the supported abi:s on the device, see:
    // http://developer.android.com/ndk/guides/abis.html
    // Note that we search for abi:s in preferred order (the ordering of the
    // Build.SUPPORTED_ABIS list) to avoid e.g. installing arm on an x86 system where arm
    // emulation is available.
    for (String androidArch : Build.SUPPORTED_ABIS) {
        switch (androidArch) {
            case "arm64-v8a": return "aarch64";
            case "armeabi-v7a": return "arm";
            case "x86_64": return "x86_64";
            case "x86": return "i686";
        }
    }
    throw new RuntimeException("Unable to determine arch from Build.SUPPORTED_ABIS =  " +
        Arrays.toString(Build.SUPPORTED_ABIS));
}

Answer 13

这是一个简单的方法：

$('.mybutton').click(function(){

    /* Perform some button action ... */
    alert("I don't like it when you press my button!");

    /* Then, the most important part ... */
    return false;

});

Answer 14

返回false将阻止默认行为。但是return false打破了额外点击事件的冒泡。这意味着在调用此函数后，如果还有任何其他单击绑定，则不会考虑其他绑定。

let heightConstraint = NSLayoutConstraint(item: topBars[0], attribute: 
NSLayoutConstraint.Attribute.height, relatedBy: 
NSLayoutConstraint.Relation.equal, toItem: bottomBars[0], attribute: NSLayoutConstraint.Attribute.height, multiplier: 2, constant: 0)
view.addConstraints([heightConstraint])

或者简单地说，您可以这样放置

 <button id="btnSubmit" type="button">PostData</button>
 <Script> $("#btnSubmit").click(function(){
   // do stuff
   return false;
}); </Script>

Answer 15

只需在您的方法中添加e.preventDefault();，即可阻止您的页面提交表单。

function myFunc(e){
       e.preventDefault();
}

根据MDN Web Docs

Event接口的preventDefault（）方法告诉用户代理，如果未显式处理事件，则其默认值不应该像往常那样考虑行动。的事件继续照常传播，除非其侦听器之一呼叫stopPropagation ()或stopImmediatePropagation ()，终止传播。

Answer 16

以下示例代码向您展示如何防止按钮单击提交表单。

您可以尝试我的示例代码：

<h3>{{title}}</h3>

Answer 17

我现在无法测试，但我认为你可以使用jQuery的preventDefault方法。

Answer 18

函数removeItem实际上包含一个错误，这使得表单按钮执行它的默认行为（提交表单）。在这种情况下，javascript错误控制台通常会给出一个指针。

查看javascript部分中的函数removeItem：

该行：

rows[rows.length-1].html('');

不起作用。试试这个：

rows.eq(rows.length-1).html('');

如何防止按钮提交表单

18 个答案: