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）。它用什么在那里填充textareas。现在，我希望用户可以点击Add按钮并添加一个新的textarea。现在脚本是这样做的，但是当我提交时，它甚至不承认convention_i的新价值或新技能。

处理形式：

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

echo $_POST['conventioni']; 
} 

1.4.3 3，而不是如图4所示，甚至通过JavaScript添加新的形式元素之后。

当我做“视图选择源”在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

在我看来，如果你正在创建一个新“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;