jQuery page redirect after submit the form

Question

I have a form like this

<form id="add-to-cart" name="my-form" action="http://www.example.com" method="post">
  <div class="row flat">
    <input type="hidden" name="cartkey" value="">
    <input type="hidden" name="id" value="2">
    <button type="submit"  value="submit" data-value="2" data-name="id">Buy Now</button>
  </div>
</form>

To Save the form I have used jQuery. So for now my code looks like this

 <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery('button').click(function(){
        var Value = jQuery(this).attr('data-value');
        jQuery('[name="id"]').val(Value);
        jQuery('#add-to-cart').submit();
        window.location = "http://www.page-2.com";
        });
    });
  </script>

But here after submit the form is not redirecting to another page(http://www.page-2.com). So can someone kindly tell me how to do redirect the form after submit the form?

Update Sorry here I can't use ajax. I want to submit the form in simple.

Answer 1

You can handle this in your action, you calling onSubmit() from server code redirect it to the page you want.

Or you need to use ajax post() calls which give you onSuccess and onFailure events on call complete. Something like this:

$('#add-to-cart').submit(function() {
    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        dataType: 'json',
        success: function(json) {
           window.location.href = "http://www.page-2.com";
        }
    })
    return false;
});