jQuery PHP 添加多个文本框并使用序列化形式通过 ajax 将它们发送到 php

Question

编辑

现在我可以在网络选项卡上看到错误：

注意：未定义索引：C:\wamp64...\addMedInfo.php 中的药物 ID 8号线

我创建了一个表格，我在其中指定了一次药物名称和有效期，然后添加所有具有相同名称和相同有效期的药物，但当然使用不同的条形码，如 sn 所示-p 下面：

  $(document).ready(function()
  {
    $("button.clone").on("click", clone);
    $("button.remove").on("click", remove);

    $("#sub").on('submit', function()
    {
      $.ajax({
        url: '../php/addMedInfo.php',
        type: 'post',
        data: send_data.serialize(),
        dataType: 'TEXT',
        success:function(resp)
        {

        },
        error:function(resp)
        {
          console.log(resp);
        }
      })
    })
  });

  var regex = /^(.+?)(\d+)$/i;

  function clone() {
    var cloneIndex = $(".clonedInput").length;
    $(".rounded").find("#clonedInput1").clone().insertAfter(".clonedInput:last").attr("id", "clonedInput" +  (cloneIndex+1));
  }

  function remove() {
    $(".rounded").find(".clonedInput:last").remove();
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row justify-content-center">
    <div class="col-sm-12 ">
    <form name="send_data">
      <div class="col-sm-6">
          <label for="medication_id">Medication</label>
            <fieldset class="form-group">
              <select class="form-control select" name="medication_id" id="medication_id">
                <option value="select">Select</option>
                <?php foreach($getExecGetMedications as $res) { ?>
                <option value="<?php echo $res['med_id'] ?>"><?php echo $res['med_name'] ?></option>
                <?php } ?>
              </select>
            </fieldset>
        <!-- End class="col-sm-6" -->
        </div>
        <div class="col-sm-6">
          <label for="expiry_date">Expiry Date</label>
            <fieldset class="form-group">
              <input type="date" class="form-control" name="expiry_date" id="expiry_date">
            </fieldset>
        <!-- End class="col-sm-6" -->
        </div>
    </div>
  </div>
  <div class="col-sm-6 rounded" style="background-color: #D3D3D3">
    <div class="row clonedInput" id="clonedInput1">
      <div class="col-sm-3">
        <label for="barcode">barcode</label>
          <fieldset class="form-group">
            <input type="text" class="form-control" name="barcode" id="barcode">
          </fieldset>
      <!-- End class="col-sm-6" -->
      </div>
      <div class="col-sm-3">
        <label for="medication_quantity">Nbr of tablets</label>
          <fieldset class="form-group">
            <input type="number" class="form-control" name="medication_quantity" id="medication_quantity">
          </fieldset>
      <!-- End class="col-sm-6" -->
      </div>
      <div class="col-sm-3">
        <label for="medication_pill">Nbr of Pills</label>
          <fieldset class="form-group">
            <input type="number" class="form-control" name="medication_pill" id="medication_pill">
          </fieldset>
      <!-- End class="col-sm-6" -->
      </div>
      <!-- End class="col-sm-6" -->
      </form>
    </div>

    <div class="actions pull-right">
      <button class="btn btn-danger clone">Add More</button> 
      <button class="btn btn-danger remove">Remove</button>
    </div>

  <!-- End class="col-sm-4" -->
  </div>
  <button class="btn btn-danger" type="Submit" id="sub">Submit</button> 
  </form>

实际上，我可以根据需要添加任意数量的文本框，所以如果我有 5 个名称和有效期相同的药物，我可以添加 4 个 div，然后添加带有片剂和药丸数量的条形码，然后单击 sumbit 按钮将它们发送到我的数据库：

<?php
error_reporting(E_ALL);
ini_set('display_error', 1);
require_once('../php/connection.php');

$clinic_id = $_SESSION['clinic_id'];

$medication_id = $_POST['medication_id'];
$expiry_date = $_POST['expiry_date'];
$barcode = $_POST['barcode'];
$medication_quantity = $_POST['medication_quantity'];
$medication_pill = $_POST['medication_pill'];

$addMed = "INSERT INTO med_pharmacy(med_id, med_barcode, med_received, med_expiry,
           med_tablet, med_pill, clinic_id)
           VALUES(:med_id, :med_barcode, :med_received, :med_expiry, :med_tablet, :med_pill, :clinic_id)";
$execAddMed = $conn->prepare($addMed);
$execAddMed->bindValue(':med_id', $medication_id);
$execAddMed->bindValue(':med_barcode', $barcode);
$execAddMed->bindValue(':med_received', now('Y-m-d H:i:s'));
$execAddMed->bindValue(':med_expiry', $expiry_date);
$execAddMed->bindValue(':med_tablet', $medication_quantity);
$execAddMed->bindValue(':med_pill', $medication_pill);
$execAddMed->bindValue(':clinic_id', $clinic_id);
$execAddMed->execute();
?>

这是截图：

现在的问题是，当我单击提交按钮时，没有任何反应，没有任何内容添加到数据库中，并且控制台和开发工具的网络选项卡上也没有显示错误。

Answer 1

我对您的 html 进行了一些重组，因为它的结构不正确。有一些不正确放置的结束 div 标记。

我还为您的表单分配了一个 ID，该 ID 在 javascript on submit 中调用，而不是按钮的 ID sub。

在您分配send_data 的data 参数中，这不是正确的参数。你需要表单的数据，所以我改成$(this).serialize()。

正如您在我的 sn-p 中看到的，我记录了正在发送的数据。

$(document).ready(function() {
  $("button.clone").on("click", clone);
  $("button.remove").on("click", remove);

  $("#form").on('submit', function(e) {
    console.log("Fire request!");
    console.log($(this).serialize());
    e.preventDefault(); // Remove this line in production, just for demonstration purpose
    $.ajax({
      url: '../php/addMedInfo.php',
      type: 'post',
      data: $(this).serialize(),
      dataType: 'TEXT',
      success: function(resp) {

      },
      error: function(resp) {
        console.log(resp);
      }
    })
  })
});

var regex = /^(.+?)(\d+)$/i;

function clone() {
  var cloneIndex = $(".clonedInput").length;
  $(".rounded").find("#clonedInput1").clone().insertAfter(".clonedInput:last").attr("id", "clonedInput" + (cloneIndex + 1));
}

function remove() {
  $(".rounded").find(".clonedInput:last").remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row justify-content-center">
  <div class="col-sm-12 ">
    <form name="send_data" id="form">
      <div class="col-sm-6">
        <label for="medication_id">Medication</label>
        <fieldset class="form-group">
          <select class="form-control select" name="medication_id" id="medication_id">
                <option value="select">Select</option>
                <?php foreach($getExecGetMedications as $res) { ?>
                <option value="<?php echo $res['med_id'] ?>"><?php echo $res['med_name'] ?></option>
                <?php } ?>
              </select>
        </fieldset>
        <!-- End class="col-sm-6" -->
      </div>
      <div class="col-sm-6">
        <label for="expiry_date">Expiry Date</label>
        <fieldset class="form-group">
          <input type="date" class="form-control" name="expiry_date" id="expiry_date">
        </fieldset>
        <!-- End class="col-sm-6" -->
      </div>
      <div class="col-sm-6 rounded" style="background-color: #D3D3D3">
        <div class="row clonedInput" id="clonedInput1">
          <div class="col-sm-3">
            <label for="barcode">barcode</label>
            <fieldset class="form-group">
              <input type="text" class="form-control" name="barcode" id="barcode">
            </fieldset>
            <!-- End class="col-sm-6" -->
          </div>
          <div class="col-sm-3">
            <label for="medication_quantity">Nbr of tablets</label>
            <fieldset class="form-group">
              <input type="number" class="form-control" name="medication_quantity" id="medication_quantity">
            </fieldset>
            <!-- End class="col-sm-6" -->
          </div>
          <div class="col-sm-3">
            <label for="medication_pill">Nbr of Pills</label>
            <fieldset class="form-group">
              <input type="number" class="form-control" name="medication_pill" id="medication_pill">
            </fieldset>
            <!-- End class="col-sm-6" -->
          </div>
          <!-- End class="col-sm-6" -->
        </div>
      </div>

      <div class="actions pull-right">
        <button class="btn btn-danger clone">Add More</button>
        <button class="btn btn-danger remove">Remove</button>
      </div>

      <button class="btn btn-danger" type="Submit">Submit</button>
    </form>
  </div>
</div>