How to insert values into MySQL database from a dynamic html table? - php

Question

I have this form in which user can add multiple rows depends on his/her preference. The name of each input tags were generated using jquery; meals1...amount1, meals2...amount2 and so on.
My question is how do I insert all those values into my MySQL database?
So far I have this function:
function dbRowInsert($table_name, $form_data)
{
// retrieve the keys of the array (column titles)
$fields = array_keys($form_data);
// build the query
$sql = "INSERT INTO ".$table_name."
(`".implode('`,`', $fields)."`)
VALUES('".implode("','", $form_data)."')";
// run and return the query result resource
return mysql_query($sql);
}
HTML:
<div id ="ca_meals"><!--start of ca_meals-->
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<h3>Meals Form</h3>
<div class="form-group">
<label for="ca_meals_date">Date:</label>
<input type="text" class="form-control" id="ca_meals_date" name="ca_meals_date" placeholder="Date">
</div>
<div class="form-group">
<label for="ca_meals">Purpose:</label>
<input type="text" class="form-control" id="ca_meals_purpose" placeholder="Purpose">
</div>
<table class="table table-bordered table-hover" id="tab_logic_meals">
<thead>
<tr >
<th class="text-center">
Meals
</th>
<th class="text-center">
Number of PAX
</th>
<th class="text-center">
Alloted Budget Per PAX
</th>
<th class="text-center">
Amount
</th>
</tr>
</thead>
<tbody>
<tr id='meals0'>
<td>
<input type="text" name='ca_accommodate' placeholder='Meals' class="form-control"/>
</td>
<td>
<input type="text" name='ca_meals_numberpax' placeholder='Number of PAX' class="form-control"/>
</td>
<td>
<input type="text" name='ca_meals_budgetpax' placeholder='Alloted Budget Per PAX' class="form-control"/>
</td>
<td>
<input type="text" name='ca_meals_amount' placeholder='Amount' class="form-control"/>
</td>
</tr>
<tr id='meals1'></tr>
</tbody>
</table>
<div class="form-group">
<label for="ca_total">Total:</label>
<input type="text" class="form-control" id="ca_total" disabled>
</div>
</div>
</div>
<a id="add_row_meals" class="btn btn-primary pull-left">Add Row</a><a id='delete_row_meals' class="pull-right btn btn-danger">Delete Row</a>
</div>
</div><!--end of ca_meals-->
This is my JQuery:
$("#add_row_meals").click(function(){
$('#meals'+l).html("<td><input name='ca_meal"+l+"' type='text' placeholder='Meals' class='form-control input-md' /> </td><td><input name='ca_meals_numberpax"+l+"' type='text' placeholder='Number of PAX' class='form-control input-md'></td><td><input name='ca_meals_budgetpax"+l+"' type='text' placeholder='Alloted Budget Per PAX' class='form-control input-md'></td><td><input name='ca_meals_amount"+l+"' type='text' placeholder='Amount' class='form-control input-md'></td>");
$('#tab_logic_meals').append('<tr id="meals'+(l+1)+'"></tr>');
l++;
});
$("#delete_row_meals").click(function(){
if(l>1){
$("#meals"+(l-1)).html('');
l--;
}
});

Answer 1

Usually it's done by passing arrays or indexes with the fields names.
Say, in JavaScript when you add a DHTML field for the name, call it meals[]
In PHP the $_POST['meals'] will contain an array then.
The other way - indexes. Say, when you create a new field with Javascript, give it a new name like meals_1, meals_2, etc. And then loop on them in PHP.
For the first case, with meals[], the POST request will be like:
&meals[]=aaa&meals[]=bbb&meals[]=ccc&amount[]=1&amount[]=2&amount[]=3
An example of PHP code working with meals[] would be:
for($i=0;$i<count($_POST['meals']);$i++)
{
$sql = "INSERT INTO ... SET
`meals` = ". $_POST['meals'][$i].",
`amount` = ". $_POST['amount'][$i].",
// etc
}