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

使用if来测试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/

取消“提交”按钮执行

6 个答案: