How to insert value of dynamically created input boxes into database [duplicate] - php

Question

This question already exists:
how to post value of 3 input fields into database
Closed 9 years ago.
hello developers i am creating 2 text boxes and 1 select box dynamically using java script function... now i want to post the value of (n) fields created into database (relevant table)
as i am using codeigniter so m posting the script and code
this is the simple java script that i am using
<script>
var counter=1;
function generateRow() {
var count="<font color='red'>"+counter+"</font>";
var temp ="<p> <div class='_25'><input type='textbox' id='textbox' name='stop"+counter+"' placeholder='Stop Name'></input></div> <div class='_25'><input type='textbox' id='textbox' name='timing"+counter+"' placeholder='Timing'></input></div> <div class='_25'><select id='ampm"+counter+"' name='ampm"+counter+"'><option>a.m</option><option>p.m</option></select> </div>";
var newdiv = document.createElement('div');
newdiv.innerHTML = temp + count;
var yourDiv = document.getElementById('div');
yourDiv.appendChild(newdiv);
counter++;
}
</script>
and this is my division on php file
<div id="div">
</div>
<p> </p>
<div class="_25">
<p>
<input type="button" name="button" class="button red" id="button" value="Add" onclick="generateRow() "/></a>
</p>
</div>
<input type='button' value='Remove Button' id='removeButton'>
and this is my related table fields
route_number stop_name am_pm timing

Answer 1

My favorite way to do this is to use the DOM as much as possible. Don't use counters unless you absolutely have to (they're just a source of bugs). Here's a quick example:
Html/JS/jQuery (can vary, I crafted this to make it easy to follow):
<form method="POST" id="theForm">
<div id="fields">
<input type="text" name="fields[]"/>
</div>
<input type="button" id="addField" value="Add Field"/>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#addField').click(function() {
$('#fields').append(
$('<input type="text" name="fields[]"/>')
);
})
});
</script>
Note how I don't need to use any sort of counting variable. Just like PHP, you can create an array of POST variables without specifying indexes by using [] and the server (or browser? I'm not sure) will build the array for you. The order in which the <input /> fields are rendered on the page will be the order they are provided to your PHP via $_POST. This code...
foreach ($_POST['fields'] as $fieldIndex => $fieldValue) {
doStuff($fieldValue);
}
... will process each field in the order they were added. You can even use JavaScript to re-order or remove the inputs and that will be reflected in $_POST. This method, coupled with JSON encoding, makes for a fast and easy way to handle multi-input, free-form fields.
Update:
Applying the above code to your use-case requires a small addition that may not be obvious. You'll need to create an array for each of the three inputs (stop, timing, and ampm) like so:
<form method="POST" id="theForm">
<div id="fields">
<input type="text" name="fields[stop][]"/>
<input type="text" name="fields[timing][]"/>
<select name="fields[ampm][]">
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
<br/>
</div>
<input type="button" id="addField" value="Add Field"/>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#addField').click(function() {
$('#fields').append(
$('<input type="text" name="fields[stop][]"/>'),
$('<input type="text" name="fields[timing][]"/>'),
$('<select name="fields[ampm][]"><option value="am">AM</option><option value="pm">PM</option></select>'),
$('<br/>')
);
})
});
</script>
Filling out this form with some test data yields the following array:
[fields] => Array
(
[stop] => Array
(
[0] => aaa
[1] => bbb
)
[timing] => Array
(
[0] => 1111
[1] => 2222
)
[ampm] => Array
(
[0] => am
[1] => pm
)
)
And to process that in PHP requires a simple old-school loop:
$numFields = count($_POST['fields']['stop']);
for ($i = 0; $i < $numFields; $i++) {
// Pack the field up in an array for ease-of-use.
$field = array(
'stop' => $_POST['fields']['stop'][$i],
'timing' => $_POST['fields']['timing'][$i],
'ampm' => $_POST['fields']['ampm'][$i]
);
saveToDatabase($field);
}
Unfortunately I don't have time right now to make sure all that is correct. It should be, and if its not it may still help :). I'll check back in a few hours.

Answer 2

name your dynamic input box "stop["+counter+"]" (using braces as part of the name) instead of adding a counter to the end of the name. Then in your post data, $_POST['stop'] will be an array of values that you can just foreach loop over with the counter as the key in the sub-array. And $_POST['stop'][1] will correspond to $_POST['timing'][1]...etc.

Answer 3

You can construct the following HTML input fields:
<input type="text" name="data[]" />
<input type="text" name="data[]" />
<input type="text" name="data[]" />
// ...
Which will lead to an array keyed data inside $_REQUEST super global, when you var_dump($_REQUEST['data']). Try it out. You don't even need to index the data[] array, since PHP will do it for you.
You might want to process your $_REQUEST['data'] or $_POST['data'] array with a foreach loop construct:
foreach($_REQUEST['data'] as $data){
// $data is the corresponding input field's value
}