form action is not working insert data ajax with php

Question

I want to Insert the data from database without refresh, Using PHP, MySqli, AJax. but form action is't working. I have one table name is 'tbl_user' and field 'source','source1','source2','adult','child','infant' and also use same name is id please share this idea

**index.php**

<div class="message_box" style="margin:10px 0px;">//ajax Action Massage for use

    <form action='' name="ContactForm" method='post'>

       <select name="source" id="source"  class="custom-select-Source">

           <option selected="selected" disabled="disabled" value="">Source </option>

           <option value="Online">Online</option>

           <option value="Offline">Offline</option>

       </select>

       <div class="custom-select-area">

            <select name="source1" id="source1"  class="custom-select-Source1">

                 <option selected="selected" disabled="disabled" value=""> Source1 </option>

                 <option value="JD">JD</option>

                 <option value="Direct">Direct</option>

                 <option value="Facebook">Facebook</option>

                 <option value="Instagram">Instagram</option>

                 <option value="Inbound">Inbound</option>

                 <option value="Group Departure">Group Departure</option>

                 <option value="Direct Mail">Direct Mail</option>

                 <option value="B2B">B2B</option>

                 <option value="Yuvatrip">Yuvatrip</option>

         </select>

        <input type="text" name="source2" id="source2"   placeholder="Source2" class="input-group-Source2"> 
        </div>

        <input type="number"  name="adult" id="adult"  placeholder="adult" class="adult">

        <input type="number" name="child" id="child"  placeholder="child" class="child">

        <input type="number" name="infant" id="infant"  placeholder="infant" class="infant">

        <p style="text-align: center; margin-top:20px;">

            <button type="submit" id="submit" class="btn btn-default submit-bt">Submit</button>

php script here

php code without ajax working good but i have requirer Ajax with php working

    <?php
        session_start();

        date_default_timezone_set('Australia/Melbourne');

        if(isset($_POST['submit'])){

           $source = mysqli_real_escape_string($conn, $_POST['source']);

           $source1 = mysqli_real_escape_string($conn, $_POST['source1']);

           $source2 = mysqli_real_escape_string($conn, $_POST['source2']);

           $adult = mysqli_real_escape_string($conn, $_POST['adult']);

           $child = mysqli_real_escape_string($conn, $_POST['child']);

           $infant = mysqli_real_escape_string($conn, $_POST['infant']);

           $reg_id = rand();

           $created = date('y-m-d-h-i-s');

    $query = "INSERT INTO tbl_user(source,source1,source2,adult,child,infant,reg_id,created) 

    VALUES('$source','$source1','$source2','$adult','$child','$infant','$reg_id','$created')";

      if(mysqli_query($conn, $query)){

       $_SESSION['reg_id']=$reg_id;

       header('Location:index.php');

         }  
      }
 ?>

ajax script here is not proper working not good

$(document).ready(function() {

   var delay = 2000;

   $('.btn-default').click(function(e){

   e.preventDefault();

   // youse source field

   var source = $('#source').val();

   if(source == ''){

   $('.message_box').html(

   '<span style="color:red;">Enter Your source!</span>'
   );

   $('#source').focus();

   return false;
   }

  //use for  source1 field

   var source1 = $('#source1').val();

   if(source1 == ''){

   $('.message_box').html(

   '<span style="color:red;">Enter Your source1!</span>'
   );
   $('#source1').focus();

   return false;
   }

 //use for  source2 field

   var source2 = $('#source2').val();

   if(source2 == ''){

   $('.message_box').html(

   '<span style="color:red;">Enter Your source2!</span>'
   );

   $('#source2').focus();

   return false;
   }

   //use for  adult field

   var adult = $('#adult').val();

   if(adult == ''){

   $('.message_box').html(

   '<span style="color:red;">Enter Your adult!</span>'
   );

   $('#adult').focus();

   return false;
   }

   //use for  child field

   var child = $('#child').val();

   if(child == ''){

   $('.message_box').html(

   '<span style="color:red;">Enter Your child!</span>'
   );

   $('#child').focus();

   return false;
   }

   //use for  infant field

   var infant = $('#infant').val();

   if(infant == ''){

   $('.message_box').html(

   '<span style="color:red;">Enter Your infant!</span>'
   );

   $('#infant').focus();

   return false;
   }

//use for  ajax Action  

   $.ajax
   ({
   type: "POST",

   url: "index.php",

   data: "source="+source+"source1="+source1+"source2="+source2+"adult="+adult+"child="+child+"infant="+infant,

   beforeSend: function() {

   $('.message_box').html(

   '<img src="Loader.gif" width="25" height="25"/>'
   );

   },        
   success: function(data)
   {
   setTimeout(function() {

   $('.message_box').html(data);

   }, delay);

   }
   });
   });

});

Answer 1

You are trying to make a POST request using the AJAX but you are sending the data as string which causing the problem, Try this way,

$.ajax
   ({
   type: "POST",

   url: "index.php",
    dataType: "json",
   data:{
       "source":source,
       "source1":source1,
       "source2":source2,
       "adult":adult,
       "child":child,
       "infant":infant
   }, 

   beforeSend: function() {

   $('.message_box').html(

   '<img src="Loader.gif" width="25" height="25"/>'
   );

   },        
   success: function(data)
   {
   setTimeout(function() {

   $('.message_box').html(data);

   }, delay);

   }
   });
   });