阻止按钮提交表单 Javascript答案

【问题标题】：Keep button from submitting form Javascript阻止按钮提交表单 Javascript
【发布时间】：2022-03-05 17:44:03
【问题描述】：

我正在学习 JavaScript，但无法在不提交表单的表单内制作按钮。有一个类似的问题here，但指定type="button" 的最流行的答案在我的情况下不起作用，其他答案涉及jQuery，我现在想省略。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script type="text/javascript">
        function submit(){
                alert("Yo")
        }
</script>
</head>

<body>
<form name="myForm" onsubmit="submit()">
        <input type="button" value="Submit!" onClick="submit()" />
</form>
</body>
</html>

【问题讨论】：

由于您没有使用type="submit"，您的表单提交任何内容的唯一原因是您在单击按钮时确实调用了submit() 方法。（嗯，有点。它实际上是 form.submit()）。默认情况下，type="button" 的输入不会进行表单提交，除非您真的调用 form.submit()。
@Tibrogargan 这就是问题所在。一旦我更改了函数名称，它就可以完美运行！如果你把它作为一个答案，我可以接受。
这实际上是一个非常有趣的问题。由于函数的范围是在窗口级别，您可能希望您的 onClick="submit()" 使用 window.submit() 方法 - 但在创建输入标记时它解析为 form.submit()，因为上下文已更改为表单。我在任何地方都找不到该行为的记录 - 它实际上可能取决于浏览器（或者我只是不知道查看的正确位置）
@Tibrogargan 我在 Mozilla 和 Chrome 中都进行了测试，尽管我还没有在 IE 中尝试过。但是，如果您确实在任何地方找到了文档，请告诉我，我很乐意阅读！
原来这是设计使然。 Scope Changes During HTML Parsing

标签： javascript html forms

【解决方案1】：

由于您没有使用type="submit"，您的表单提交任何内容的唯一原因是您在单击按钮时实际上是在调用 submit() 方法。（嗯，有点。实际上是form.submit() - 你创建的方法是window.submit()）。

默认情况下，type="button" 的输入不会进行表单提交，除非你真的调用 form.submit()

【讨论】：

【解决方案2】：

将事件作为参数传递给您的 submit 函数，并防止其默认行为：

function submit(event) {
    event.preventDefault();
    alert('Yo');
}

onClick='submit(event)'

【讨论】：

【解决方案3】：

从 Netscape Corporation 引入 Javascript 开始，定义为 HTML 属性 值的表单元素事件处理程序提供了一个特殊的作用域链，该作用域链在搜索之前搜索单击元素和表单元素的属性全局对象。 [这对 web 程序员来说是一种便利，并且早于引入具有标准化访问和操作方法的文档对象模型。] 因此

<input type="button" value="Submit!" onClick="submit()" />

点击时执行从 HTML 属性字符串创建的匿名函数：

function( event) { submit()}

它在其作用域链中搜索submit 并找到它作为封闭form 对象的属性。可能的解决方案包括

明确指定要执行的函数的全局版本：
```
    onclick="window.submit()"
```
将全局函数命名为其他名称，例如“preSubmit”，这与表单对象的属性不冲突：
```
    onclick="preSubmit()"  
```
在创建按钮元素后，在 javascript 中将 click 事件处理程序添加到按钮（只有在 HTML 中指定的函数具有特殊的作用域链）。

第 19.1.6 节。 O'Reilly 的“Javascript the Definitive Guide”的chapter 19 中的“事件处理程序范围”是我能够找到的唯一讨论此问题的链接。

在@progysm 对另一个答案的评论后更新

HTML 提供的事件处理程序的范围链现在包含在 HTML5 标准中，在internal raw uncompiled handler 下，列表项 1.10，这表明处理程序的词法范围包括单击的元素、它所属的表单（如果有的话) 和文档对象。我会警告不要过分依赖这一点：一些浏览器过去会将单击元素的每个父对象都包含在其作用域链中，而不仅仅是其表单和文档。

【讨论】：

啊，是的，window.submit() 也很有效，并且使情况更加清晰。 +1

【解决方案4】：

function onFormSubmit()
{
  console.log('FORM SUBMITTED');
  return false;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<body>
  <form name="myForm" onsubmit="return onFormSubmit()">
    <input type="submit" value="Submit form! [input type = submit]" /><br />
    <input type="button" value="Submit form! [input type = button, onclick = form.submit]" onClick="return onFormSubmit();" /><br />
    <!-- in real test change onClick behavior 
    return onFormSubmit(); 
    to:
    form.submit();
    Here I used onFormSubmit() because when you calling form.submit() browser doesn't dispatch onsubmit event -->
    <button>Submit form! [button]</button><br />
    <a href="#" onClick="return onFormSubmit();">Submit form! [a, onclick = form.submit]</a><br /><br />
    <input type="button" value="Click me, no submit! [input type = button]" /><br />
  </form>
</body>
</html>

【讨论】：

【解决方案5】：

如果您希望有条件地使用该事件，只需从您的处理程序函数中返回 true 或 false，就像这样...

JavaScript：

function validate() {
    var valid = true;
    // the following two validation functions would return a Boolean.
    valid = valid && validateUsername();
    valid = valid && validatePassword();
    // If validation is fine, return true and this allows post to continue.
    // If validation is not fine, return false and this disallows the submission from going ahead.
    return valid;
}

HTML：

<form name="frmTest" id="frmTest"
    method="post" action="example.action"
    onsubmit="return validate();">
</form>

如果你不需要它是有条件的，当然返回 false。

【讨论】：

【解决方案6】：

要阻止您的按钮提交，您可以：

在<form>的onsubmit事件上使用preventDefault()或
在按钮的onclick事件的操作结束时使用return false。

代码：

<html>
    <head></head>

    <body>
        <form name = "myForm" method = "POST">
            <input name = "button" type="submit" value="Submit!"/>
        </form>

        <script type = "application/javascript">
             document.forms.myForm.onsubmit = function(e) {
                 e = e || event;
                 e.preventDefault();
             }

             document.forms.myForm.button.onclick = function () {
                 // Your code
                 return false; // Prevents the button from trying to submit
             }
        </script>
    </body>
</html>

注意事项：

请务必根据需要使用<form> 标记中的method 属性。
e = e || event 表示 e 在所有识别它的浏览器中将等于 e 并等于 @ 987654332@ 在可识别 event 的浏览器中。
document.forms.[form name].[input name] 是另一种根据名称获取元素的方法，而 document.getElementById() 则需要 id您的 HTML 中没有设置的元素。

您可以使用以下 sn-p 实时测试代码的功能：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
        <head></head>

        <body>
            <!-- The form we don't want to submit -->
            <form name = "myForm" method = "POST">
                <input name = "button" type="submit" value="I will not submit!"/>
            </form>
          
            <!-- The form we want to submit -->
            <form name = "myForm2" method = "POST">
                <input name = "button2" type="submit" value="I will submit!"/>
            </form>

            <script type = "application/javascript">
                 // For the form we don't want to submit
                 document.forms.myForm.onsubmit = function(e) {
                     e = e || event;
                     e.preventDefault();
                 }

                 document.forms.myForm.button.onclick = function () {
                     console.log("NOT Submitted!");
                     return false;
                 }
                 
                 // For the form we want to submit
                 document.forms.myForm2.button2.onclick = function () {
                     console.log("Submitted!");
                 }
            </script>
        </body>
    </html>

【讨论】：

【解决方案7】：

此解决方案适用于原生 javascript。不会阻止输入中的返回键，它会做它应该做的 - 阻止表单在输入时提交

function preventReturnKeyFormSubmit(){
    //listen to key press events
    window.addEventListener('keydown', function(e){
        //set default value for variable that will hold the status of keypress
        pressedEnter = false;

        //if user pressed enter, set the variable to true
        if(event.keyCode == 13)
            pressedEnter = true;

        //we want forms to disable submit for a tenth of a second only
        setTimeout(function(){
            pressedEnter = false;
        },100)

    })

    //find all forms
    var forms = document.getElementsByTagName('form')

    //loop through forms
    for(i = 0; i < forms.length; i++){
        //listen to submit event
        forms[i].addEventListener('submit', function(e){
            //if user just pressed enter, stop the submit event
            if(pressedEnter == true) {
                e.preventDefault();
                return false;
            }
        })
    }

}
//run this function inside document onload/domready/ or if using jquery .ready()
preventReturnKeyFormSubmit()

【讨论】：

【解决方案8】：

只要让它返回函数，返回false

<script type="text/javascript">
        function submit(){
                alert("Yo");
return false;
        }
</script>
</head>

<body>
<form name="myForm" onsubmit="submit()">
        <input type="button" value="Submit!" onClick="return submit()" />
</form>
</body>
</html>

【讨论】：

这不起作用@MoustafaS，因为 onClick 中的 submit() 是 form.submit() （请参阅 HTML5 的内联事件处理程序中如何修改范围。