How to get the success message in the same page after submitting the form?

Question

I'm trying to display a success and error message in the same page. What do i need to change?

The form is to send the data to the database and then show a success message in the same page, then redirect to another page. I've tried changing the ID value in the form and the java script, i still get the same results, the data is sent to the database, it redirects to another page, but it doesn't show the success message before redirecting.

Controller:

public function register_ajax() { 
    //form validation rules
    $this->form_validation->set_rules('org_name', 'Organisation Name', 
     'trim|required');
    $this->form_validation->set_rules('email', 'Email', 
     'trim|required|valid_email|is_unique[new_church.email]',
        array('is_unique' => "This email address is already registered 
        with this application.")
    );
    $this->form_validation->set_rules('password', 'Your Password', 
    'trim');
    $this->form_validation->set_rules('c_password', 'Confirm Password', 
    'trim|required|matches[password]',
        array(
            'matches' => 'Password does not match'
        )
    );
    if ($this->form_validation->run())  {   
        $this->registration_model->update_church(); //insert the data 
        into db
        echo 1;
        redirect(site_url('registration/payment'));
    } else { 
        echo validation_errors();
    }
}

Model:

public function update_church() { 
    $org_name = ucwords($this->input->post('org_name', TRUE)); 
    $email = $this->input->post('email', TRUE); 
    $password = ucfirst($this->input->post('password', TRUE));
    $c_password = ucfirst($this->input->post('c_password', TRUE));
    $data = array (
        'org_name' => $org_name,
        'email' => $email,
        'password' => $password,
        'c_password' => $c_password,
    );
    $this->db->insert('new_church', $data);

    //email admins
    //$this->notify_admins($name, $email, $subject, $message);
}

JavaScript:

//Registration
$('#registration_form').submit(function(e) {
    e.preventDefault();
    var form_data = $(this).serialize();
    $.ajax({
        url: base_url + 'registration', 
        type: 'POST',
        data: form_data, 
        success: function(msg) {
            if (msg == 1) {
                $('#status_msg').html('<div class="alert alert-success 
                text-center"> Success.</div>').fadeIn( 'fast' );
                $('#registration_form')[0].reset(); //reset form fields 
            } else {
                $('#status_msg').html('<div class="alert alert-danger 
                text-center">' + msg + '</div>').fadeIn( 'fast' ).delay( 
                30000 ).fadeOut( 'slow' );
            }
        }
    });
});

View:

<?php 
    $form_attributes = array("id" => "registration_form");
    echo form_open('registration/register_ajax', $form_attributes); ?>


    <div class="login100-form validate-form">       

      <div class="wrap-input100 validate-input" data-validate = "First 
       name is required">
        <label class="form_header">Organisation Name</label>
        <input class="input100" type="text" name="org_name" value="<?php 
         echo set_value('org_name'); ?>" required/>
        <span class="focus-input100"></span>
      </div>

      <div class="wrap-input100 validate-input" data-validate = "Valid 
        email is required: ex@abc.xyz">
        <label class="form_header">Your Work Email Address</label>
        <input class="input100" type="email" name="email" value="<?php 
          echo set_value('email'); ?>" required/>
        <span class="focus-input100"></span>
      </div>

      <div class="wrap-input100 validate-input" data-validate = "Password 
        is required">
        <label class="form_header">Your Password</label>
        <input class="input100" type="password" name="password" value="<? 
         php echo set_value('password'); ?>" required/>
        <span class="focus-input100"></span>
      </div>

      <div class="wrap-input100 validate-input" data-validate = "Confirm Password">

        <label class="form_header">Confirm Password</label>
        <input class="input100" type="password" name="c_password" value="<?php echo set_value('c_password'); ?>" required/>
        <span class="focus-input100"></span>
      </div>

      <div class="text-center p-t-12">
        <p>By clicking the button below, you agree to StreamApp's terms of acceptable use</p>
      </div>

      <div class="m-t-20">  
          <div id="status_msg"></div>
      </div>

      <div class="container-login100-form-btn">
        <button class="login100-form-btn">  NEXT </button>
      </div>

    </div>

      <?php echo form_close(); ?>

I expect a success message to appear before redirecting to another page

Answer 1

Remove this line:

redirect(site_url('registration/payment'));

And in your ajax success function add this:

if (response == "1") {
    // todo set timeout maybe and show a success message then redirect.
    window.location.href = siteUrl+"registration/payment";
}

And just make sure to define siteUrl in your js file:

const siteUrl = "http://localhost/";

Answer 2

what happened to your code is when your try to run the form validation it get always true because you set a condition where not executing if the result is true or false.

if ($this->form_validation->run() == TRUE)  { //you should change it to this   
    $this->registration_model->update_church(); 
     $data['success'] = 1;
} else { //if the form validation run false it will display the error.
     $data['error'] =  validation_errors();
}
echo json_encode($data);

And if you are going to send back a message to your AJAX code you should encode it first using JSON.

To display it.. do this.

if (msg.success == 1) {
     $('#status_msg').html('<div class="alert alert-success 
     text-center"> Success.</div>');
     $('#registration_form')[0].reset(); //reset form fields 
     setTimeout(function(){
         window.location.replace("<?php echo base_url('registration/payment') ?>");
     }, 3000); //set it to your time

} else if(msg.error){
      $('#status_msg').html('<div class="alert alert-danger 
      text-center">' + msg.error + '</div>').fadeIn( 'fast' ).delay( 
      30000 ).fadeOut( 'slow' );
}

Hope that helps.Let me know the result.