ajaxが動作していないページをリフレッシュせずにmysqlデータベースに挿入

Question

私は、 ページをリフレッシュせずにmysql dbテーブルにデータを挿入しようとしています。このスクリプトを書いて実行するクエリを含むPHPページにデータを送ります成功関数が実行され、送信ボタン「」入力feildsが空になる「」しかし、PHPファイルをクリックすることで

<?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> 

を実行していないように見える、これはからsendedではデータを使用してクエリを実行するためのPHPファイルでありますこのページ

<?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

フォームにIDを追加して、フォームの送信を防止します。

<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 ... 

}