javascript - insert into mysql database without refreshing page using ajax not working

Question

i try to insert some data into a mysql db table without refreshing page so i write this script to send the data to a php page that contain the query that will be executed by clicking the submit button the success function is executed ""the input feilds become empty "" but the php file seem to be not executed

   <?php
    $idst=$_GET['idst'];
    $idusr = $_SESSION['user_session'];
    $auth_user->viewReservations($idst,$idusr);
    ?>
    <!--******* add reservation ******-->    
    <tr>     
      <form >
            <td><input required type="text" id="client" name="title"></td>
            <td><input required type="text" id="tel" name="tel"></td>
            <td><input required type="date" id="start" placeholder="yy-MM-dd" 
            name="start"></td>
            <td><input required type="date" id="end" placeholder="yy-MM-dd" 
            name="end"></td>  
            <td><input required type="number" id="prix" name="prix"></td>
            <td></td>
            <td><input type ="submit" id="submit_reservation" class="btn btn-
 info" 
            name="submit" value="ajouter" style="width: 70px"></td>
            <td></td>
       </form>
          </tr>
         </table>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script>
    $(document).ready(function(){
    $("#submit_reservation").click(function()
    {
    var client =$("#client").val();
    var tel =$("#tel").val();
    var start =$("#start").val();
    var end =$("#end").val();
    var prix =$("#prix").val();
    var idst=<?php echo json_encode($idst); ?>;
    var idusr=<?php echo json_encode($idusr); ?>;
    $. ajax(
    {
    url: "addreserv.php",
    type: "POST",
    cache: false,
    data: {
    "done": 1,
    "client" :client,
    "tel" : tel,
    "start": start,
    "end": end,
    "prix":prix,
    "idst":idst,
    "idusr":idusr
    },
    success: function(data)
    {
    $("#client").val('');
    $("#tel").val('');
    $("#start").val('');
    $("#end").val('');
    $("#prix").val('');
    }
    })
    });
    });
    </script>

and this is the php file to execute the query using the data sended from this page

<?php
/*require_once("session.php");*/
require_once("class.user.php");
if (isset($_POST['done']))
{
$adder = new USER();
$client=$_POST['client'];
$tel=$_POST['tel'];
$start=$_POST['start'];
$end=$_POST['end'];
$prix=$_POST['prix'] ;
$idst=$_post['idst'];
$idusr = $_POST['idusr'];
$adder->addReservation($client,$tel,$start,$end,$prix,$idst,$idusr);
}
?>

Answer 1

Add a id to the form and prevent the form submit.

<tr>     
  <form id="reservation_form">
        <td><input required type="text" id="client" name="title"></td>
        <td><input required type="text" id="tel" name="tel"></td>
        <td><input required type="date" id="start" placeholder="yy-MM-dd" 
        name="start"></td>
        <td><input required type="date" id="end" placeholder="yy-MM-dd" 
        name="end"></td>  
        <td><input required type="number" id="prix" name="prix"></td>
        <td></td>
        <td><input type ="submit" id="submit_reservation" class="btn btn-info" 
        name="submit" value="ajouter" style="width: 70px"></td>
        <td></td>
   </form>
</tr>

$("#reservation_form").submit(function(event){
  event.preventDefault();
... Your logic ... 

}