Allright, i'm creating a little system so customers can place online their order with us. We will receive by email the order and process it in our own system. They will place a order on a page, with some basic information they need to fill in. After that they need to fill in their order. Each order line has 3 fields. Partnumber, Quantity and Price. Price will be a readonly and wont be submitted. Only showing the price.
I want to create with jQuery a small input field and a plus icon. When you type in 10 and click on the plus icon, their will be 10 extra rows of 3 fields. This i didnt create yet, but now you know how i want to work.
The problem is how will i handle the form? The fields are required, but i would like when just a line is empty, it wont be submitted or ignored in PHP. So i only want to check the forms that has been filled in. Sometimes it will be 4 lines, sometimes 20, sometimes 100 lines. So the qty of inputs we dont know. How should i create the form names?
Here some PHP:
if(toxInput::exists()){
if(toxToken::check(toxInput::get('token'))){
$toxValidate = new toxValidate();
$toxValidation = $toxValidate->check('$_POST', array(
'po' => array('required' => TRUE),
'date' => array('required' => TRUE),
'bo' => array('required' => TRUE),
'remarks' => array('required' => TRUE)
));
if($toxValidate->passed()){
echo 'Run insert';
}
} }
Here a screenshot of the form how it looks: http://prntscr.com/eigfc2
Here the HTML of the form:
<p><h2>Items</h2></p>
<p class="order">
<label style="margin-left:20px;">Partnumber:</label><br />
<input type="text" style="margin-left:20px;" class="text medium" placeholder="SP partnumber" />
</p>
<p class="order" >
<label style="margin-left:20px">Qty</label><br>
<input type="text" id="qty" name="qty" style="margin-left:20px;" class="text small" placeholder="Qty" />
<p class="order">
<label style="margin-left:20px">Price</label><br>
<input type="text" style="margin-left:20px;" class="text small" placeholder="Price" readonly /><br>
</p>
<p>
<input type="text" style="margin-left:20px;" class="text medium" placeholder="SP partnumber" />
<input type="text" style="margin-left:16px;" class="text small" placeholder="Qty" />
<input type="text" style="margin-left:16px;" class="text small" placeholder="Price" readonly />
</p>
<p>
<input type="text" style="margin-left:20px;" class="text medium" placeholder="SP partnumber" />
<input type="text" style="margin-left:16px;" class="text small" placeholder="Qty" />
<input type="text" style="margin-left:16px;" class="text small" placeholder="Price" readonly />
</p>
<p>
<input type="text" style="margin-left:20px;" class="text medium" placeholder="SP partnumber" />
<input type="text" style="margin-left:16px;" class="text small" placeholder="Qty" />
<input type="text" style="margin-left:16px;" class="text small" placeholder="Price" readonly />
</p>
<p>
<input type="text" style="margin-left:20px;" class="text medium" placeholder="SP partnumber" />
<input type="text" style="margin-left:16px;" class="text small" placeholder="Qty" />
<input type="text" style="margin-left:16px;" class="text small" placeholder="Price" readonly />
</p>
<p>
<input type="text" style="margin-left:20px;" class="text medium" placeholder="SP partnumber" />
<input type="text" style="margin-left:16px;" class="text small" placeholder="Qty" />
<input type="text" style="margin-left:16px;" class="text small" placeholder="Price" readonly />
</p>
<p>
<input type="text" style="margin-left:20px;" class="text medium" placeholder="SP partnumber" />
<input type="text" style="margin-left:16px;" class="text small" placeholder="Qty" />
<input type="text" style="margin-left:16px;" class="text small" placeholder="Price" readonly />
</p>
<input type="hidden" name="token" value="<?php echo toxToken::generate(); ?>">
I know about the margins, needs to be nice in a class but was for testing.
I wrote this up for you to show how to append input fields, which I would use an array for. I'm only using one input variable (myOrder) but you can use as many as you want. Much easier to validate in a for loop.
<html>
<head>
<script>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#myButton").click(function(){
// create loop to add ten inputs if needed
$("#myOrderForm").append('Product: <input type="text"
name="myOrder[]" /><br>');
});
});
</script>
</head>
<body>
<input id="myButton" type="button" value="Buy another product" />
<form method="post" action="addInput.php">
<div id="myOrderForm"> //input tags here
Product: <input type="text" name="myOrder[]" /><br>
Product: <input type="text" name="myOrder[]" /><br>
</div>
<input type="submit" value="Place Order">
</form>
</body>
</html>
The php file addInput.php
<?php
$myOrders=$_POST["myOrder"];
for ($i=0; $i<count($myOrders); $i++)
{
// validate each array member with if (empty($myOrders[$i]))
// do something
echo $myOrders[$i]."<br>"; // echo just for example
}
?>