Question

我有一个更改密码表单，我尝试编码，以便通过ajax提交。我也需要做验证。下面是我写的代码。无论如何，我们可以将这个js ajax函数用于多种模态形式吗？或者我们是否需要创建一个单独的函数来提交每个模态表单？

我还想在用户关闭模式后重新加载父页面，所以我添加了这段代码：

$('#edit').on('hidden.bs.modal', function() {
    location.reload();
});

但是当有人点击取消按钮时它会重新加载页面。单击取消按钮是否有任何方法可以防止重新加载，只能通过单击“x”进行重新加载。

这是代码

index.php文件，其中模态为

<p data-placement="top" data-toggle="tooltip" title="Edit" data-original-title="Edit">
    <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" data-backdrop="static" data-keyboard="false">
        <span class="glyphicon glyphicon-pencil"> Edit</span>
    </button>
</p>

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Edit Your Detail</h4>
            </div>
            <!--/.modal-header-->

            <div class="modal-body">
                <form method="post" id="updateForm" action="update-info.php">
                    <input type="hidden" name="userID" value="<?php echo $_SESSION['user']; ?>" />
                    <div class="form-group">
                        <label for="customer_name">Customer Name :</label>
                        <input class="form-control" type="text" name="customer_name" id="customer_name" value="<?php echo $userRow['fullName']; ?>" />
                    </div>

                    <h4><u><strong>Change Password</strong></u></h4>
                    <div class="form-group" id="currentPass-group">
                        <label for="current_pass">Current Password :</label>
                        <input class="form-control" type="password" name="current_pass" id="current_pass">
                    </div>

                    <div class="form-group">
                        <label for="new_pass">New Password :</label>
                        <input class="form-control" type="password" name="new_pass" id="new_pass">
                    </div>

                    <div class="form-group">
                        <label for="confirm_pass">Confirm Password :</label>
                        <input class="form-control" type="password" name="confirm_pass" id="confirm_pass">
                    </div>

                    <div class="modal-footer">
                        <!-- <input type="submit" name="submit" class="btn btn-block btn-warning" value="Save changes" /> -->
                        <button type="submit" name="submit" class="btn btn-success" id="submitForm" value="Save changes">Save Changes</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<!--/.modal -->

custom.js文件：

$('#edit').on('hidden.bs.modal', function() {
    location.reload();
});

/* must apply only after HTML has loaded */
$(document).ready(function() {
    $("#updateForm").on("submit", function(e) {

        $(".error").hide();
        var hasError = false;
        var currentpass = $("#current_pass").val();
        var newpass = $("#new_pass").val();
        var cnfpass = $("#confirm_pass").val();

        if (currentpass == '') {
            $("#current_pass").after('<span class="error text-danger"><em>Please  enter your current password.</em></span>');
            //$('#currentPass-group').addClass('has-error'); // add the error class to show red input
            //$('#current_pass').append('<div class="help-block">Please enter your current password.</div>'); // add the actual error message under our input
            hasError = true;
        } else if (newpass == '') {
            $("#new_pass").after('<span class="error text-danger"><em>Please enter a password.</em></span>');
            hasError = true;
        } else if (cnfpass == '') {
            $("#confirm_pass").after('<span class="error text-danger"><em>Please re-enter your password.</em></span>');
            hasError = true;
        } else if (newpass != cnfpass) {
            $("#confirm_pass").after('<span class="error text-danger"><em>Passwords do not match.</em></span>');
            hasError = true;
        }

        if (hasError == true) {
            return false;
        }
        if (hasError == false) {

            var postData = $(this).serializeArray();
            var formURL = $(this).attr("action");
            $.ajax({
                url: formURL,
                type: "POST",
                data: postData,
                success: function(data, textStatus, jqXHR) {
                    $('#edit .modal-header .modal-title').html("Result");
                    $('#edit .modal-body').html(data);
                    $("#submitForm").remove();
                    //document.location.reload();
                },
                error: function(jqXHR, status, error) {
                    console.log(status + ": " + error);
                }
            });
            e.preventDefault();
        }
    });

    $("#submitForm").on('click', function() {
        $("#updateForm").submit();
    });
});

更新info.php的

Answer 1

要将此代码用于多个表单，请在一个函数中添加ajax代码，并随时调用该函数。

当有人点击取消时阻止页面重新加载而不是使用

 $('#edit').on('hidden.bs.modal', function () {
    location.reload();
    });

在十字架上添加一个点击事件，然后按location.reload（）;

重新加载页面

Answer 2

您可以使用e.preventDefault（）;而不是提交使用点击事件

$("#submitForm").on("click", function(e) {   
         e.preventDefault();

通过ajax在bootstrap模式中提交更改密码表单

2 个答案: