处理来自ajax发布的结果

Question

I have a settings form that I want to ensure the user doesnt make changes by mistake. When the user is done they will click the save button which will pop up a modal (Bootstrap modals) prompting the user to enter their password to continue with processing the original form.

If the password entered is correct then the first form is submitted, else the page is reloaded / redirected back to itself. The first form will include many fields, but i am just using the one for testing.

<form action="http://localhost.testing/render_confirm_with_password.php" method="POST" id="validation-form" class="form-horizontal confirm-form">
    <div class="form-group">
        <label for="deletion_reason" class="col-xs-3 col-lg-4 control-label">Enter Your Value</label>
        <div class="col-sm-9 col-lg-6 controls">
            <input type="text" name="value" placeholder="[e-mail]" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-9 col-sm-offset-3 col-lg-6 col-lg-offset-4">
            <!-- <button type="submit" class="btn btn-primary"><i class="icon-ok"></i> Process</button> -->
            <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#password_confirm_modal" data-modal-type="password_confirm" data-modal-title="Delete Transaction" data-modal-text="Are you sure you want to delete this transaction?"><i class="icon-ok"></i> Process</button>
        </div>
    </div>
</form>

When the user clicks save it will pop up the modal with the form inside is as shown below. This form is processed using jQuery $.ajax()

<form action="#" method="POST" id="validation-form" class="form-horizontal">
  <div class="modal-body">
        <div class="form-group">
            <label for="deletion_reason" class="col-xs-3 col-lg-4 control-label">Password</label>
            <div class="col-sm-9 col-lg-6 controls">
                <input type="text" name="password" id="password" placeholder="your password" class="form-control" />
            </div>
        </div>
        <p>PASSWORD RESULT -> <span id="password_result"></span></p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button id="password_confirm_submit" class="btn btn-primary">Process</button>
  </div>
</form>

The ajax code is shown below. Once the modals process button is clicked it sets the password before posting it through to the php page to be processed. In the php I check if the password matches the stored password and echo back MATCH or NO MATCH which gets shown in the modal. If the ajax result equals MATCH I then process the first form with $('.confirm-form').submit(); Im sure I haven't done this in a secure manner.

$('#password_confirm_submit').click(function(e){
    var password = $('#password').val();
    e.preventDefault();
    $.ajax({
        type: 'POST',
        data: {password: password},
        url: 'http://localhost.testing/process_confirm_with_password.php',
        success: function(result){
            $('#password_result').html(result);
            if(result == "MATCH"){
                // process form_1
                $('.confirm-form').submit();
            }else{
                // back to form_1
            }
        }
    })
});

I tried redirecting from within the PHP if the passwords didnt match but it still processed form one. Don't worry, its hard coded just for testing

$password = "password";

if(isset($_POST['password'])){
    $pw = $_POST['password'];
    if($password == $pw){
        // process form_1
        echo "MATCH";
    }else{
        // return to form_1
        header('Location: http://localhost.testing/confirm_with_password.html');
        echo "NO MATCH";
    }
}else{
    // return to form_1
    echo "NOT SET";
}   

Answer 1

What the header function in your PHP code that handles the AJAX request does, is it redirects only the AJAX request and not the page in your browser. Remove the redirect as it will not return to form 1.

If you want to close the bootstrap modal box when the password was entered incorrectly, you'd call $("#password_confirm_modal").modal("hide"); or location.reload(); to refresh/reload the page from within your AJAX callback in your else statement where you handle the incorrect password response, but using the latter you would lose all the data entered into the form.

Instead of doing either of the two you could display a warning in the modal box about the password having been entered incorrectly, and let the user try entering the password again. As for the security aspect, you might want to add the correct password as a hidden field into your original form just before it is submitted, so that when saving the actual data the password can be verified.