一種形式的多種產品

Question

我想在表單中添加一項功能，即用戶可以在點擊“ submit button之前添加盡可能多的條目，例如'add to cart'功能，在同一頁面中顯示添加的條目，然后在單獨的div使用submit button然后使用該提交按鈕將這些多個條目保存在數據庫中（在一個單獨的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只是一個普通的腳本，它將處理提交到數據庫的數據，每個提交基數都有一個條目。

Answer 1

我創建了這個jsfiddle https://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;  
  }
}