提交带有克隆字段的表单

时间:2021-07-07 14:28:01

标签: javascript php html

我有一个提交产品的表单,如果需要更多字段,该按钮可以克隆字段:

<form id="myForm" method="post" action="index.php">
<div class="card card-primary">
  <div class="card-header">
    <h3 class="card-title">Products</h3>
  </div>
  <div class="card-body">
    <div class="modeliai">
      <div class="modelioforma">
        <div class="formroup">
          <label for="model">Model</label>
          <input type="model" class="form-control" placeholder="Model name..." name="model" id="model">
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label>SKU</label>
              <input type="sku" class="form-control" placeholder="SKU..." name="sku" id="sku">
            </div>
          </div>

          <div class="col-sm-2">
            <div class="form-group">
              <label for="supplier">supplier</label>
              <select class="custom-select rounded-0" id="supplier" name="supplier">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
              </select>
            </div>
          </div>
          <div class="col-sm-2">
            <div class="form-group">
              <label>Quantity</label>
              <input type="qty" class="form-control" value="1" name="qty" id="qty">
            </div>
          </div>

          <div class="col-sm-2">
            <div class="form-group">
              <label>Price</label>
              <input type="price" class="form-control" placeholder="price..." name="price" id="price">
            </div>
          </div>
        </div>
        <hr>
      </div>
    </div>
    <div class="col-sm-2">
      <button type="button" class="btn btn-block btn-primary" id="addMore"><i class="fas fa-plus"></i> Add more</button>
    </div>
  </div>
</div>
</form>
<div class="modal-footer justify-content-between">
  <button class="btn btn-primary" type="submit" form="myForm" value="Submit">Submit form</button>
</div>

用于在单击“添加更多”按钮时克隆字段的 javascript:

<script>
$("#addMore").click(function(){   
    $(".modelioforma:last").clone().appendTo(".modeliai");  
});
</script>

然后 php 代码只是为了捕捉提交的表单字段:

if (!empty($_POST))
{
  $modelis = $_POST['model'];
  $sku = $_POST['sku'];
  $supplier = $_POST['supplier'];
  $qty= $_POST['qty'];
  $price = $_POST['price'];
    echo $model.'<br>';
  echo $sku.'<br>';
  echo $supplier.'<br>';
  echo $qty.'<br>';
  echo $price.'<br>';
}

如果我只提交一个产品并在没有按下克隆按钮的情况下填充其字段,那么一切正常,但是如果我使用添加更多按钮来克隆字段并在处理 $_POST 后提交多个产品,我只会添加最后一个产品.如何在按下克隆按钮后提交所有产品,以便我可以进一步处理项目..将它们添加到数据库等。

1 个答案:

答案 0 :(得分:0)

正如评论中所建议的,我添加了 name="supplier[]" 等。在我的表单中,然后通过 $_POST 将其放入数组 $supplier[] = $_POST['supplier']; 非常感谢大家。

相关问题