Submit change password form in bootstrap modal through ajax

Question

I Have a change password form which I have tried to code so that it gets submitted through ajax. I needed to do validation too. Below is the code that I've written. Is there anyway so that we can use this js ajax function for multiple modal forms? Or will we need to create a seperate function for submitting each modal form?

Also I wanted to make the parent page reload after user closes the modal so I have added this code:

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

but it reloads the page when someone clicks cancel button too. Is there any way to prevent reloading when clicking cancel button and only do reloading only by clicking "x".

Here is the code

index.php file where the modal is

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

$('#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();
    });
});

update-info.php

Answer 1

To use this code for multiple form add ajax code in one function and call that function whenever you want to.

To prevent page from reloading when someone click on cancel Instead of using

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

Add one click event on cross and then reload page by location.reload();

Answer 2

You can use e.preventDefault(); and instead of submit use click event

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