PHP提交表單並留在表單上，​​並顯示成功消息

Question

我有一個MODAL，它通過PHP回顯保存來自數據庫的動態內容。

這種模態是一種形式，當我點擊提交它應該停留在該模態。目前我在動作PHP文件中有一個標題（LOCATION：..）。這個頭功能推回到原來的頁面，我失去了我的會話。

我想在MODAL中使用成功消息進行無聲提交。還不確定如何完成。

下面是我到目前爲止的代碼。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 

<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#myModal">Add</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg" role="document"> 
    <?php foreach ($campaignHeader as $CampFormrow){?> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Insert Data 
      <?php echo "$CampFormrow[CAMPAIGN_DESCRIPTION]";?>/ID: 
      <?php echo $_GET["ID"]; ?> 
     </h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 

     /* Below is the FORM START */ 
     <form action="/includes/KPIinsert.inc.php" method="post" id="InsertKPIForm"> 
      <div class="form-group"> 
      <legend>Brand</legend> 
      <input type="text" class="form-control" name="KPIbrand" value="Test" id="KPIvalue" placeholder="JAGUAR" readonly="readonly" style="width:50%;"> 
      </div> 
      <div class="form-group"> 
      <legend>Nameplate</legend> 
      <input type="text" class="form-control" name="KPInameplate" value="testItem" id="KPInameplate" placeholder="testItem" readonly="readonly" style="width:50%"> 
      </div> 
      <div class="form-group"> 
      <legend>Campaign ID</legend> 
      <input type="text" class="form-control" name="KPIcampaignID" value="<?php echo " $CampFormrow[CAMPAIGN_ID] ";?>" id="KPIcampaignID" placeholder="<?php echo " $CampFormrow[CAMPAIGN_ID] ";?>" readonly="readonly" style="width:50%"> 
      </div> 
      <div class="form-group"> 
      <legend>KPI value</legend> 
      <input type="number" class="form-control" name="KPIvalue" id="KPIvalue" placeholder="Numbers only"> 
      </div> 
      <fieldset class="form-group"> 
      <legend>Select Market for KPI</legend> 
      <div class="form-check"> 
       <label class="form-check-label"> 
       <input type="radio" class="form-check-input" name="KPImarket" id="KPImarket" value="DE" checked> Germany 
       </label> 
      </div> 
      <div class="form-check"> 
       <label class="form-check-label"> 
       <input type="radio" class="form-check-input" name="KPImarket" id="KPImarket" value="IT" checked> Italy 
       </label> 
      </div> 

      </fieldset> 
      <div class="form-group"> 
      <legend>Additional Information</legend> 
      <input type="text" class="form-control" name="KPInotes" id="KPInotes" placeholder="Notes here"> 
      </div> 
      <div class="modal-footer"> 
      <div class="form-group"> 
       <button class="btn btn-secondary" id="KPIdataInsert" name="KPIdataInsert" type="submit">Submit</button> 
      </div> 
      </div> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     Successfully transmitted 
     </div> 
    </div> 
    <?php }?> 
    </div> 
</div> 

Answer 1

進行Ajax調用以提交表單。

例子：

<script> 
    $("#InsertKPIForm").submit(function(e){ 
     e.preventDefault(); 
     $.ajax({ 
      url: "/includes/KPIinsert.inc.php", 
      type: "POST", 
      data: forData, 
      success: function(res){ 
       alert("Successfully Submitted the Form"); 
      }, 
      error: function(err){ 
       alert("Form Not Submitted. Try Again later !!!"); 
      } 
     }); 
    }); 

</script> 

在這裏，你將不會被重定向到另一個網頁...您將獲得的模態本身的響應。