如何将动态创建的输入框的值插入数据库 [英] How to insert value of dynamically created input boxes into database
问题描述
您好，我正在使用Java脚本功能动态创建2个文本框和1个select框...现在，我想将创建的(n)个字段的值发布到数据库(相关表)中因为我正在使用codeigniter，所以m发布了脚本和代码
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
这是我正在使用的简单Java脚本
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>
这是我对php文件的划分
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'>
这是我相关的表格字段
route_number stop_name am_pm timing
推荐答案
我最喜欢的方法是尽可能多地使用DOM.除非绝对必要，否则不要使用计数器(它们只是bug的来源).这是一个简单的示例:
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(可以有所不同，我精心设计以使其易于理解):
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>
请注意，我不需要使用任何计数变量.与PHP一样，您可以使用 [] 创建POST变量数组而无需指定索引，服务器(或浏览器?我不确定)会为您构建数组.< input/> 字段在页面上的呈现顺序将是它们通过 $ _ POST 提供给PHP的顺序.这段代码...
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);
}
...将按添加顺序处理每个字段.您甚至可以使用JavaScript对输入进行重新排序或删除，这将反映在 $ _ POST 中.这种方法与JSON编码相结合，为处理多输入自由格式字段提供了一种快速简便的方法.
... 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.
将上述代码应用于您的用例需要少量添加，这可能并不明显.您需要为三个输入(停止，定时和安培)中的每一个创建一个数组，如下所示:
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
)
)
要在PHP中进行处理，需要一个简单的老式循环:
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.
这篇关于如何将动态创建的输入框的值插入数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
