javascript - 取消“提交”按钮执行

Question

我在 HTML 中有一个表单的提交按钮：

<form>
<input type="text" />
<input type="submit" id="execute" />
</form>

我正在尝试将 javascript 应用于确认窗口，如果用户单击取消，则提交将不会执行。我怎么做？

Answer 1

懒惰而简单的方法。

<form onsubmit="return confirm('Do you want to submit the form?'">

更好的方法当然是将其放入脚本文件并绑定事件 onload。

Answer 2

就return false在按钮的点击事件上

 <input type="submit" id="execute" onclick="return false;"/>

如果你想使用confirm

 <input type="submit" id="execute" onclick="return confirm("Your message");"/>

Answer 3

HTML

<form action="/" method="post" onsubmit="return check()">
    <input type="text" />
    <input type="submit" id="execute"  />
</form>

JS

function check() {
    if (confirm('submit?')) {
        return true;
    } else {
        return false;
    }
}

http://jsfiddle.net/UJ7Q4/

JS-jQuery

$(document).ready(function () {

    $('input[type="submit"]').on('click', function (e) {
        e.preventDefault();
        if (confirm('submit?')) {
            $('form').submit();
        }
    });

});

HTML

<form action="/" method="post">
    <input type="text" />
    <input type="submit" id="execute" />
</form>

http://jsfiddle.net/rqc5A/

Answer 4

使用 anif来测试confirm()结果：

function checkConfirm() {
    var c = confirm("Your message here...");

    if(c) {
        //User clicked OK, do stuff here, maybe even submit the form
        document.forms['id'].submit();
    } else {
        //User clicked cancel, just quit.
        return false;
    }
}

然后将函数内联添加到您的提交按钮。

<input type="submit" id="execute" onclick="checkConfirm();" />

Answer 5

<input type="submit" id="execute" 
onclick="if !(confirm('your confirmation message')) return false;"/>

Answer 6

给你的表格一个id怎么样

<form id="formname">
  <input type="text" />
  <input type="submit" id="execute" />
</form>

并使用

var form = document.getElementById('formname');
form.addEventListener('submit', function(e){
    var question = confirm('Really submit the form ?');
    if (!question){e.preventDefault();}
}, false);

演示在 http://jsfiddle.net/k7XuV/