提交按钮显示是或否

Question

我有一个表单用来更新记录，在底部有一个提交按钮。我想在按钮下方显示一条消息，内容为“更新记录：”，并且有“是”和“否”两个选项框。

目前我找到的所有方法都只能创建确认弹窗，但我不想要弹窗，而是要使用按钮。目前我使用了以下代码来创建确认弹窗：

<form class=\"searchForm\" action=\"cd_update.php\" method=\"post\" onsubmit=\"return confirm('Are you sure you want to submit?');\">

<button type="submit" id="editButton">Update</button>

这可以做到吗？如果是“是”，我需要它转到cd_update.php，并保持在当前页面；如果是“否”，则需要留在当前页面。

谢谢。

- ghost3h

---

有很多种方法可以做到这一点。所以是的，这是可能的。 - PeeHaa

Answer 1

工作的fiddle。

您可以创建一个新的div用于确认消息，其中包含您想要的两个按钮是和否，然后添加js代码，在用户单击更新按钮后显示此确认div。

HTML：

<form class="searchForm" action="cd_update.php" method="post">
    <div id="confirmation-msg" style="display:none">
        Update Record?
        <button type="submit" id="yesButton">Yes</button>
        <button type="button" onClick="$('#confirmation-msg').hide()">No</button>
    </div>

    <button type="button" id="editButton">Update</button>
</form>

JS：

$('#editButton').click(function(){
    $('#confirmation-msg').show();
});

希望这能有所帮助。

- Zakaria Acharki

---

用户提问者正在寻找一种方法，使得两个按钮可以执行确认操作，而不是使用确认弹窗。 - TheGrandPackard

Answer 2

我相信这段代码是你要找的。如果你愿意，可以删除onsubmit处理程序，并将no按钮上的onClick事件替换为其他操作。这样可以让这些按钮在没有确认弹出窗口的情况下处理你的表单。

        <form class="searchForm" method="post" onsubmit="alert('Record Updated');">

        Update?
        <button type="submit" id="yesButton">Yes</button>
        <button id="noButton" onClick="alert('Not Updated')">No</button>
</form>

- TheGrandPackard

Answer 3

如果您想要自定义它，就必须使用模态框。这可以很简单地自己完成（见下文），也可以使用jQuery模态框（同样简单，但可能过于复杂）。

http://jsfiddle.net/m7w0fcmf/1/

样式

#confirm {
    display:none;
}

HTML

<form id="form" class="searchForm" action="cd_update.php" method="post">

    <div id="confirm">
        Update Record: 
        <button id="yes">Yes</button>
        <button id="no">No</button>
    </div>

    <button type="submit" id="editButton">Update</button>
</form>

JavaScript

document.getElementById('editButton').addEventListener('click', showConfirm);
document.getElementById('no').addEventListener('click', clickNo);

function showConfirm(e) {
    e.preventDefault();
    document.getElementById('confirm').style.display = 'block';
}
function clickNo(e) {
    e.preventDefault();
    document.getElementById('confirm').style.display = 'none';
}

- William Austin