PHPはフォームを送信し、成功メッセージと共にフォームにとどまる

Question

私は、PHPエコーを介してDBから来る動的コンテンツを保持するMODALを持っています。

このModalはフォームであり、SubmitをクリックするとそのModalにとどまるはずです。現時点では、アクション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> 

、あなたは別のページにリダイレクトされることはありません...あなたはモーダル自体の応答を取得します。