Question

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

我有一个javascript，当按下按钮时，它会向表单添加（或删除）一个新的textarea + hidden字段（以表示增量）。这是代码：

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）已经提交的内容。它用那里的东西填充textareas。现在，我希望用户可以单击“添加”按钮并添加新的文本区域。该脚本现在就是这样做的，但是当我提交时，它甚至不会识别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" />

根据此输出，您可以清楚地看到它正在看到新的conventioni值（初始值为3，javascript插入一个值为4的新值）。但是，在提交表单时，它会完全忽略该新值并查看3。它甚至不认可conventionSkill4存在。

有什么想法吗？谢谢！

Answer 1

在我看来，每次添加行时都会创建一个 new “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;

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

2 个答案: