I have been looking the solution for long time that why does my added fields are not stored in database properly and concluded that jquery is not adding html field properly that is why it is not submitted to render php program to add the fields data in database.
for proper demonstration please have a look at the code
My HTML form code is written as
<table id="additional_item_numbers">
<thead>
<tr>
<th>Item</th>
<th> Delete</th>
</tr>
</thead>
<tbody>
<tr><td><input type="text" class="form-control form-inps" size="50" name="additional_item_numbers[]" value="123" /></td><td>
<a class="delete_item_number" href="javascript:void(0);">Delete</a>
</td><tr>
</tbody>
</table>
and jquery function is defined to add a new field in form on ENTER key press
<script type="text/javascript" language="javascript">
$("#additional_item_numbers").keyup(function(event){
if(event.keyCode == 13){
$("#additional_item_numbers tbody").append('<tr><td><input type="text" class="form-control form-inps" size="40" name="additional_item_numbers[]" value="" /></td><td> </td></tr>');
//document.getElementById("form-inps").focus();
$("#additional_item_numbers").find("input[type='text']").last().focus();
}
});
</script>
This function perfectly add a new field in the html form but upon submission of this form the fields are added into database randomly.
sometimes not a single value is added to database and some time random values are added and some time all values are added upon submission.
If I check the source code of the page after adding new fields with jquery function. it does not show those newly added fields in source code.
I think it is due to client side functionality but it should add all the values to database after submission. but it does not. and if I go to edit an item and add some further additional item numbers then the same save()
function of php is called and it does not miss a single value of the submitted form from previous item numbers but the additional added item numbers behave same as described above.
After searching a lot and diving deep in php code, I think that jquery is not setting the name of newly added fields properly, so those fields data whose name is set up properly is submitted to php function and it stores that data into database but those whose name was not set properly does not go to php program so they don't appear in database.
For better understanding, I am including the php function code too.
My PHP function to add data into database.
function save($item_id, $additional_item_numbers)
{
$this->db->trans_start();
$this->db->delete('additional_item_numbers', array('item_id' => $item_id));
foreach($additional_item_numbers as $item_number)
{
if ($item_number!='')
{
$this->db->insert('additional_item_numbers', array('item_id' => $item_id, 'item_number' => $item_number));
}
}
$this->db->trans_complete();
return TRUE;
}
Any help would be much appreciated.