取消“提交”按钮执行

Canceling a "submit" button execution

本文关键字：按钮 执行 提交 取消      更新时间：2023-09-26

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

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

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

懒惰而简单的方法。

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

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

只需return false按钮的点击事件

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

如果要使用confirm 

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

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/

使用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();" />

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

如何为您的表单提供一个 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/演示

相关文章：