通过javascript添加到表格内的表格不提交

时间:2013-11-05 23:15:34

标签: javascript php

Hy,我已经阅读了很多关于这个论点的讨论,但我找不到解决方案。 我有一个表格里面的表格,这个表格的第一行是用PHP脚本显示的,我不会让用户能够在表格中添加一行,这样他就可以插入一组新的值。问题是我插入的这些新行没有提交。这是php代码

    <form method="post">
<table name="elencoAltriContatti" id="elencoAltriContatti">
<button type="button" class="btn primary success" onClick="showNewContatti();" name="nuovo">NUOVO</button>
<tr>
<td><p><strong>Nome</strong></p></td>
<td><p><strong>Qualifica</strong></p></td>
<td><p><strong>Email</strong></p></td>
<td><p><strong>Telefono</strong></p></td>
<td></td>
</tr>
<?php 
  echo "<tr>";
  echo "<td><p><input type=\"text\" id=\"nome\" name=\"NOME[]\" value=\"".$row['NOME']."\" class=\"input-text3\" onchange=\"selectCheckbox('".$i."')\"></p></td>";
  echo "<td><p><input type=\"text\" id=\"qualifica\" name=\"QUALIFICA[]\" value=\"".$row['QUALIFICA']."\" class=\"input-text3\" onchange=\"selectCheckbox('".$i."')\"></p></td>";
  echo "<td><p><input type=\"text\" id=\"email\" name=\"EMAIL[]\" value=\"".$row['EMAIL']."\" class=\"input-text3\" onchange=\"selectCheckbox('".$i."')\"> </p></td>";
  echo "<td><p><input type=\"text\" id=\"telefono\" name=\"TELEFONO[]\" value=\"".$row['TELEFONO']."\" class=\"input-text3\" onchange=\"selectCheckbox('".$i."')\"></p></td>";
  echo "<td><input id=\"".$i."\" name=\"CHECKBOX[]\" type=\"checkbox\" value=\"\" style=\"float:right\"></td>";
  echo "</tr>";
?>

</table>
<div class="control-group">
    <div class="controls">
     <button type="reset" name="reset"  class="btn info">CANCELLA</button>
     <button type="submit" name="submit"  class="btn info" >SALVA</button>
    </div>
  </div>

</form>

效果很好,这是我使用的javascript函数

function showNewContatti(){
  var table = document.getElementById('elencoAltriContatti');
  var lastRow = table.rows.length;
  var row=table.insertRow(lastRow);
  var nome=row.insertCell(0);
  var qualifica=row.insertCell(1);
  var email=row.insertCell(2);
  var telefono=row.insertCell(3);
  var checkbox=row.insertCell(4);
  nome.innerHTML="<p><input type=\"text\" id=\"nome\" name=\"NOME[]\" class=\"input-text3\" onchange=\"selectCheckbox('"+lastRow+"')\"></p>";
  qualifica.innerHTML="<p><input type=\"text\" id=\"qualifica\" name=\"QUALIFICA[]\" class=\"input-text3\" onchange=\"selectCheckbox("+lastRow+")\"></p>";
  email.innerHTML="<p><input type=\"text\" id=\"email\" name=\"EMAIL[]\" class=\"input-text3\" onchange=\"selectCheckbox("+lastRow+")\"></p>";
  telefono.innerHTML="<p><input type=\"text\" id=\"telefono\" name=\"TELEFONO[]\" class=\"input-text3\" onchange=\"selectCheckbox("+lastRow+")\"></p>";
  checkbox.innerHTML="<input type=\"checkbox\" id=\""+lastRow+"\" name=\"CHECKBOX[]\" style=\"float:right\">";}

使用此功能添加的新行只是没有提交,你有什么想法吗? 谢谢你的帮助

编辑:我已经更改了我的javascript函数,现在它看起来像这样:

 var table = document.getElementById('elencoAltriContatti');
  var lastRow = table.rows.length;
  var Iterator=lastRow; 
  var row=table.insertRow(lastRow);

  var nome = row.insertCell(0);
  var cell = document.createElement('input');
  cell.type = 'text';
  cell.name = 'nome' + Iterator;
  cell.id = 'nome' + Iterator;
  cell.className= 'input-text3';
  cell.onchange= function(){
    selectCheckbox(Iterator);
 };
  nome.appendChild(cell);

但我仍有同样的问题,我还能做些什么?

1 个答案:

答案 0 :(得分:0)

在innerHTML行中,您传递的名称属性与原始名称相同。表单元素作为名称=值对进行POST。两个表单元素不能具有相同的名称。

要在javascript中添加表单元素,您应该构建名称属性dynamicaly:

i=1;
name='nome'+i;
html="<input type='text' name='" + name + "' />";
i++; //etc...