如何防止按钮提交表单

JavaScript HTML

阿飞古一A

2020-03-16

在下一页中,使用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>

第1831篇《如何防止按钮提交表单》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

13个回答
Pro小哥GO 2020.03.16

函数removeItem实际上包含一个错误,该错误使表单按钮执行其默认行为(提交表单)。在这种情况下,javascript错误控制台通常会提供一个指针。

在javascript部分中查看功能removeItem:

该行:

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

不起作用。尝试以下方法:

rows.eq(rows.length-1).html('');
十三Stafan 2020.03.16

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

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

 <form autocomplete="off" method="post" action="">
   <p>Title:
     <input type="text" />
   </p>
   <input type="button" onclick="addItem()" value="Add Item">
   <input type="button" onclick="removeItem()" value="Remove Last Item">
   <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>
<script language="javascript">
function addItem() {
return false;
}

function removeItem() {
return false;
}
</script>
乐LEY 2020.03.16

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

米亚宝儿 2020.03.16
return false;

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

只要这是最后一件事情,表单就不会提交。

GOMandy 2020.03.16

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

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

根据MDN网络文档

Event接口的preventDefault()方法告诉用户代理,如果未显式处理事件,则不应像通常那样考虑其默认操作。该事件将继续照常传播,除非其侦听器之一调用stopPropagation ()stopImmediatePropagation (),其中一个终止传播。

猿GO 2020.03.16

正常设置按钮,并使用event.preventDefault之类的。

   <button onclick="myFunc(e)"> Remove </button>  
   ...
   ...

   In function...

   function myFunc(e){
       e.preventDefault();
   }
神奇伽罗Itachi 2020.03.16

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

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

或者简单地你可以这样

 <button type="submit" onclick="return false"> PostData</button>
Gil十三 2020.03.16

我确定在FF

removeItem 

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

当出现JavaScript错误时,“ return false”代码将不会运行,从而使页面回发

A小胖 2020.03.16

就像已经说过的,这是一个html5错误,您仍然可以使用以下按钮作为提交按钮(如果您想同时覆盖JavaScript和非JavaScript用户):

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

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

NearHarrySam 2020.03.16

$("form").submit(function () { return false; }); 这将阻止按钮提交,或者您可以将按钮类型更改为“按钮”,<input type="button"/>而不是<input type="submit"/> 仅当此按钮不是此表单中的唯一按钮时才起作用。

A小宇宙 2020.03.16

我同意Shog9,尽管我可以改用:

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

根据w3schools,该<button>标记在不同的浏览器上具有不同的行为。

TonyEva 2020.03.16

假设您的HTML表单具有 id="form_id"

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

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

$("#form_id").submit(function(){
  return false;
});
StafanPro 2020.03.16

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

因此,您需要明确指定其类型:

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

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

=)

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android