MySQL data not posting from form via ajax

Question

I am having issues with my form, it is not posting to MySQL. I am not sure why its not grabbing the data.

Below is my form data with ajax statements:

<div class="container">

    <h2>Add New Asset</h2>
    <form method="post" class='addasset'>
    <table>
        <tr>
                <th>Internal ID:</th>
                <td><input type="text" name="internalid" id="internalid"></td>
        </tr>

    </table>
   
     <input type="button" value="Add" id="Add">
     <input type="reset" value="Cancel" onclick="window.location.href='assetlist.php';">
    </form>
</div>

<script type="text/javascript">



    $(document).ready(function(){

        $('#Add').click(function(event){

        event.preventDefault();
        
        var data = $('.addasset').serialize();
        
        
        var internalid = $("[name='internalid']").val();
                   

if (internalid === "") {$("[name='internalid']").css({"background":"red", "color":"white"});}
  
 else {
    
            $(this).attr("disabled", true);
                       
         $.ajax ({

            data:data,

            url:'processor-assetnew.php',

            type:'post'

        });
        
      function redirect(){

        window.location.href='assetlist.php';

      }
      setTimeout(redirect,500);
 } 

    });
    });
</script>

My processor file is as follows:

<?php

require 'wconnectionfile.php';

$internalID = $_POST['internalid'];

if (!empty($internalID)) {


$sql = "INSERT INTO equipmentlist (InternalID)
VALUES ('$internalID'')";   

}

if ($conn->query($sql) === TRUE) {


}


} else {

    echo "Error: " . $sql . "<br>" . $conn->error;

}

$conn->close();

?>

I have a bunch of variables but I shortened it just for testing. All my variables below, but even with just the one form variable and one post variable, it doesn't populate inside MySQL.

The below is just original / informational purposes:

$ID = mysql_insert_id();
$internalID = $_POST['internalid'];
$reg_date = $_POST['reg_date'];
$year = $_POST['year'];
$make = $_POST['make'];
$model = $_POST['model'];
$vin = $_POST['vin'];
$type = $_POST['type'];
$location = $_POST['location']
$buassigned = $_POST['buassigned'];
$camera = $_POST['camera'];
$remarks = $_POST['remarks'];


// Lookup Next ID

 $sql = "SELECT * FROM equipmentlist ORDER BY ID DESC LIMIT 1"; 

      $result = $conn->query($sql);
        
          if ($result->num_rows > 0) {           
            
            while($row = $result->fetch_assoc()) { $ID = $row['ID'] + '1' ;   }}
            


if (!empty($internalID)) {


$sql = "INSERT INTO equipmentlist (Year, Make, Model, VIN, Type, Location, BUAssigned, Camera, Remarks, InternalID. Reg_Date, ID)

            VALUES ('$year','$make','$model','$vin','$type','$location','$buassigned','$camera','$remarks','$internalID','$reg_date' '$ID')";   

Answer 1

In the snippet below, instead of sending the data and redirecting, I do a console.log for both. The result is

 $(document).ready(function(){ $('#Add').click(function(event){ event.preventDefault(); var data = $('.addasset').serialize(); var internalid = $("[name='internalid']").val(); if (internalid === "") {$("[name='internalid']").css({"background":"red", "color":"white"});} else { $(this).attr("disabled", true); /*$.ajax ({ data:data, url:'processor-assetnew.php', type:'post' });*/ console.log(data); function redirect(){ //window.location.href='assetlist.php'; console.log("redirecting..."); } setTimeout(redirect,500); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="container"> <h2>Add New Asset</h2> <form method="post" class='addasset'> <table> <tr> <th>Internal ID:</th> <td><input type="text" name="internalid" id="internalid"></td> </tr> </table> <input type="button" value="Add" id="Add"> <input type="reset" value="Cancel" onclick="window.location.href='assetlist.php';"> </form> </div>

So, your data is grabbed and sent to the server. This means that your issue is on the server-side. You will need to make sure that you are posting at the right place and if so, try running

echo var_dump($_POST);

in your dev env to see what the issue is.

Answer 2

I change you code to this let me know if you have any question.

EDIT: Okay thank for your concern i think this is the easy way or better way to pass data from ajax to mysql php because if you need to add another data like input textbox no need to declare it or get via ID the new FormData($(this)[0]) will do it for you. thanks

<div class="container">

<h2>Add New Asset</h2>
<form method="post" class='addasset'>
<table>
    <tr>
            <th>Internal ID:</th>
            <td><input type="text" name="internalid" id="internalid"></td>
    </tr>

</table>

 <input type="submit" value="Add" id="Add">
 <input type="reset" value="Cancel" onclick="window.location.href='assetlist.php';">
</form>

$(document).ready(function(){
    $("#addasset").submit(function (event) { 
       event.preventDefault();
       var formData = new FormData($(this)[0]);
       var internalid = $("[name='internalid']").val();
                   
       if (internalid === "") {
       $("[name='internalid']").css({"background":"red", "color":"white"});
       }
       else {
       $(this).attr("disabled", true);
          $.ajax({
                url: 'processor-assetnew.php',
                type: 'POST',
                data: formData,
                async: true,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) 
                {
                 window.location.href='assetlist.php';
                }
 });
    });