[英]I need to dynamically add more fields to a form and have the new fields inputs values change as well
I have a jsfiddle here of the script I'm using to dynamically add rows to a field but have a problem. 我在这里有一个jsfiddle我正在使用的脚本动态地向行添加行但是有问题。
On my form I have the 1st row that I want to duplicate with the script. 在我的表单上,我有第一行,我想用脚本复制。 The row consists of 6 inputs named
job_date1
, tech_name1
, cost_code1
, pay_rate1
, total_hours1
, and sub_total1
. 该行包含6个名为
job_date1
, tech_name1
, cost_code1
, pay_rate1
, total_hours1
和sub_total1
。
When the second row is created via the script I now need the new rows input names to be set by the script if possible to job_date2
, tech_name2
, cost_code2
and so on and with each new row created I need the end digit to move up one. 当通过脚本创建第二行时,我现在需要新的行输入名称由脚本设置,如果可能的话,可以使用
job_date2
, tech_name2
, cost_code2
等等,并且每创建一个新行,我需要结束数字向上移动一行。
Here is the code: 这是代码:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null !== chkbox && true === chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
catch(e) {
alert(e);
}
}
Here's a simple solution: 这是一个简单的解决方案:
newcell.children[0].name = newcell.children[0].name + rowCount;
As you count each newly added row, add that variable to each of the input elements. 在计算每个新添加的行时,将该变量添加到每个输入元素。
Here's the jsFiddle (be sure to check your console when you run the function to see the console log). 这是jsFiddle (确保在运行该函数时检查控制台以查看控制台日志)。
For the first log, it returns: 对于第一个日志,它返回:
chk1
txt1
tech_name1
cost_code1
txt1
For the second element that's created 对于创建的第二个元素
chk2
txt2
tech_name2
cost_code2
txt2
etc. 等等
I have a simpler suggestion. 我有一个更简单的建议。 Instead of having
job_date1
, job_date2
, etc., name your fields job_date[]
(all of the job date fields). 而不是使用
job_date1
, job_date2
等,将字段job_date[]
(所有作业日期字段)。
Eg PHP automatically recognizes this and $_POST["job_date"]
would be an array with all the values for job date in the order they appear on the html page. 例如,PHP会自动识别这一点,而
$_POST["job_date"]
将是一个数组,其中包含作业日期的所有值,按照它们在html页面上显示的顺序。
So instead of $_POST["job_date" . $i]
所以而不是
$_POST["job_date" . $i]
$_POST["job_date" . $i]
you would use $_POST["job_date"][$i]
. $_POST["job_date" . $i]
你会使用$_POST["job_date"][$i]
。
I don't know what technology you use for the backend, but I'm sure you can achieve the same effect. 我不知道你使用什么技术作为后端,但我相信你可以达到同样的效果。
It will be more robust and elegant and you don't have to care about re-numbering when you add nor remove rows. 它将更加强大和优雅,您在添加或删除行时不必关心重新编号。
Edit: More details about this technique in PHP can be found in PHP FAQ and Example #3 here . 可以发现有关此技术在PHP中的更多细节:编辑 PHP常见问题和示例3 这里 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.