title: How to pass form data using jquery Ajax to insert data in database?
body: <p>I have 4 tables namely stud, country_master_academic,master_state and master_city.
  The main problem is that my form consists of many different fields like textbox, radio buttons, dropdown and an image file, so i am getting really confused.
  I can't insert data in database. Please help me. I tried many times but its not working. Thanks for the help in advance. 
  Modal in home.php page </p>
  
  <pre><code> &lt;div class="container"&gt;
  &lt;div class="modal fade" id="add_data_modal" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-heading" style="margin-top:30px;text-align:center"&gt;
                  &lt;button class="close" data-dismiss="modal" style="margin-right:20px;font-weight:bold;"&gt;x&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; Add Student&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="form-group"&gt;
                  &lt;form class="form-horizontal" name="form" id="form" method="post" action="&lt;?php $_PHP_SELF?&gt;" enctype="multipart/form-data"&gt;
                      &lt;label for="name" id="name"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;&lt;b&gt; Student Name: &lt;/b&gt;&lt;/label&gt;&lt;label id="p1"&gt;*&lt;/label&gt;
                      &lt;input type="text" class="form-control" name="name" id="name" pattern="[a-zA-Z]{3,}" title="Name should only contain letters and atleast 3 letters" required /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="no"&gt;&lt;span class="glyphicon glyphicon-phone"&gt;&lt;/span&gt;&lt;b&gt; Mobile No: &lt;/b&gt;&lt;/label&gt;&lt;label id="p2"&gt;*&lt;/label&gt;
                      &lt;input type="text" class="form-control" name="mob_no" id="mob_no" pattern="[0-9]{10}" title="Mobile number should be of 10 digits" required /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;    
                      &lt;label for="dob"&gt;&lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;&lt;b&gt; Birth Date: &lt;/b&gt;&lt;/label&gt;&lt;label id="p3"&gt;*&lt;/label&gt;
                      &lt;input type="date" class="form-control" name="dob" required /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="add"&gt;&lt;span class="glyphicon glyphicon-map-marker"&gt;&lt;/span&gt;&lt;b&gt; Address: &lt;/b&gt;&lt;/label&gt;&lt;label id="p4"&gt;*&lt;/label&gt;
                      &lt;textarea rows="4" cols="33" class="form-control" name="add" id="add" required&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="photo"&gt;&lt;span class="glyphicon glyphicon-camera"&gt;&lt;/span&gt;&lt;b&gt; Photo: &lt;/b&gt;&lt;/label&gt;&lt;label id="p5"&gt;*&lt;/label&gt;
                      &lt;input type="file" name="photo" id="photo" required /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="gen"&gt;&lt;b&gt; Gender: &lt;/b&gt;&lt;/label&gt;&lt;label id="p6"&gt;*&lt;/label&gt;&lt;br/&gt;
                      &lt;input type="radio" name="gender" id="gender" value="M" required="required"&gt;Male
                      &lt;input type="radio" name="gender" id="gender" value="F" required="required"&gt;Female
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="cntry"&gt;&lt;span class="glyphicon glyphicon-map-marker"&gt;&lt;/span&gt;&lt;b&gt; Country: &lt;/b&gt;&lt;/label&gt;&lt;label id="p7"&gt; *&lt;/label&gt;
                          &lt;?php
                              $country="SELECT * from country_master_academic";
                              $res= $conn-&gt;query($country);
                              if($res-&gt;num_rows&gt;0)
                              {
                                  echo '&lt;select name="country" id="country" class="form-control" required&gt;';
                                  echo '&lt;option value=""&gt;Select&lt;/option&gt;';
                                  while($row=$res-&gt;fetch_assoc())
                                  {
                                  echo '&lt;option value='.$row["country_code"].'&gt;'.$row['country_name'].'&lt;/option&gt;';
                                  }
                                  echo '&lt;/select&gt;';
                              } else {
                              echo "0 result";
                          }
                          ?&gt;
  
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="state"&gt;&lt;span class="glyphicon glyphicon-map-marker"&gt;&lt;/span&gt;&lt;b&gt; State: &lt;/b&gt;&lt;/label&gt;&lt;label id="p8"&gt;*&lt;/label&gt;
                      &lt;?php
                          $state = "SELECT * from master_state";
                          $res=$conn-&gt;query($state);
                          if($res-&gt;num_rows&gt;0)
                          {
                              echo '&lt;select name="state" id="state" class="form-control" required&gt;';
                              echo '&lt;option value=""&gt;Select&lt;/option&gt;';
                              while($row=$res-&gt;fetch_assoc())
                              {
                                  echo '&lt;option value='.$row["state_code"].'&gt;'.$row["state_name"].'&lt;/option&gt;';
                              }
                              echo '&lt;/select&gt;';
                          } else {
                              echo "0 result";
                          }
                      ?&gt;
                      &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="city"&gt;&lt;span class="glyphicon glyphicon-map-marker"&gt;&lt;/span&gt;&lt;b&gt; City: &lt;/b&gt;&lt;/label&gt;&lt;label id="p9"&gt;*&lt;/label&gt;
                      &lt;?php
                          $city="SELECT * from master_city";
                          $res=$conn-&gt;query($city);
                          if($res-&gt;num_rows&gt;0)
                          {
                              echo '&lt;select name="city" id="city" class="form-control" required&gt;';
                              echo '&lt;option value=""&gt;Select&lt;/option&gt;';
                              while($row=$res-&gt;fetch_assoc())
                              {
                                  echo '&lt;option value='.$row["city_code"].'&gt;'.$row["city_name"].'&lt;/option&gt;';
                              }
                              echo '&lt;/select&gt;';
                          } else {
                              echo "0 result";
                          }
                      ?&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;button type="submit" name="save" id="save" class="btn btn-info" onclick="validate()"&gt;Save&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-danger" type="button" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>My jquery in home page</p>
  
  <pre><code>    $('.insert_data').click(function(){
                      var vname = $("#name").val();
                      var vmob = $("#mob_no").val();
                      var vdob = $("#dob").val();
                      var vadd = $("#add").val();
                      var vphoto = $("#photo").val();
                      var vgender = $("#gender").val();
                      var vcountry = $("#country").val();
                      var vstate = $("#state").val();
                      var vcity = $("#city").val(); 
  
                      $.ajax({
                          url:"insert.php",
                          method:"post",
                          data: {
                              name:vname,
                              mob_no:vmob,
                              dob:vdob,
                              add:vadd,
                              photo:vphoto,
                              gender:vgender,
                              country:vcountry,
                              state:vstate,
                              city:vcity
                          },
                          success: function(data){
                              $('#form')[0].reset();  
                              $('#add_data_Modal').modal('hide');  
                              $('#stud_insert').html(data);
                          }
                      });
                  });
  </code></pre>
  
  <p>my insert.php page</p>
  
  <pre><code>&lt;?php
  include("connection.php");
  if(!empty($_POST))
  {
      $output = '';
      $name = $_POST['name']);
      $mob = $_POST['mob_no']);
      $dob = $_POST['dob']);
      $add = $_POST['add']);
      $photo = $_FILES['photo']['name']);
      $gender = $_POST['gender']);
      $cn = $_POST['country']);
      $st = $_POST['state']);
      $ct = $_POST['city']);
  
      $qrycn= mysqli_query($conn,"select country_code from country_master_academic where country_name=' ".$cn." ' ");
      $row = mysqli_fetch_array($qrycn);
      $country = $row['country_code'];
  
      $qryst=mysqli_query($conn,"select state_code from master_state where state_name='".$st."'");
      $row = mysqli_fetch_array($qryst);
      $state = $row['state_code'];
  
      $qryct= mysqli_query($conn,"select city_code from master_city where city_name='".$ct."'");
      $row = mysqli_fetch_array($qryct);
      $city = $row['city_code'];
  
      $query = "INSERT INTO stud (stud_name, mobile, dob,address,photo,gender,country,state,city) VALUES('$name', '$mob', '$dob', '$add', '$photo', '$gender', '$country', '$state', '$city')";
      if (mysqli_query($conn, $query)) {
  
                  $target_dir="images/";
          $target_file=$target_dir.basename($_FILES["photo"]["name"]);
          $imageFileType=pathinfo($target_file,PATHINFO_EXTENSION);
          if(move_uploaded_file($_FILES["photo"]["tmp_name"],$target_file)){
              echo '&lt;script language="javascript"&gt;';
              echo 'alert("Image and data Inserted Successfully")';
              echo '&lt;/script&gt;';
          }  else {
              echo '&lt;script language="javascript"&gt;';
              echo 'alert("Cannot upload")';
              echo '&lt;/script&gt;';
          }
      }
      else {
          echo '&lt;script language="javascript"&gt;';
          echo 'alert("Cannot insert record")';
          echo '&lt;/script&gt;';
      }
      $output .= '&lt;label class="text-success"&gt;Data Inserted&lt;/label&gt;';
       $output .= '
              &lt;table class="table table-bordered"&gt;  
                  &lt;tr&gt;  
                       &lt;th&gt;No&lt;/th&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Mobile&lt;/th&gt;
                      &lt;th&gt;Birthdate&lt;/th&gt;
                      &lt;th&gt;Address&lt;/th&gt;
                      &lt;th&gt;Photo&lt;/th&gt;
                      &lt;th&gt;Gender&lt;/th&gt;
                      &lt;th&gt;Country&lt;/th&gt;
                      &lt;th&gt;State&lt;/th&gt;
                      &lt;th&gt;City&lt;/th&gt;
                  &lt;/tr&gt;
  
   ';
      $result=  mysqli_query($conn,"select * from stud s, country_master_academic c, master_state st, master_city ct where s.country=c.country_code and s.state=st.state_code and s.city=ct.city_code");
      while($row = mysqli_fetch_array($result))
   {
    $output .= '
          &lt;tr&gt;  
              &lt;td&gt;&lt;a href="update.php?no='.$row["stud_no"].'"&gt;&lt;button name="edit" value="Edit" style="font-weight:bold;" class="btn btn-warning"&gt;&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt; Edit&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;&lt;button type="submit" style="font-weight:bold;" name="delete" id='.$row["stud_no"].' class="btn btn-danger delete_data"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Delete&lt;/button&gt;&lt;/td&gt;
              &lt;td&gt;&lt;button type="submit" style="font-weight:bold;" name="view" id='.$row["stud_no"].' class="btn btn-success view_data" data-target="#modalDelete" data-toggle="modal"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; View&lt;/button&gt;&lt;/td&gt;
  
          &lt;/tr&gt;
    ';
   }
   $output .= '&lt;/table&gt;';
  }
  echo $output;
      }
  </code></pre>
  
  <p>?></p>