Несколько продуктов в одной форме

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