提交按钮显示是或否


Submit button displays Yes or No

我有一个用于更新记录的表单,底部有一个提交按钮。我希望它显示一条消息,上面写着"更新记录:"和一个"是"answers"否"框。

我找到的每一种方式都只是为了确认弹出窗口,但我不想要弹出窗口,我希望它是按钮。所以目前我有下面的给我一个确认弹出

<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,并停留在"否"的页面上

感谢

我相信这段代码就是您想要的。如果愿意,请删除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>

您必须使用模态来自定义它。这可以简单到自己做(见下文)或使用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';
}

工作小提琴

您可以为确认消息创建新的div,该消息将包含您想要的两个按钮,然后添加js代码,该代码将在用户单击Update按钮后显示此确认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();
});

希望这能有所帮助。