一种形式的多种产品

Question

我想在我的表单中添加一项功能，其中用户可以在打submit button之前添加尽可能多的条目，如'add to cart'功能，在同一个页面中显示添加的条目，在单独的divsubmit 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; 
    } 
}