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;  
  }
}

一种形式的多种产品

1 个答案: