Redirect somewhere else upon JSON success?

Question

My Code:

<script>
  $('#form').submit(function() {
    $.ajax({
      type: 'POST',
      url: $(this).attr('action'),
      dataType: 'json',
      success: function(json) {
        window.location.href = "http://www.example.com";
      }
    });
    return false;
  });
</script>

The FORM:

<form id="form" class="center" action="http://localhost/products/index.php?route=checkout/cart/add" method="post">
  <input type="text" name="cname">
  <input type="hidden" name="product_id" value="51">
  <input type="submit">
</form>

When the form presses submit it goes to the action page which is just a JSON success message, what I want to do is redirect to a different page other than the action page, but my code does not seem to be working?

What exactly is wrong with my code, can someone help me fix it?

I would be so grateful if you could help me out, many thanks!

charlietfl · Accepted Answer · 2017-11-19T06:27:02.103

2

You aren't posting any data which makes a POST fairly useless .

Also you have no error handler either

Try:

$(function(){
    $('#form').submit(function() {

       var $form = $(this);

        $.ajax({
            type: 'POST',
            url: $form.attr('action'),

            // data to send
            data: $form.serialize(),

            dataType: 'json',
            success: function(json) {
               window.location.href = "http://www.example.com";
            },
            error: function(){
               // do something when request fails - See $.ajax docs
            }
        })
        return false;
    });
});

edited Nov 19 '17 at 06:27

answered Nov 19 '17 at 06:14

charlietfl

170,828
13
121
150

As soon as I submit the form it just takes me to the JSON response at http://localhost/products/index.php?route=checkout/cart/add – rakupu Nov 19 '17 at 06:18
Even with this code, I also added an error function to go to a different location, but it seems to completely ignore the code – rakupu Nov 19 '17 at 06:19
Probably calling this before form exists in page. Make sure to wrap in `$(function(){ /* code here */})` – charlietfl Nov 19 '17 at 06:20
What do you mean? – rakupu Nov 19 '17 at 06:21
If that code is above the form element in html...the form won't exist when the code runs . Can't add event listeners to something that doesn't exist yet – charlietfl Nov 19 '17 at 06:21
It works now! Thank you very much, exactly what I was looking for – rakupu Nov 19 '17 at 06:23
I did! Thanks very much! – rakupu Nov 19 '17 at 06:30

score 0 · Answer 2 · edited Nov 19 '17 at 08:26

You can used this code for error handling! You also check this question on stackOverflow for redirecting to another page using jQuery/JavaScript: click here

$('#form').submit(function() {
  var $form = $(this);
  $.ajax({
    type: 'POST',
    url: $form.attr('action'),

    // data to send
    data: $form.serialize(),
    dataType: 'json',
    success: function(json) {
      window.location.href = "http://www.example.com";
    },
    error: function (jqXHR, exception) {
      var msg = '';
      if (jqXHR.status === 0) {
        msg = 'Not connect.\n Verify Network.';
      } else if (jqXHR.status == 404) {
        msg = 'Requested page not found. [404]';
      } else if (jqXHR.status == 500) {
        msg = 'Internal Server Error [500].';
      } else if (exception === 'parsererror') {
        msg = 'Requested JSON parse failed.';
      } else if (exception === 'timeout') {
        msg = 'Time out error.';
      } else if (exception === 'abort') {
        msg = 'Ajax request aborted.';
      } else {
        msg = 'Uncaught Error.\n' + jqXHR.responseText;
      }
      alert(msg);
    },
  });
});

score 0 · Answer 3 · edited Nov 23 '17 at 16:15

0

You need to have separate error and success handlerS like below. In success method you can redirect to other pages/sites (window.location.href = "http://www.EXAMPLE.com";)

var ajaxUpdateRequest = {
url: '/dotnethelpers/UpdateUsers',
dataType: 'json',
success: updateSuccessfully, //Separate method for handling success
error: showError //Separate method for handling error
};

edited Nov 23 '17 at 16:15

Flexo

87,323
22
191
272

answered Nov 19 '17 at 09:44

thiyagu selvaraj

100
4

Redirect somewhere else upon JSON success?

3 Answers3