AJAX表单重新加载我的页面:(

Question

I have a an ajax form that reads the data from my form submit.

I want to make it so when the form is submitted, it shows the response from my php callback. For example, if the user entered in the password, update the table and return something like echo 'Successfully updated your password'; I have tried reading different posts / blogs about how to do this but my error keeps occuring. It keeps refreshing the page when I click the save button after entering either the password or the profile picture.

My HTML Form code :

<div class="modal fade -dark" id="ben2" data-animate-show="fadeInRight" data-animate-hide="fadeOutRight">
<div class="modal-dialog">
    <div class="modal-content -padded">
        <div class="modal-body _text-center">
            <form class="form-horizontal" enctype="multipart/form-data" id="myAccount" method="post" action="">

                <div class="form-group">
                    <label class="col-md-12 control-label" style="color: white; opacity: 100%;">Username</label>
                    <div class="col-md-12">
                        <input type="text" class="form-control" value="<?php foreach($users as $user) { echo $user[1]; } ?>" disabled>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-12 control-label" for="example-email" style="color: white; opacity: 100%;">Email</label>
                    <div class="col-md-12">
                        <input type="email" id="example-email" name="example-email" class="form-control" value="<?php foreach($users as $user) { echo $user[3]; } ?>" disabled>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-12 control-label" style="color: white; opacity: 100%;">New Password</label>
                    <div class="col-md-12">
                        <input type="password" class="form-control default my-password required" name="securePassword_Val" id="form-element-colors-info" placeholder="Enter your new password here">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-12 control-label" style="color: white; opacity: 100%;">Profile Pic</label>
                    <div class="col-md-12">
                        <input class="form-control default profile-pic required" type="file" name="fileToUpload" id="form-elements-file">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-12 control-label" style="color: white; opacity: 100%;">User Level</label>
                    <div class="col-md-12">
                        <input type="text" class="form-control" value="<?php echo $member_config->userLevelValidation($con); ?>" disabled>
                    </div>
                </div>
        </div>

        <div class="col-sm-12">
            <div class="modal-footer _text-center _margin-bottom-none">
                <div class="btn-group">
                    <button class="btn -dark" data-dismiss="modal" aria-hidden="true" title="Close Without saving changes"><i class="fa fa-times"></i></button>
                    <button class="btn -dark" type="submit" name="SaveUserChanges" title="Save changes to your account"><i class="fa fa-save"></i></button>
                </div>
            </div>
            </form>
            <div id="myAccountResponse"></div>
        </div>
    </div>
</div>

As you can see, I have a div id called myAccountResponse which I want the callback message to display in.

My AJAX code is :

<script>    
//JQuery Script to submit Form
$(document).ready(function () {
    $("#myAccount").validate({
        submitHandler : function () {
            // your function if, validate is success
            $.ajax({
                type : "POST",
                url : "includes/form_submit.php",
                data : $('#myAccount').serialize(),
                success : function (data) {
                    $('#myAccountResponse').html(data);
                }
                console.log('AJAX ERROR');
            });
        }
    });
});
</script>

My form_submit.php code :

    //Upload users image to our /uploads directory
    $uploaddir        = 'uploads/';
    $uploadfile       = $uploaddir . basename($_FILES['fileToUpload']['name']);
    $save_to_database = ("uploads/" . $_FILES["fileToUpload"]["name"]);
    $normalPassword   = mysqli_real_escape_string($con, $_POST["securePassword_Val"]);
    $pwd              = password_hash($normalPassword, PASSWORD_DEFAULT);
    $username         = $_SESSION["username"];

    //Run a list of checks so they don't have to type in a value if they don't want to change a current certain value

    if(isset($_POST['fileToUpload']) & isset($_POST['securePassword_Val'])) {
        if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) { echo 'Successfully uploaded image'; } else { die('Could not upload file.<br>Contact the Administrator of the website for more infomration.'); }
        $query = "UPDATE users SET password = '$pwd', profile_picture = '$save_to_database' WHERE username='$username'";
        $success['updatedAll'] = 'Successfully updated your password and profile picture!';
    }
    else if (empty($_POST['fileToUpload'])  & !empty($_POST['securePassword_Val'])) {
        $query = "UPDATE users SET password = '$pwd' WHERE username='$username'";
        $success['updatedPwd'] = 'Successfully updated your password!';
    }
    else if (empty($_POST['securePassword_Val']) & !(empty($_POST['fileToUpload']))) {
        if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) { echo 'Successfully uploaded image'; } else { die('Could not upload file.<br>Contact the Administrator of the website for more infomration.'); }
        $query = "UPDATE users SET profile_picture = '$save_to_database' WHERE username='$username'";
        $success['updatedPpic'] = 'Successfully updated your profile picture!';
    }
    else if (empty($_POST['securePassword_Val']) & empty($_POST['fileToUpload'])) {
        $errors['etyBoth'] = 'You must enter a value to change!';
    }

    if(count($errors) > 0) {
        if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&  strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
            echo $errors;
            exit;
        }

    } else {
        //Write our success return here
        echo $success;
        $result = mysqli_query($con, $query) or die('error');
    }

Answer 1

You should prevent default form handling, for example:

<script>    
//JQuery Script to submit Form
$(document).ready(function () {
    $("#myAccount").validate({
        submitHandler : function () {
            // your code

            return false; // Prevent default form handling
        }
    });
});
</script>

Answer 2

I think you need to put return false; at the end of your submitHandler, to tell it not to do a normal postback:

 submitHandler : function () {
            // your function if, validate is success
            $.ajax({
                type : "POST",
                url : "includes/form_submit.php",
                data : $('#myAccount').serialize(),
                success : function (data) {
                    $('#myAccountResponse').html(data);
                }
            });

            return false; //prevent default postback
        }

Also console.log('AJAX ERROR'); was in the wrong place and probably causing a syntax error if you checked your console. If you want to check for ajax errors, include an "error" callback option as per the jQuery documentation.

Answer 3

To prevent the page from refreshing, you can attach the event handler to the submit button's onclick event. The button should be given an id and its type should be change from 'submit' to 'button'