Javascript添加元素到表单功能不起作用？

Question

忍受我-这可能有点令人困惑！

我有一个JavaScript，可以在按下按钮时向表单添加（或删除）新的textarea +隐藏字段（以表示增量）。 这是代码：

function addRowToTable()
{ 

  var tbl = document.getElementById('convention');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);



  // right cell
  var cellRight = row.insertCell(0);

  var el = document.createElement('textarea');
  el.rows = '2';
  el.cols = '80';
  el.name = 'conventionSkill' + iteration;
  el.size = 40;

    var el2 = document.createElement('input');
      el2.value = iteration;
  el2.type = 'hidden';
  el2.name = 'conventioni';



  el.onkeypress = keyPressTest;
  cellRight.appendChild(el);
    cellRight.appendChild(el2);


}

function removeRowFromTable()
{
  var tbl = document.getElementById('convention');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

这被附加到通过以下代码呈现的表单中：

//Convention




 echo "<form action='index.php?viewrubric=".$_GET['viewrubric']."&class=".$_GET['class']."' method='POST'>";
echo "<input type='hidden' name='rubricid' value='".$id."' />";
$sql2 = "select * from rubrics_convention where rubricid = '$id'";
$result2 = mysql_query($sql2) or die (mysql_error());

?>
<h3>Habit of Convention</h3>
<table>
<tr><td>
<label>Habit Description: </td></tr></label></table><textarea name='conventionDescription' rows='2' cols='80'><? echo $description; ?></textarea><br />

<table id="convention">
<tr><td><label>Skill Descriptions: </label>
</td></tr>

<?
while($row2=mysql_fetch_array($result2)) {
$convention_i++;
echo "<tr><td><textarea ".$readonly." name='convention_".$row2['id']."' rows='2' cols='80'>".$row2['skill']."</textarea></td></tr>";
}
echo "<input type='hidden' value=".$convention_i." name='conventioni' />";


echo "</table>";
echo '<input type="button" value="Add" onClick="addRowToTable();" />
<input type="button" value="Remove" onClick="removeRowFromTable();" />
';

本质上，这是在数据库（rubrics_convention）中检查已提交的内容。 它使用那里的内容填充文本区域。 现在，我希望用户可以单击“添加”按钮并添加新的文本区域。 脚本现在可以执行此操作，但是当我提交时，它甚至无法识别Convention_i的新价值或新技能。

处理表格：

if(isset($_POST['update'])) {
//Convention

echo $_POST['conventioni'];
}

即使通过javascript添加了新的表单元素，也输出3而不是4。

单击“添加”按钮后在Firefox中执行“查看选择源”时，输出如下：

  <input value="3" name="conventioni" type="hidden" />

  <table id="convention">
    <tbody>
      <tr>
        <td><label>Skill Descriptions:</label></td>
      </tr>

      <tr>
        <td>
        <textarea name="convention_1" rows="2" cols="80">
habit 1
</textarea></td>
      </tr>

      <tr>
        <td>
        <textarea name="convention_2" rows="2" cols="80">
habit 2
</textarea></td>
      </tr>

      <tr>
        <td>
        <textarea name="convention_3" rows="2" cols="80">
testest
</textarea></td>
      </tr>

      <tr>
        <td>
        <textarea name="conventionSkill4" cols="80" rows="2">
</textarea><input name="conventioni" value="4" type="hidden" /></td>
      </tr>
    </tbody>
  </table>


    <input value="Add" onclick="addRowToTable();" type="button" /> <input value="Remove"
    onclick="removeRowFromTable();" type="button" />

根据此输出，您可以清楚地看到它正在看到新的Conventional值（初始值为3，JavaScript插入了一个新的值4）。 但是，提交表单时，它会完全忽略该新值，而是查看3。 它甚至不承认ConventionSkill4在那儿。

有任何想法吗？ 谢谢！

Answer 1

在我看来，好像您每次添加一行都在创建一个新的 “ conventioni” <input> ，而不是简单地更新已经存在的输入的值。 结果将是您的服务器将获得多个称为“ conventioni”的参数。

Answer 2

通过查看最终来源，您将获得两个名为“ conventioni”的输入。

 <input value="3" name="conventioni" type="hidden" />

在第一行

和

<input name="conventioni" value="4" type="hidden" />

深入脚本。

当引用“ conventioni”元素时，最有可能获得第一个元素的值。 尝试删除第一个元素，或者只是更新它？

我无法确切地说出什么代码是100％正确的，但是有些效果可能会为您指明正确的方向：

element = document.getElementById('conventioni');
element.value = new_value;