[英]how to read the input values from a dynamic html table?
我有以下代码从常规输入中读取值,
HTML:
<tr>
<th>Email:</th>
<td><input id="email" name="email" onchange="EmailValidate()" maxlength="50"></td>
</tr>
PHP:
file_put_contents($file, "\nEMAIL:", FILE_APPEND | LOCK_EX);
$ret = file_put_contents($file, $_POST['email'], FILE_APPEND | LOCK_EX);
以同样的方式,我试图从动态生成的html表中读取输入值,但出现错误,
HTML:
<table>
<tr>
<th>Number of Models:<title="Number of Models"></th>
<td><select id="numbermodels" name="numbermodels" onchange="buildTable(this.value); buildTable4(this.value);">
<option value="1">1</option >
<option value="2">2</option >
<option value="3">3</option >
<option value="4">4</option >
<option value="5">5</option >
<option value="6">6</option >
</select></td>
</tr>
<tr>
<th>Number of heads per model:</th>
<td>
<table id="contentTable" border="1" name="contentTable">
<!-- Fill table programmatically -->
</table></td>
</tr>
Javascript:
function buildTable(val)
{
var myTable =document.getElementById("contentTable");
var j=val;
var rows = [];
var cells = [];
while (myTable.hasChildNodes()) {
myTable.removeChild(myTable.lastChild);
}
for( var i = 0; i < 1; i++ )
{
rows[i] = myTable.insertRow(i);
if(i%3==2)rows[i].addClass("every3rdrow");
cells[i] = [];
for( var x = 0; x < j ; x++ )
{
cells[i][x] =document.createElement((x==0)?"th":"td");
cells[i][x].innerHTML = (x==0)?"<input id=t onchange=ty() name=t>":"<input id=t onchange=ty()>";
rows[rows.length - 1].appendChild(cells[i][x]);
}
}
}
buildTable();
function ty(){
$ad = document.getElementById("t").value;
if(!/^-?\d*$/.test($ad)) {
alert("Number of heads per model value must be numeric!");
}
}
为此,我也编写了类似的PHP代码,但是却收到错误未定义索引t,PHP:
file_put_contents($file, "\n Number of Heads per Model:", FILE_APPEND | LOCK_EX);
$ret = file_put_contents($file, $_POST['t'], FILE_APPEND | LOCK_EX);
这是什么原因,可以进行哪些修改才能从动态html表中成功读取输入值?
一些建议:
元素ID 必须是唯一的。 您不应该为每个输入ID使用“ t”。 您可以将其更改为id="t_$i_$x"
或类似的名称以使其唯一。
您需要让服务器端脚本知道t
是一个数组。 要从提交的表单中获取所有值,请将<input>
元素模板中的name=t
更改为name="t[]"
。
第2步将破坏您的验证功能。 我将onchange=ty()
更改为onchange="ty(this)"
。 然后,您必须将ty()
函数的实现更改为:
function ty(el) { if(!/^-?\\d*$/.test(el.value)) { alert("Number of heads per model value must be numeric!"); } }
因此,这消除了再次获取该元素的需要,从而简化了您的函数(在onchange
事件中调用它时,只需传递它的一个实例)。
不一定需要这样做,但是如我上面建议中所示,始终将HTML标记属性值括在引号中是一种好习惯。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.