通过 jQuery 警报确认触发表单提交

Question

我会尽可能说清楚。

基本上，我的表格允许您从选择框中删除球员。

当用户按下 'Delete' 时，会出现一个确认框，告诉用户如果他们继续，他们将无法取回该数据。预期的行为是当用户按下 "OK" 时，删除脚本将运行并删除播放器。如果您删除确认框并允许提交按钮的默认行为，它会像我希望的那样工作。如果我能加上那个中间步骤，我会更专业。

这是我的相关HTML代码：

 <form id="player-list" action="edit-player.php?playerid=22" method="post">

                <div id="player-box" class="row">
                    <div class="small-12 medium-offset-4 medium-4 columns">
                        <label>Team
                            <select id="all-players" name="team-division">
                            <?php
                                $SQL = "SELECT
                                            ID,
                                            firstName,
                                            lastName
                                        FROM
                                            players";
                                $playerResult = mysqli_query($link, $SQL);
                                $counter = 1;

                                while($row = mysqli_fetch_array($playerResult)) {
                                    echo '<option value="player-' . $row['ID'] . '">' . substr($row['firstName'], 0, 1) . " " . $row['lastName'] . '</option>';
                                }

                            ?>



                            </select>
                            <br />
                        </label>
                    </div>
                </div>

                <div class="row">
                    <div class="small-12 medium-2 medium-offset-4 columns ">
                        <a id="player-selection" class="button expanded radius success">Submit</a>
                    </div>
                    <div class="small-12 medium-2 columns end">
                        <input type="submit" id="player-deletion" class="button expanded radius alert" name="delete-player" value="Delete" />
                    </div>
                </div>
            </form>

输入#player-deletion 标签在这里很重要。

相关jQuery代码：

$("#player-deletion").on('click', function(e) {
        e.preventDefault();

        var x;
        if (confirm("This record will be permanentely deleted. Is that OK?") == true) {
            $(e).trigger('submit');
        } 
    });

此代码无效。我知道我必须防止默认操作发生，但在用户单击 'OK' 后，我想从确认按钮重新启动提交功能。

这可能吗？

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

如果用户在确认对话框中按下取消，您只需 return false。否则它将通过默认流程。

$("#player-deletion").on('click', function(e) {
    if (!confirm("This record will be permanentely deleted. Is that OK?")) {
        return false;
    } 
});

Answer 2

无论 confirm return 是什么，您都可以 return。 return false 与调用 e.preventDefault() 和 e.stopPropagation() 相同。停止事件传播将取消提交。

$("#player-deletion").click(function(e) {
    return confirm("This record will be permanentely deleted. Is that OK?");
});

JSFiddle Example

Answer 3

将 if 语句更改为

if (confirm("This record will be permanentely deleted. Is that OK?") == true) {
    //submit regardless
} else {
    e.preventDefault();//do something other here 
}

通过 jQuery 警报确认触发表单提交

Trigger form submit via jQuery alert confirmation

php

jquery

html

forms

preventdefault