why ajax submit is not working with jquery validations?

51 views Asked by At

My view page code/controller/model for form submission with jquery validations and ajax submit.jquery validations are working but ajax submission function is not working. I want to submit my form details in to db using jquery validations through ajax in submit handler.But ajax in submit handler is not calling.Please tell me the solution and my code follows below.

$(document).ready(function() {
  $("#form").validate({
      rules: {
          "name": {
              required: true,
              minlength: 5
          },

          "email": {
              required: true,
              email: true,
              remote: {
                  url: "index.php/ind/checkmail",
                  type: "post"
              }
          },

          "userFiles1[]": {
              required: true

          },
          "userFiles": {
              required: true

          },
      },
      messages: {

          "name": {
              required: "Please, enter a name"
          },

          "email": {
              required: "Please Enter Email",
              remote: "That email is already Registered"
          }
      },

      submitHandler: function(form) {

          $.ajax({
              type: "POST",
              url: "url",
              data: $(form).serialize(),
              processData: false,
              contentType: false,
              cache: false,
              async: false,
              success: function(response) {

                  alert('inserted');
              }
          });
          return false;

      }

  });

});
.form-control {
    width: 50%;
}

input.error {
    border: 1px solid red;
}

label.error {
    font-weight: normal;
    color: red;
}
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
        </script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.js" type="text/javascript"></script>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
        </script>
    
    
                    <div class="container">
    
                        <form id="form" enctype="multipart/form-data">
    
                            <div class="form-group">
                                <label for="nme">Name:</label>
                                <input type="text" class="form-control" id="name" placeholder="Enter name" name="name">
                            </div>
    
                            <div class="form-group">
                                <label>E-mail:</label>
                                <input type="text" id="email" class="form-control" name="email" placeholder="Enter Email id">
                                <span id="msg"></span>
                            </div>
    
                            <div class="form-group">
                                <label>Multiple images:</label>
                                <input type="file" class="form-control" name="userFiles1[]" multiple />
                            </div>
                            <div class="form-group">
                                <label>Choose File:</label>
                                <input type="file" class="form-control" name="userFiles" />
    
                            </div>
    
                            <input type="submit" class="btn btn-success" name="fileSubmit">
                            </input>
                        </form>
    
                    </div>
    
    </body>
    
    </html>

My controller code is:

public function propty()
{
    print_r($_POST);
    exit;
    $this->load->database(); // alert("hi"); $config1['upload_path'] = 'upload/'; $config1['allowed_types'] = 'jpg|jpeg|png|gif'; $config1['encrypt_name'] = TRUE; $config1['max_size'] = 2048; $config1['file_name'] = $_FILES['userFiles']['name']; $this->load->library('upload',$config1); $this->upload->initialize($config1); if($this->upload->do_upload('userFiles')){ //echo 'haii'; exit; $uploadData1 = $this->upload->data(); $picture = $uploadData1['file_name']; }else{ //echo 'bye'; exit; $picture = ''; } $add = array( 'name' => $this->input->post('name'), 'email' => $this->input->post('email'), 'pic' => $picture ); //echo '<pre>';print_r($add);exit;
    $this->load->model('indmod');
    $res=$this->indmod->padd($add);
    //echo '<pre>';print_r($res);exit;
    if (!empty($res)) {
        $data = array();
        if (!empty($_FILES['userFiles1']['name'])) {
            //echo "hi";exit;
            $filesCount = count($_FILES['userFiles1']['name']);
            for ($i = 0; $i < $filesCount; $i++) {
                $_FILES['userFile']['name'] = $_FILES['userFiles1']['name'][$i];
                $_FILES['userFile']['type'] = $_FILES['userFiles1']['type'][$i];
                $_FILES['userFile']['tmp_name'] = $_FILES['userFiles1']['tmp_name'][$i];
                $_FILES['userFile']['error'] = $_FILES['userFiles1']['error'][$i];
                $_FILES['userFile']['size'] = $_FILES['userFiles1']['size'][$i];

                $uploadPath = 'upload/';
                $config['upload_path'] = $uploadPath;
                $config['allowed_types'] = 'gif|jpg|png|jpeg|pdf';

                $this->load->library('upload', $config1);
                $this->upload->initialize($config1);
                if ($this->upload->do_upload('userFile')) {
                    $fileData = $this->upload->data();
                    //print_r($fileData);exit;
                    $uploadData[$i]['image'] = $fileData['file_name'];
                    $uploadData[$i]['propid'] = $res;
                    //print_r($uploadData);exit;
                }
            }

            if (!empty($uploadData)) {
                //echo '<pre>';print_r($uploadData);exit;
                $insert = $this->indmod->insert_pimgs($uploadData);
                //$data['city']=$this->indmod->select9();
                //echo $insert; exit;

                if ($insert) {
                    $this->session->set_flashdata('feedback', 'your details are successfully submitted');
                    redirect('ind/properties');
                } else {
                    $this->session->set_flashdata('error', 'your details are not submitted');
                    redirect('ind/properties');
                }
            }
        }
    }
}

My modal code is

public function padd($data)
{
    $res= $this->db->insert('pdetails', $data);
    $last_id = $this->db->insert_id();
    return  $last_id;
}
public function insert_pimgs($data = array())
{
    $insert = $this->db->insert_batch('pimages', $data);
    return $insert?true:false;
}
0

There are 0 answers