Data from form submit fail to insert in database row

Question

I am trying to insert a new product in my products database using ajax php and mysql, pdo. The form lies in a different html file and is loaded in a bootstrap modal as soon as i press the add product button.

Below is the form

<div class="container">
     <form class="form" id="insert-product" method="POST">
              <div class="form-group">
                  <label class="form-label" for="name">Product Title</label>
                  <input type="text" class="form-control" id="title" name="ptitle"  tabindex="1" required>
              </div>              
               <div class="form-group">
                  <label class="form-label" for="message">Product Description</label>
                  <input type="text" class="form-control" id="desc" name="description" tabindex="2" required>                               
              </div>
              <div class="form-group">
                  <label class="form-label" for="email"> Price</label>
                  <input type="text" class="form-control" id="price" name="price" tabindex="2" required>
              </div>                            
              <div class="form-group">
                  <label class="form-label" for="subject">Picture of Product</label>
                  <input type="text" class="form-control" id="subject" name="picture"  tabindex="3">
              </div>                            

              <div class="text-center">
                  <button type="submit" name="submit" class="btn btn-start-order">SAVE</button>
              </div>
          </form>
      </div>
  </div>

This is the script which uses ajax to contact the php file. readProducts() is a simple function which fetch the data from the database.

   $('#insert-product').on('submit', function(event) {
           event.preventDefault();
           $.ajax({
                    url: 'insertPro.php',
                    type: 'POST',
                    data: $('#insert-product').serialize(),
                    success: function(data) {

                        readProducts();
                    }

                 });
       })

This is the php file that inserts the data into the database. The connect.php is tested and working correctly.

<?php 
require_once('connect.php');

if (!empty($_POST)) {
    $response = array();

    $query = "insert into products(id,name,description,img_file,price) values(:title, :description, :picture, :price)";
    $stmt = $DBcon->prepare( $query );

    $stmt->bindParam(':title', $title);
    $stmt->bindParam(':description', $description);
    $stmt->bindParam(':picture', $picture);
    $stmt->bindParam(':price', $price);

    $title = $_POST["ptitle"];
    $description = $_POST["description"];
    $price = $_POST["price"];
    $picture = $_POST["picture"];

    $stmt->execute();

    if ($stmt) {
        $response['status']  = 'success';
        $response['message'] = 'Product Deleted Successfully ...';
    } else {
        $response['status']  = 'error';
        $response['message'] = 'Unable to delete product ...';
    }
}

This is my connect file.

<?php

    $DBhost = "localhost";
    $DBuser = "root";
    $DBpass = "";
    $DBname = "test";

    try{

        $DBcon = new PDO("mysql:host=$DBhost;dbname=$DBname",$DBuser,$DBpass);
        $DBcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    }catch(PDOException $ex){

        die($ex->getMessage());
    }

?>

When i press the button to submit the data, ajax refreshes as it should but the record is not added in the table of my database.

Answer 1

I assume the id column of the products table is an autoincrement column.

In that case you either leave it OFF the column list OR give it a value of NULL

So either

$query = "insert into products(name,description,img_file,price) 
                        values(:title, :description, :picture, :price)";

Or

$query = "insert into products(id,name,description,img_file,price) 
                        values(NULL, :title, :description, :picture, :price)";

Also at the end of this script you build a response but you never actually send it back to the AJAX Call

$stmt->execute();

if ($stmt) {
    $response['status']  = 'success';
    $response['message'] = 'Product Deleted Successfully ...';
} else {
    $response['status']  = 'error';
    $response['message'] = 'Unable to delete product ...';
}
// add this line
echo $json_encode($response);

Then is you add dataType: 'JSON', to you AJAX parameters, you can process the results in data as a javascritp object

    $.ajax({
        url: 'insertPro.php',
        type: 'POST',
        data: $('#insert-product').serialize(),
        dataType: 'JSON',