PLAYCUBE PLAYCUBE - 3 months ago 18
HTML Question

Jquery post method and redirect after success

I am trying to make a post method using jquery. I am using it in a form and with bootstravalidator to validate it. After successful validation, the form gets posted and the php gets in action. Now I am trying to make a redirection to another page after successful post. Here is the code:

$('#buy').click(function() {
$.post('php/text.php', $('form#order').serialize(), function () {window.location.href = "index.html";});
});


I tried several attempts, but can't get the
window.location.href = "index.html";
correctly. Either the form gets redirected even with faulty validation, or nothing happens at all....

I find it strange, because
'php/text.php', $('form#order').serialize()'
gets only in action if the validation is correct...

EDIT:

I am also using bootstrapvalidator to validate the form. THe validation works perfectly and the post method gets executed if everything is okey.

Bootstrapvalidator:

$(document).ready(function() {
var validator = $('#order').bootstrapValidator({
fields: {
email : {
message : "write email adress",
validators : {
notEmpty : {
message : "Show Email adress"
},
stringLength : {
min : 6,
max: 35,
}
}
},
}
});
});


EDIT2:

HTML:

<form id="order">
<input type="text" name="name"/><br>
<input type="text" name="email"/><br>
<textarea name="comment"></textarea><br>
<button type="submit" name="send" id="buy">Send</button>
</form>

Answer

You form is submitted once you click on the #buy button, and even if your javascript code runs, the page will refresh. If you want to disable the submit of the form you can use $(form).on('submit', function() { return fase; }).

This is the updated code:

$('#order').on('submit', function() {
    $.post('php/text.php',
          $('form#order').serialize(),
          function () {
              window.location.href = "index.html";
          }
    );
    return false;
});

Update

Since you use the bootstrapvalidator you should use the plugin for the submit process as well (the plugin has a submitHandler function that you should use)

This is the updated code of the validator:

$(document).ready(function() {
    var validator = $('#order').bootstrapValidator({
        fields: {
            email : {
                message : "write email adress", 
                validators : {
                    notEmpty : {
                    message : "Show Email adress"
                    },
                    stringLength : {
                        min : 6,
                        max: 35,
                    }
                }
            },
        },
        submitHandler: function(validator, form, submitButton) {
            $.post('php/text.php',
                form.serialize(),
                function () {
                    window.location.href = "index.html";
                }
            );
    });
});