JQuery - 防止提交时刷新页面

Posted 2023-05-09

【中文标题】JQuery - 防止提交时刷新页面

【英文标题】：JQuery - Prevent Page Refresh on From Submit

【发布时间】：2020-06-29 19:06:39

【问题描述】：

我正在尝试通过 Ajax 调用 Asp.Net MVC 端点，但在提交表单时无法阻止页面刷新。

from 位于 MVC ASP.Net 视图上的 Bootstrap 模型中。

这里是表单（form.cshtml）...

@using (Html.BeginForm(null, null, FormMethod.Post, new  id = "editPropertiesForm" ))

    @Html.AntiForgeryToken()

    <div class="modal fade" id="editPropertiesModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">

        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Properties</h5>
                </div>
                <div class="modal-body form-group">

                    <div class="container">

                        <span id="responseMessage"></span>

                        <fieldset class="border pl-1 pr-4 mb-2">
                            <legend>Core Properties</legend>

                            @*Folder*@
                            <div class="form-group row">
                                <label for="formFolderPicker" class="col-sm-3">Folder(s)</label>
                                <select id="formFolderPicker" class="selectpicker form-control col-sm-9" multiple data-live-search="true" name="folders">
                                    @*Options bound via editPropertiesFormBuilder.js*@
                                </select>
                            </div>                       
                            </div>
                        </fieldset>

                        <fieldset class="border pl-1 pr-4 mb-2">
                            <legend>Other</legend>

                            @*Notes*@
                            <div class="form-group row">
                                <label for="formNotes" class="col-sm-3">Notes</label>
                                <textarea type="text" class="form-control col-sm-9" id="formNotes" name="notes" rows="3"></textarea>
                            </div>

                        </fieldset>
                    </div>

                    <div class="modal-footer">
                        <button id="editPropertiesCloseBtn" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        @*<button id="editPropertiesSaveBtn" type="submit" class="btn btn-primary">Save</button>*@
                        <input id="editPropertiesSaveBtn" type="submit" value="Save" class="btn btn-primary"/>
                    </div>
                </div>
            </div>
        </div>
    </div>

这是最终将使用 Ajax 并调用 MVC 端点的 Jquery 方法...

    $("#editPropertiesForm").submit(function (event) 
        event.preventDefault();
    );

我希望event.preventDefault() 能够工作并防止页面在提交表单时重新加载，但事实并非如此。有没有人有任何想法？

【问题讨论】：

如果表单在模态中，它可能是动态创建的。尝试使用$(document).on('submit', '#editPropertiesForm', function(e) e.preventDefault(); );

顺便说一句，我在您的代码中没有看到 editPropertiesForm 按钮。我在这里有什么遗漏吗？

@RoryMcCrossan 很遗憾没用。

在这种情况下检查控制台是否有错误

@japesSophey 我没有否决你的答案，如果你需要，我可以投赞成票。我删除了我的答案，因为有人对我的投票投了反对票，所以如果答案被反对，就没有必要坐下来。

【参考方案1】：

尝试将输入类型改为按钮

<input id="editPropertiesSaveBtn" type="button" value="Save" class="btn btn-primary"/>

并在点击事件中提交表单

$("#editPropertiesSaveBtn").on("click", function (e) 
     $("#editPropertiesForm").submit();
     e.preventDefault();
 )

【讨论】：

这完成了工作，谢谢。因为我在表单上使用了 JQuery 验证，所以我必须对点击进行额外检查以确保表单有效。