My form is not sending data correctly using Ajax, how can I fix it?

Question

I want to send the data that is in the form to my database using Ajax and depending on the action of the button it will execute the url I need, but It doesn't seem to be working because It only sends zero like as if the form were completely empty

HTML

<form method="post" id="form_shirt" enctype="multipart/form-data">
  ID:
  <br>
  <input type="hidden" name="id_shirt" id="id_shirt" class="form-control"> Name:
  <br>
  <input type="text" name="name_shirt" id="name_shirt" class="form-control" required="required"> Price:
  <br>
  <input type="text" name="price_shirt" id="price_shirt" class="form-control" required="required">

  <button id="insert_shirt" class="submit" name="btninsert" id="btninsert" value="Insert" />
  <button id="update_shirt" class="submit" name="btnupdate" id="btnupdate" value="Update" />
  <button id="delete_shirt" class="submit" name="btndelete" id="btndelete" value="Delete" />
</form>

JavaScript

$(document).ready(function() {
  $('.submit').on("click", function() {
    $.ajax({
      url: this.id + ".php",
      method: "POST",
      data: $('#form_shirt').serialize(),
      contentType: false,
      cache: false,
      processData: false,
      success: function(data) {
        $('#form_shirt)[0].reset();
        $('#table_shirt').html(data);
      }
    });
  });
});

PHP

<?php

$connect = mysqli_connect("localhost", "root", "", "shirts");

 $output = '';
    $name_shirt = mysqli_real_escape_string($connect, $_POST["name_shirt"]);  
    $price_shirt = mysqli_real_escape_string($connect, $_POST["price_shirt"]);  

    $query = "INSERT into shirts ( name, price)
    VALUES ('$name_shirt','$price_shirt') ";
    if(mysqli_query($connect, $query))
    {
     $output .= '<label class="text-success">Data Inserted</label>';
     $select_query = "SELECT id_shirt, name, price FROM shirts";
     $result = mysqli_query($connect, $select_query);
     $output .= '
      <table id="shirts" class="table table-bordered">  
                   <thead>
                    <tr>  
                        <th>ID</th>
                        <th>NAME</th>
                        <th>PRICE</th>
                    </tr>
</thead>
     ';
     while($row = mysqli_fetch_array($result))
     {
      $output .= '
       <tr>  
       <tbody>
                         <td>' . $row["id_shirt"] . '</td>
                         <td>' . $row["name"] . '</td>
                         <td>' . $row["price"] . '</td>
                    </tr>
                    </tbody>
      ';
     }
     $output .= '</table>';
    }
    echo $output;

?>

Answer 1

Are you aware that all your button s have their id declared twice?

<button id="insert_shirt" class="submit" name="btninsert" id="btninsert" value="Insert" />

This may very well be the cause for your misfire, because it will try to POST to a URL that doesn't exist, returning an empty value.

Also, button s have both opening and closing tags.
I think the line below should be sufficient for your goal:

<button type="button" id="insert_shirt" class="submit">Insert</button>

• I added type="button" . If you don't declare a type , the browser will choose for you, and since the button is inside a form, it will probably become type="submit" , which you don't want because you're using Ajax.
  In the codepen below I didn't add a type, and as you can see the form is submitted when you click one of the buttons.
• I removed both name="btninsert" and value="Insert" , I assume you don't use the value in you PHP script, which probably means you also don't need the name .

Check this pen to see it in action: https://codepen.io/anon/pen/MoNXYj?editors=1010
(You can actually use the buttons, CodePen will simulate the submit action for you)

---

UPDATE

This may be a bit naive and/or ignorant of me, but if you're still having problems a simpler solution might be to change your set-up a bit so that all elements and code work in the same form-submitting-type-direction. You are now using elements for sync submitting and counteracting that with code for async submitting .

HTML:

<div id="form_shirt">
  <input type="hidden" name="id_shirt" id="id_shirt" class="form-control"><br>
  Name: <input type="text" name="name_shirt" id="name_shirt" class="form-control" required="required"><br>
  Price: <input type="text" name="price_shirt" id="price_shirt" class="form-control" required="required">
  <br><br>
  <button type="button" id="insert_shirt" class="submit">Insert</button>
  <button type="button" id="update_shirt" class="submit">Update</button>
  <button type="button" id="delete_shirt" class="submit">Delete</button>
</div>

JS:

$(document).ready(function() {
  $('.submit').on("click",function() {
    $.post(this.id+".php", {
      id_shirt: $('#id_shirt').val(),
      name_shirt: $('#name_shirt').val(),
      price_shirt: $('#price_shirt').val()
    }, function(data) {
      $('#form_shirt .form-control').val("");
      $('#table_shirt').html(data);
    });
  });
});

codepen: https://codepen.io/anon/pen/bRXKaV?editors=1011
(Note that this will not produce any output, because there is no form submitted, only the Ajax POST to a URL that doesn't exist and therefor doesn't return a response)