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

时间:2016-05-25 21:01:22

标签: php jquery html forms preventdefault

我会尽可能清楚地说明这一点。

基本上,我的表单允许您从选择框中删除玩家。

当用户按下“删除”时,会出现一个确认框,告诉用户如果他们继续,他们将无法获取该数据。预期的行为是当用户按下“OK”时,删除脚本将运行并删除播放器。如果您删除确认框并允许提交按钮的默认行为,它就像我想要的那样工作。如果我可以添加中间步骤,我会更专业。

以下是我的相关HTML代码:

<p-schedule></p-schedule>

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

相关的jQuery代码:

 <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>

此代码不起作用。我知道我必须阻止默认操作发生,但在用户点击“确定”后,我想从确认按钮重新提交提交功能。

这可能吗?

任何帮助都将不胜感激。

感谢。

3 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

您只需返回confirm返回的内容即可。 return false与调用e.preventDefault()e.stopPropagation()相同。停止事件传播将取消提交。

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

JSFiddle Example

答案 2 :(得分:0)

将if语句更改为

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