Redirect to a other page after successful form submission through AJAX

Question

I have created a simple form and store the values from the form in a database. This part is working fine now. Now I want to redirect user to a another page after successful form submission. How can I do that? Currently I am getting alert box saying successfully saved, but when I click that alert box it does not redirect to the other page (actually I want to redirect it to the page called first.php).

Here is my code

Controller

public function user_add() {
    $data_save = array(
        "Mnumber" => $this->input->post("Mnumber"),
        "email" => $this->input->post("email"),
        "fname" => $this->input->post("fname"),
        "address" =>$this->input->post("address"),
        "sitename" =>$this->input->post("sitename"),
        /* "reqnum" => $this->input->post("reqnum"),*/
        "title" => $this->input->post("title"),
        "descr" => $this->input->post("descr"),
        /*"payment" => $this->input->post("payment"),*/
        "uniquekey" => $this->input->post("uniquekey")
        /*"subscription" => $this->input->post("subscription"),
        "email_sent" => $this->input->post("email_sent"),*/
    );
    if ($this->user_mod->AddUser($data_save)) {
        echo "Successfully Saved";
    }
    else {
        echo "error";
    }
}

Model

public function AddUser($data_save) {
    if ($this->db->insert('users', $data_save)) {
        return true;
    } else {
        return false;
    }
}

View

<script>
    function save_user_new() {
        var Mnumber = $('#Mnumber').val();
        var email = $('#email').val();
        var fname = $('#fname').val();
        var address = $('#address').val();
        var sitename = $('#sitename').val();
        /*var reqnum = $('#reqnum').val();*/
        var title = $('#title').val();
        var descr = $('#descr').val();
        var uniquekey = $('#uniquekey').val();
        /*var subscription = $('#subscription').val();
        var email_sent = $('#email_sent').val();
        var payment = $('#payment').val();*/

        if (sitename != "" && email != "") {
            $.ajax({
                type: "post",
                async: false,
                url: "<?php echo site_url('form_con/user_add'); ?>",
                data: {
                    "Mnumber": Mnumber,
                    "email": email,
                    "fname": fname,
                    "address": address,
                    "sitename": sitename,
                    /*"reqnum": reqnum,*/
                    "title": title,
                    "descr": descr,
                    "uniquekey": uniquekey
                    /*"subscription": subscription,
                    "email_sent": email_sent,
                    "payment":payment*/
                },
                dataType: "html",
                success: function (data) {
                    alert(data);
                    if (data == 'error') {
                        $('#success_msg').hide();
                        $('#error_msg1').show();
                        $('#error_msg1').html("Error : Something wrong.");
                    } else if (data == 'have') {
                        $('#success_msg').hide();
                        $('#error_msg1').show();
                        $('#error_msg1').html("Error : This Sitename is already exists.");
                    } else {
                        $('#error_msg1').hide();
                        $('#success_msg').show();
                        $('#success_msg').html("User details successfully saved.");
                    }
                }

            });
        } else {
            $('#success_msg').hide();
            $('#error_msg1').show();
            $('#error_msg1').html("Error : Please enter User Details.");
        }
    }
</script>

Answer 1

Use window.location.href or window.location.replace .

function save_user_new() {

  var Mnumber = $('#Mnumber').val();
  var email = $('#email').val();
  var fname = $('#fname').val();
  var address = $('#address').val();
  var sitename = $('#sitename').val();
  /*var reqnum = $('#reqnum').val();*/
  var title = $('#title').val();
  var descr = $('#descr').val();
  var uniquekey = $('#uniquekey').val();
  /*var subscription = $('#subscription').val();
  var email_sent = $('#email_sent').val();
  var payment = $('#payment').val();*/

  if (sitename != "" && email != "") {
    $.ajax({
      type: "post",
      async: false,
      url: "<?php echo site_url('form_con/user_add'); ?>",
      data: {
        "Mnumber": Mnumber,
        "email": email,
        "fname": fname,
        "address": address,
        "sitename": sitename,
        /*"reqnum": reqnum,*/
        "title": title,
        "descr": descr,
        "uniquekey": uniquekey
          /*"subscription": subscription,
          "email_sent": email_sent,
          "payment":payment*/
      },
      dataType: "html",
      success: function(data) {
        alert(data);
        if (data == 'error') {
          $('#success_msg').hide();
          $('#error_msg1').show();
          $('#error_msg1').html("Error : Something wrong.");

        } else if (data == 'have') {
          $('#success_msg').hide();
          $('#error_msg1').show();
          $('#error_msg1').html("Error : This Sitename is already exists.");
        } else {
          $('#error_msg1').hide();
          $('#success_msg').show();
          $('#success_msg').html("User details successfully saved.");
          window.location.href = 'http://example.com/view-details'; // Keeping current page history

         // or

          window.location.replace = 'http://example.com/view-details'; // Current page history will be replaced
        }

      }

    });
  } else {
    $('#success_msg').hide();
    $('#error_msg1').show();
    $('#error_msg1').html("Error : Please enter User Details.");
  }
}

Answer 2

If you want the user to see your message, do this

$('#success_msg').html("User details successfully saved.");
setTimeout(function() { location="first.php"},2000);

Answer 3

If you want to redirect using JavaScript and jQuery you can use the following properties of Javascript.

location.href = 'first.php';

OR

location.replace('first.php');

place your code where you want to redirect to occure.