Javascript add element to form function not working?

Bear with me—this might be a bit confusing!

I have a javascript that adds (or removes) a new textarea + hidden field (to denote incrementation) to a form when a button is pushed. Here's the code:

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);
}

This is appended to a form which is being presented through the following code:

//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();" />
';

Essentially, this is checking the database (rubrics_convention) for what has already been submitted. It populates the textareas with what's there. Now, I want it to be possible for a user to click the Add button and add a new textarea. The script right now does this, but when I submit, it doesn't even recognize convention_i's new value, or the new skill.

Processing the form:

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

echo $_POST['conventioni'];
}

Outputting 3, not 4, even after adding new form elements through javascript.

When I did "view selection source" in Firefox after clicking the "Add" button, here's the output:

  <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" />

Based on this output, you can clearly see that it's seeing the new conventioni value (the initial was 3, the javascript inserted a new one with a value of 4). However, when submitting the form, it completely ignores that new value and looks at the 3 instead. It doesn't even recognize conventionSkill4 as being there.

Any ideas? Thanks!

It looks to me as if you're creating a new "conventioni" <input> each time you add a row, rather than simply updating the value of the input that's already there. The result will be that your server will get multiple parameters called "conventioni".

By looking at the final source, you have two inputs with the name 'conventioni'.

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

on line one

and

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

Further down the script.

When referencing the 'conventioni' element it is most probably getting the value of the first element. Try either removing the first element, or simply just update it?

I cannot exactly say what code will be 100% correct but some to the effect of this may point you in the right direction:

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