codeigniter php中的表单提交后不清除数据

Question

I am having a registration form once user submit the form not clearing the data and it is not displaying the success message as well.here the code which i have written for registration form.

Controller:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Login extends CI_Controller {
public function __construct() {
    parent::__construct();
    $this->lang->load('error_messages', 'english');
    $this->load->model(VERSION . DOCTOR_MODEL_FOLDER . 'Doctor_model', 'doctors');
    $this->load->helper('gmaps');
    $this->load->library('locations');
}
 public function createAccount() {
    $first_name = $this->input->post('first_name');
    $last_name = $this->input->post('last_name');        
    $email = $this->input->post('email_id');
    $password = $this->input->post('password');
    $phone_number = $this->input->post('phone_number_with_ext');        
    $reg_no = $this->input->post('reg_no');    
    $regDetails = array(
        'first_name' => $first_name,
        'last_name' => $last_name,
        'email_id' => $email,
        'password' => $password,
        'reg_no' => $reg_no,
        'mobile_no' => $phone_number,            
    );
    $regMessage = $this->doctors->register($regDetails);
    //if registration done successfully
    if (is_string($regMessage)) {
        $data['success'] = true;
        $data['response'] = $phone_number;

    } else {
        //if there is error
        $data['success'] = false;
        $data['error_msg'] = $regMessage;
    }
    die(json_encode($data));
}

View:

<div class="form">
                        <div class="alert" style="display: none;"></div>
                        <form class="form-validate form-horizontal " id="register_form" method="post" action="" enctype="multipart/form-data">                             
                            <div class="form-group ">
                                <div>
                                    <input class=" form-control" placeholder="First Name" id="first_name" name="first_name" type="text" />

                                </div>
                            </div>
                            <div class="form-group ">
                                <div>
                                    <input class=" form-control" placeholder="Last Name" id="last_name" name="last_name" type="text" />
                                </div>
                            </div>
                            <div class="form-group ">
                                <div>
                                    <input class=" form-control" placeholder="Email Address" id="email_id" name="email_id" type="text" />
                                </div>
                            </div>
                            <div class="form-group ">
                                <div>
                                    <input class="form-control country-code" placeholder="Phone Number" id="phone_number" name="phone_number" type="tel" />
                                </div>
                            </div>
                            <div class="form-group ">
                                <div>
                                    <input type="text" class="form-control " placeholder="Registration number" id="reg_no" name="reg_no">
                                </div>
                            </div>                          
                            <div class="form-group ">
                                <div>
                                    <input class="form-control " placeholder="Password" id="password" name="password" type="password" />
                                </div>
                            </div>
                            <div class="form-group ">
                                <div>
                                    <input class="form-control " placeholder="Re-enter Password" id="confirm_password" name="confirm_password" type="password" />
                                </div>
                            </div>

                            <div class="form-group">
                                <div>
                                    <button type="submit" id="btnRegister" class="btn btn-primary btn-lg btn-block">Submit</button>
                                </div>
                            </div>
                        </form>                          
                    </div>

JS:

 // Submit registration form on button click last_name:{ required: true},
 $('form#register_form').validate({
  rules: {
    first_name: {
        required: true,
        alpha: true
    },       
    email_id: {
        required: true,
        email: true
    },
    phone_number: {
        required: true,
        number: true,
        minlength: 8,
        maxlength: 10
    },

    password: {
        required: true,
        minlength: 6
    },
    confirm_password: {
        required: true,
        minlength: 6,
        equalTo: "#password"
    },             
},
messages: {
    first_name: {
        required: "Please enter First Name.",
        alpha: "Special Characters not allowed."
    },        
    email_id: {
        required: "Please enter a email address.",
        email: "Please enter a valid email address."
    },
    phone_number: {
        required: "Please enter Phone Number." ,
        number: "Please enter Numeric values for Phone Number."
    },               
    password: {
        required: "Please provide a password.",
        minlength: "Your password must be at least 6 characters long."
    },
    confirm_password: {
        required: "Please provide a password.",
        minlength: "Your password must be at least 6 characters long.",
        equalTo: "Please enter the same password as above."
    },              
},
submitHandler: function(form) {
    var post_data = $("#register_form").serializeArray();

    //var phoneExten = $("ul.country-list li.active").attr('data-dial-code');
    var phoneExt = $("#phone_number").intlTelInput("getNumber");        
    post_data.push({name: "phone_number_with_ext", value: phoneExt});        
    //console.log(post_data);

    $.ajax({
        url: "/createAccount",
        type: "POST",
        data: post_data
    }).done(function(res) {
        //console.log(res);            
        var data = $.parseJSON(res);            
        if( data.success){
        $('form#register_form div.form div.alert').removeClass('alert-danger').addClass('alert-success').text('User Created Successfully.').show().delay(2000).fadeOut('slow');
        }else{
            $('div.form div.alert').addClass('alert-danger').text(data.error_msg.message).show().delay(2000).fadeOut('slow');
            $("div.form").scrollTop();
        }
    });
     }
    });

Added success message in javascript it is working fine for failure message but not working for success message and once data is submitting it is displaying the data still in form fields.Not getting the data cleared.

Answer 1

Following line work like: first it find from#register_form withing the elements it next find div.form (which isn't inside the form#register_form) then jquery try to find div.alert withing div.form which is not found in your current HTML structure.

div.form is parent node of form#register_form.

$('form#register_form div.form div.alert').removeClass('alert-danger').addClass('alert-success').text('User Created Successfully.').show().delay(2000).fadeOut('slow');

You should change it to:

$('div.alert').removeClass('alert-danger').addClass('alert-success').text('User Created Successfully.').show().delay(2000).fadeOut('slow');

As far as you're submitting form through AJAX you need to clear out all form fields using jquery. You can do it like.

$('form#register_form').trigger("reset");

Answer 2

After end of the code use this line to refresh the page:

redirect('Login/createAccount','refresh');

For Success message: In Controller Code:

$this->session->set_flashdata('Add', 'Your da`ta added Successfully..');
 redirect('Login/createAccount','refresh');

In View page after body:

<?php if($this->session->flashdata('Add')){ ?>
    <center><div id="successMessage" class="alert bg-success alert-styled-left">
    <button type="button" class="close" data-dismiss="alert"><span>&times;</span><span class="sr-only">Close</span></button>
    <span class="text-semibold"><?php echo  $this->session->flashdata('Add'); ?></span> 
</div></center>
<?php }  ?>

Javascript code for disable the flash data after particular time:

    <script type="text/javascript">
$(document).ready(function(){
    $("#successMessage").delay(5000).slideUp(300);
});
</script>