web-dev-qa-db-ja.com

同じフォームに複数の送信ボタンがある場合、onsubmit（）を使用して確認を表示する方法

<form onsubmit="return confirm('Are you sure you want to rollback deletion of candidate table?')">
<input type='submit' name='delete' value='Undo' />
<input type='submit' name='no' value='No' />

ユーザーが2番目の送信ボタンをクリックしたとき、つまりNoとして、「トランザクションをコミットしますか？」という確認ダイアログを表示します。

htmlformsonsubmit
12
RatDon
_<form method='post'>
    <input type='submit' name='undo' value='Undo' onclick="return confirm('Are you sure you want to rollback deletion of candidate table?')"/>
    <input type='submit' name='no' value='No' onclick="return confirm('Are you sure you want to commit delete and go back?')"/>
</form>
_

うまくいきました。 onsubmit()をonclick()に変更しました。この状況で両方の機能が同じであるため。

21
RatDon

Onsubmitの代わりにonclickにバインドできます-以下を参照してください。

<script> 
function submitForm() {
    return confirm('Rollback deletion of candidate table?');
}
<script>

<form>
    <input type='submit' onclick='submitForm()' name='delete' value='Undo' />
    <input type='submit' onclick='submitForm()' name='no' value='No' />
</form>

または、jQueryを使用します。

<script> 
$(document).ready(function() {
    $('form input[type=submit]').click(function() {
        return confirm('Rollback deletion of candidate table?');
    });
});
<script>
3
Madison May

インラインイベントハンドラーを回避するイベントリスナーベースのソリューションを次に示します（サイトにインラインJavaScriptを禁止するコンテンツセキュリティポリシーがある場合に役立ちます）。

HTML：

<form method="post">
    <input type="submit" id="deleteButton" name="delete" value="Undo" />
    <input type="submit" id="noButton" name="no" value="No" />
</form>

JS：

document.getElementById("deleteButton").addEventListener("click", function(evt) {
    if (!confirm("Are you sure you want to rollback deletion of candidate table?")) { 
        evt.preventDefault();
    }
});

document.getElementById("noButton").addEventListener("click", function(evt) {
    if (!confirm("Are you sure you want to commit the transaction?")) { 
        evt.preventDefault();
    }
});
1
S. Jensen
<form onsubmit="submitFunction();">
    <input type='submit' name='delete' value='Undo' />
    <input type='button' onclick="declineFunction()" name='no' value='No' />
</form>

私は送信を作成しようとはせず、onclick = "function（）"のボタンだけを作成してから、JavaScriptを使用して変数を設定し、何回クリックされたかを確認し、alert（）;

これが役に立てば幸い：D

0
Tony Ventura