Question

我正在学习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>

Answer 1

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

默认情况下，type="button"的输入不会执行表单提交，除非您确实调用form.submit（）

Answer 2

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

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

onClick='submit(event)'

Answer 3

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

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

单击时执行从HTML属性字符串创建的自治函数：

function( event) { submit()}

在其范围链中搜索submit并将其作为封闭form对象的属性查找。可能的解决方案包括

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

第19.1.6节。 O'Reilly的“Javascript权威指南”chapter 19内的事件处理程序的范围是我能够找到的唯一可以讨论此问题的链接。

<小时/> @ progysm对另一个答案的评论后更新

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

Answer 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>

Answer 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。

Answer 6

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

在preventDefault()或

onsubmit

<form>

在操作结束时，在按钮的 return false 事件中使用 onclick 。

代码：

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

备注：

请务必使用method标记中的 <form> 属性。

e = e || event 表示在所有浏览器中 e 等于 e 在识别 event 的浏览器中识别并等同于 event 。

document.forms.[form name].[input name] 是另一种根据名称获取元素的方法，而 document.getElementById() 则需要 {{ 1}} 的元素，但未在HTML中设置。

您可以使用以下代码来测试代码的功能：

＆＃13;
＆＃13;
id
＆＃13;
＆＃13;
＆＃13;

Answer 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()

Answer 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>

保持按钮不提交表单Javascript

8 个答案: