在HTML中如何防止按钮提交表单

在下一页中，使用 Firefox 时，删除按钮会提交表单，但添加按钮不会。

如何防止按钮提交表单？remove

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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<html>
<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>

分割线

网友回答：

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

因此，您需要明确指定其类型：

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

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

分割线

网友回答：

设置按钮上的类型：

<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（）方法来预先取消默认行为：

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

此技术将所有逻辑保存在一个位置，使其更容易调试…它还允许您通过将按钮上更改回并处理事件服务器端来实现回退 – 这称为不显眼的JavaScript。typesubmit

分割线

网友回答：

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

所以我在这里放的是我如何做一些技巧，让一个表单能够在没有任何验证的情况下由 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="..."

问题是表单始终被提交，无论是返回还是.onclicktruefalse

如果我更改为，它似乎有效但不起作用。它从不发送表单，但这可以很容易地完成。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>

在，where is 上，我还添加了一个 JavaScript 提交句子，类似于这样：function Validatorreturn True;

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

它只是为了JavaScript，只是为了它出现在POST数据上。id=""getElementByIdname=""

在这样的方式上，它可以根据需要工作。

我只是为不需要表单功能的人提供这个，但是当用户按下按钮时进行一些验证。onsubmit

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

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

这听起来可能很奇怪，但在例如思考时并非如此：在登录时……有一些限制…就像不允许使用PHP会话一样，也不允许使用cookie！

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

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

如果我在表单标签上做工作，我需要知道它是用户还是其他 JavaScript。由于无法传递任何参数，因此无法直接传递，因此有些人添加一个变量来判断是否必须进行验证。验证函数的第一件事是检查变量值等…太复杂了，代码没有说出真正想要什么。onsubmit

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

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

不仅代码更清晰，而且是它必须在哪里。只要记住这一点：
– 我不希望 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"

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

模板简介：该模板名称为【在HTML中如何防止按钮提交表单】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。