Question

我有一个MODAL，它通过PHP echo保存来自DB的动态内容。

此模态是一个表单，当我点击提交时，它应该保留在该模态中。目前我在动作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>

在这里，您不会被重定向到另一个页面......您将获得Modal本身的响应。

PHP提交表单并留在表单上并附上成功消息

1 个答案: