Elgoots Elgoots - 4 months ago 39
PHP Question

Dynamic Invoice Forms fields and posting to a database

I am building a form to create invoices. At the moment it has the form fields of:

Product Name, QTY.

I have a "add more" button which adds another row of the above form fields.

It then submits as an array to another php page. What i am having problems with is matching each associated form field with each other because when i save it in the database i need the correct Product Name, QTY to be on the same row in the table obviously. Just not sure how to match them.

Currently my code on the form field page is:

<html>
<head>
<title>Invoice Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<h2 align="center">Invoice Test</h2>
<div class="form-group">
<form name="submit" id="submit" action="name.php" method="POST">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="product_name[]" placeholder="Product Name" class="form-control name_list" /></td>
<td><input type="text" name="qty[]" placeholder="QTY" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="product_name[]" placeholder="Product Name" class="form-control name_list" /></td><td><input type="text" name="qty[]" placeholder="QTY" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
</script>


On the name.php page where the form submits to. What is the best way to get each product and associated qty from the array and put them into the database row. Keeping in mind this is dynamic.

On name.php when i print out $_POST i currently have this array structure:

Array
(
[product_name] => Array
(
[0] => test1
[1] => test2
[2] => test3
[3] => test4
)

[qty] => Array
(
[0] => 1
[1] => 2
[2] => 3
[3] => 4
)

[submit] => Submit
)


Im guessing I need to count the keys and then match them in the other dimension of the array. Just not sure if that is the best way or even how to do that.

Answer

You could use this

$productName = $_POST['productName'];
$qty = $_POST['qty']

foreach($productName as $key => $productName) {
  $productQty = $qty[$key];

  //Use your ORM (or whatever) to inster into DB
  //$productName and $productQty

}

EDIT

Or, even better, you could user PHP's array_combine:

$productName = $_POST['productName'];
$qty = $_POST['qty']

$arryWithTotals  = array_combine($productName, $qty);

foreach($arrayWithTotals as $productName => $productQty) {
  //insert into DB
}