CODEWITHSUNDEEP
javascriptphphtmlhtml-tablehtml-input
Ido Naveh
Ido Naveh

Reputation: 2492

Reset input fields when adding a new row to a table using JavaScript

On my HTML page, there is a table inside a form. The table's first row is the labels of the columns, and the rest of the rows contain input text fields.

Under the table, there is a button which operates a JavaScript function which duplicates the first row at the end of the table.

The problem is that the text is also copied from the first row fields to the newly added row fields. Instead, I want to clear the text from the newly added row fields. How can I do that?

This is my code:

<form action="update.php" method="post" enctype="multipart/form-data">
<table id="addresses" class="form" border="1">
<tbody>
  <tr>
    <p>
      <th>

      </th>
      <th>
        <label for='UPDATE_NAME'>Name</label>
      </th>
      <th>
        <label for='UPDATE_NUMBER'>Phone Number (With Country Code)</label>
      </th>
      <th>
        <label>Address (House No., Street, City, State, ZIP Code, P.O. Box)</label>
      </th>
    </p>
  </tr>
  <?php
                            for ($i = 0; $i < count($addresses); $i++) {
                                $id = str_pad($i, 2, '0', STR_PAD_LEFT);
                                echo "<tr>";
                                echo "<p>";
                                echo "<td>";
                                echo "<input type='checkbox' name='chk[]' />";
                                echo "</td>";
                                echo "<td>";
                                echo "<input type='text' name='UPDATE_NAME[]' value='".$names[$id]['S']."' />";
                                echo "</td>";
                                echo "<td>";
                                echo "<input type='tel' name='UPDATE_NUMBER[]' value='".$numbers[$id]['S']."' />";
                                echo "</td>";
                                echo "<td>";
                                echo "<input type='text' name='UPDATE_ADDRESS[]' value='".$addresses[$id]['S']."' />";
                                echo "</td>";
                                echo "</p>";
                                echo "</tr>";
                            }
                        ?>
</tbody>
</table>
<p>
    <input type="button" value="Add Address" onClick="addRow('addresses')" />
</p>
<script>
function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  if (rowCount < 10) {
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for (var i = 0; i < colCount; i++) {
      var newcell = row.insertCell(i);
      newcell.innerHTML = table.rows[1].cells[i].innerHTML;
    }
    document.getElementById("APP_UPDATE_NAME[" + rowCount + "]").reset();
  } else {
    alert("Maximum Branches Number is 10");
  }
}
</script>
<input type="submit" class="flat-button form" name="SUBMIT" value="Update Addresses" />
</form>

In the code above, you can see the first row with the labels, and after that, a PHP loop that adds information from a PHP array. After the table, you can see the JavaScript function which adds a row to the table.

What do I need to add to the script so it would be copied without the text from the input fields?

Upvotes: 0

Views: 1052

Answers (1)

Vilapri
Vilapri

Reputation: 71

You can set the value of the new row manually instead of copying it. Like so:

newcell.innerHTML = "<input type='...' name='...' value='...' />";

This way you control what goes into the newcell.

Upvotes: 2

Related Questions