Issue in inserting data into database by ajax and php

Question

I used Jquery and ajax to insert data into database, I can't insert any record into database by using ajax, jquery and php. I think the part of ajax is working, just it can't save the data in to database what is the problem with php.

 <!-- JavaScript and Ajax code -->
 <script>
  $(document).ready(function(){
  $('#addrecord').click(function(event){
  event.preventDefault();
  $.ajax({
   url: "new.php",
   type:"post",
   data: $("#addnewteamform").serialize(),
   success: function(data){
    $('form').trigger("reset");
   }
   });
   });
   });
   </script>

  <!-- HTML Plus Form code -->
  <form id="addnewteamform">
  <h4 style="font-family: Times New Roman, Times, serif;">ID</h4>
  <input class="form-control" name="id" id="id"  style="margin- 
  left:100px; 
  background: url(icons/id.png) no-repeat scroll 5px 5px; padding- 
  left:35px;
  border-radius: 6px 6px 6px 6px; width:360px; margin-top:-40px;"  
  type="text" placeholder="Your ID Here">
  <br>
  <h4 style="font-family: Times New Roman, Times, serif;">Name</h4>
  <input class="form-control" name="name"  style="margin-left:100px; 
   width:360px; background: url(icons/name2.png) no-repeat scroll 5px 
   5px; 
   padding-left:35px; border-radius: 6px 6px 6px 6px; margin-top:-40px;"  
  type="text" placeholder="Your Name Here">
  <br>
  <h4 style="font-family: Times New Roman, Times, serif;">Position</h4>
  <input class="form-control" name="position" style="margin-left:100px; 
  width:360px;  background: url(icons/position.png) no-repeat scroll 5px 
  5px; padding-left:35px; border-radius: 6px 6px 6px 6px; margin- 
  top:-40px; 
  "  type="text" placeholder="Your Position Here">
 <div class="custom-file"  style="margin-left:100px; width:360px; border- 
  radius: 6px 6px 6px 6px; margin-top:-40px;">
 <input type="file" name="teamimage"  class="custom-file-input" 
 id="customFile" >
 <label class="custom-file-label" for="customFile" style="background: 
 url(icons/upload.png) no-repeat scroll 5px 5px; padding-left:35px;">Upload 
 Image</label>
 </div>
 <h4 style="font-family: Times New Roman, Times, serif; margin- 
  top:-25px;">Image</h4>
 <br>
 <h4 style="font-family: Times New Roman, Times, serif;">Facebook</h4>
 <input class="form-control" name="fblink" style="margin-left:100px; 
  width:360px; border-radius: 6px 6px 6px 6px; margin-top:-40px; background: 
  url(icons/facebook.png) no-repeat scroll 5px 5px; padding-left:30px;"  
  type="text" placeholder="Your Facebook link Here"> 
 <br>
 <h4 style="font-family: Times New Roman, Times, serif;">Twitter</h4>
 <input class="form-control" name="twlink" style="margin-left:100px; 
 width:360px; border-radius: 6px 6px 6px 6px; margin-top:-40px; background: 
 url(icons/twitter.png) no-repeat scroll 5px 5px; padding-left:35px;""  
  type="text" placeholder="Your Twitter link Here"> 
 <br>
 <h4 style="font-family: Times New Roman, Times, serif;">Google Plus</h4>
 <input class="form-control" name="gplink" style="margin-left:100px; 
 width:360px; background: url(icons/googleplus.png) no-repeat scroll 5px 
 5px; padding-left:35px; border-radius: 6px 6px 6px 6px; margin-top:-40px;"  
 type="text" placeholder="Your Google Plus link Here"> 
<br>
<button type="submit" name="addrecord" id="addrecord" class="btn btn- 
 primary"  style="margin-left:100px;">Add Record</button>
   </form>

PHP code -> new.php page-->

   <?php
    include "Config.php";
    $id=$_POST['id'];
    $name=$_POST['name'];
    $position=$_POST['position'];
    $image=$_FILES['teamimage']['name'];
    $imagetmpname=$_FILES['teamimage']['tmp_name'];
    $folder='images/';
    move_uploaded_file($imagetmpname,$folder.$image);
    $fblink=$_POST['fblink'];
    $twlink=$_POST['twlink'];
    $gplink=$_POST['gplink'];
    $sql="INSERT INTO ourteam(id, name, position, image, facebook, 
    twitter, googleplus) VALUES 
    ('$id','$name','$position','$image','$fblink','$twlink','$gplink')";

   $result=mysqli_query($db,$sql);
   if($result)
   {
      echo "true";
   }else
   { 
    echo "false"; 
   }
   ?>

Please make clear what is the problem. thanks.

Answer 1

1. In your form there is no element with id $('#addrecord').click(function(event){})
2. There is only there element which is id,name,position is sending by ajax but in php you are trying to access. you have not defined these element in you document. If you need these element then try to add first then try to sending to data to the server.

On the other hand you are using ajax and sending image binary file which is still not there but you are using these $image=$_FILES['teamimage']['name'];

In the worst case try to console log your ajax return message and try to see what error actually php sending.

$fblink=$_POST['fblink'];
$twlink=$_POST['twlink'];
$gplink=$_POST['gplink'];
$image=$_FILES['teamimage']['name'];
$imagetmpname=$_FILES['teamimage']['tmp_name'];

Try with only three element it's working.

<!DOCTYPE html>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
<body>

<!-- JavaScript and Ajax code -->
 <script>
  $(document).ready(function(){
  $('#addrecord').click(function(event){
  event.preventDefault();
  $.ajax({
   url: "new.php",
   type:"post",
   data: $("#addnewteamform").serialize(),
   success: function(data){

    console.log(data);
    $('form').trigger("reset");
   }
   });
   });
   });
   </script>

  <!-- HTML Plus Form code -->
 <form id="addnewteamform">
   <h4 style="font-family: Times New Roman, Times, serif;">ID</h4>
   <input class="form-control" name="id" id="id"  style="margin- 
      left:100px; 
      background: url(icons/id.png) no-repeat scroll 5px 5px; padding- 
      left:35px;
      border-radius: 6px 6px 6px 6px; width:360px; margin-top:-40px;"  
      type="text" placeholder="Your ID Here">
   <br>
   <h4 style="font-family: Times New Roman, Times, serif;">Name</h4>
   <input class="form-control" name="name"  style="margin-left:100px; 
      width:360px; background: url(icons/name2.png) no-repeat scroll 5px 
      5px; 
      padding-left:35px; border-radius: 6px 6px 6px 6px; margin-top:-40px;"  
      type="text" placeholder="Your Name Here">
   <br>
   <h4 style="font-family: Times New Roman, Times, serif;">Position</h4>
   <input class="form-control" name="position" style="margin-left:100px; 
      width:360px;  background: url(icons/position.png) no-repeat scroll 5px 
      5px; padding-left:35px; border-radius: 6px 6px 6px 6px; margin- 
      top:-40px; 
      "  type="text" placeholder="Your Position Here">
   <input type = "button" id = "addrecord" value = "submit"/>
</form>
</body>
</html>