提交表單后如何在同一頁面中獲取成功消息？

Question

我正在嘗試在同一頁面中顯示成功和錯誤消息。 我需要更改什么？

表單是將數據發送到數據庫，然后在同一頁面上顯示成功消息，然后重定向到另一頁面。 我嘗試過更改表單和Java腳本中的ID值，但仍然得到相同的結果，數據已發送到數據庫，它重定向到另一個頁面，但是在重定向之前它不會顯示成功消息。

控制器：

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();
    }
}

模型：

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' );
            }
        }
    });
});

視圖：

<?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(); ?>

我希望在重定向到另一個頁面之前會出現一條成功消息

Answer 1

刪除此行：

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

並在您的ajax成功函數中添加以下代碼：

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

並且只需確保在您的js文件中定義siteUrl ：

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

Answer 2

代碼發生的事情是，當您嘗試運行表單驗證時，它始終為true，因為您設置了一個條件，即如果結果為true或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);

而且，如果您要將消息發送回AJAX代碼，則應首先使用JSON對其進行編碼。

要顯示它..執行此操作。

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' );
}

希望能有所幫助。讓我知道結果。