一种形式的多个产品 - Multiple products in one form

Multiple products in one form

本文关键字：一种 | 更新日期: 2023-10-13

我想在我的表单中添加一个功能，在该功能中，用户可以在点击submit button之前添加尽可能多的条目，就像'add to cart'功能一样，在同一页面中显示添加的条目，在带有submit button的单独的div中，然后使用提交按钮将这些多个条目保存在数据库中（在显示添加条目的单独div中）。

到目前为止，我的表单只允许基于每次提交的条目，这意味着如果用户想添加另一个条目，他/她必须返回表单并添加并单击以再次提交。

<form method="POST" name="myForm" action="saveto.php">
  <label> Speed Rating:</label>
  <select name="speed_rating" required class="form-control" id="speed_rating" ></select>
  <div class="form-group col-sm-8">
    <label> Description:</label>
    <select name="description" required class="form-control" id="description" >
   </select>
  </div>
  <div class="form-group col-sm-4">
  <label> Load Index:</label>
   <select name="load_index" required class="form-control" id="load_index" >
   </select>
  </div>
  <div class="form-group col-sm-6">
  <label> Vendor:</label>
   <select name="vendor" required class="form-control" id="vendor" >
  </select>
  <div class="note"> Recommended Vendor : <span id="recomvend"> </span> </div>
  </div>        
  <div class="form-group col-sm-6">
  <label> Quantity:</label>
  <input type="text" required name="qty" class="form-control" id="qty"></div>       
  <div style="clear:both"> </div>   
   <input type="submit" name="submit" class="btn btn-primary smp" value="Submit"> &nbsp; &nbsp; 
  <button id="clear"  type="button" class="btn btn-primary smp smp2" > Reset </button>
  </div>
  <input type="submit" value="submit" name="submit">
</form>

你是如何做到这一点的？我的saveto.php只是一个普通的脚本，它将处理提交到数据库的数据，每个提交库中有一个条目。

我创建了这个jsfiddlehttps://jsfiddle.net/jy6vh4rp/31/

如果这就是你想要的，那么你应该把它添加到你的前端：

<form action="validate.php" method="post">
  <div style="padding: 30px 0; text-align: center;">
    <button type="button" onclick="createDOM()">Add</button>
    <input type="submit" value="submit" name="submit" />
  </div>
  <div class="productsContainer"></div>
</form>
<script>
  $(document).ready(function() {
    id = 0;
    createDOM = function() {
      $(".productsContainer").append('<input type="text" id="' + id + '" name="products[]" value="' + id + '" />');
     id++;
    };
  });
</script>

这是你的验证后端：

foreach($_POST['products'] as $prodInput){ 
  $product = filter_var($prodInput,FILTER_SANITIZE_NUMBER_INT);
  if( is_numeric($product) ){
    echo $product;  
  }
}