how to name objects dynamically created by javascript

user_8699544 0
Viewed 78

I want to know how to name the record set created by the following code. The problem is that each time the "Submit" is clicked, only the most recent set is sent to the database. I want know how the code can be modified to be able to send all the data into database. Thanks.

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  if (rowCount < 5) {
    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[0].cells[i].innerHTML;
    }
  } else {
    alert("Maximum Number of Courses is 5");

  }
}

function deleteRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  for (var i = 0; i < rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[0].childNodes[0];
    if (null != chkbox && true == chkbox.checked) {
      if (rowCount <= 1) {
        alert("Cannot Remove all the Courses.");
        break;
      }
      table.deleteRow(i);
      rowCount--;
      i--;
    }
  }
}
<form action="*.php" enctype="multipart/form-data" id="form" method="post" name="form">
  <table id="dataTable" class="form" border="1">
    <tbody>
      <p></p>
      <td>
        <input type="checkbox" name="chk[]" checked="checked" />
      </td>
      <td>
        <label for="course">Course</label>
        <select id="course" name="course">
          <option></option>
          <option>Course 1</option>
          <option>Course 2</option>
          <option>Course 3</option>
          <option>Course 4</option>
          <option>Course 5</option>
        </select>
      </td>

      <td>
        <label for="year">Year</label>
        <select id="year" name="year">
            <option>Select Year</option> 
            <option>2000</option>
            <option>2001</option>
            <option>2002</option>
        </select>
      </td>

      <td>
        <label for="semester">Semester</label>
        <select id="semester" name="semester">
            <option>Select Semester</option> 
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
      </td>
    </tbody>
  </table>
  <p></p>
  <input type="button" value="Add Course" onClick="addRow('dataTable')" />
  <input type="button" value="Remove Course" onClick="deleteRow('dataTable')" />
  <input id="button" name="submit" type="submit" value="Submit Data" />

  <p></p>

</form>

Help will be highly appreciated

forms php jquery javascript
1 Answers

You need to make an array with each input, instead of name="course" write name="course[]" (same with every input). eg:

HTML:

<form action="data.php" enctype="multipart/form-data" id="form" method="post" name="form">
  <table id="dataTable" class="form" border="1">
    <tbody>
      <p>
        <td >
          <input type="checkbox" name="chk[]" checked="checked" />
        </td>
        <td>
          <label for="course">Course</label>
          <select id="course" name="course[]">
            <option></option>
            <option>Course 1</option>
            <option>Course 2</option>
            <option>Course 3</option>
            <option>Course 4</option>
            <option>Course 5</option>
          </select> 
        </td>
        <td>
          <label for="year">Year</label>
          <select id="year" name="year[]">
            <option>Select Year</option> 
            <option>2000</option>
            <option>2001</option>
            <option>2002</option>
          </select>
        </td>

        <td>
          <label for="semester">Semester</label>
          <select id="semester" name="semester[]">
            <option>Select Semester</option> 
            <option>1</option>
            <option>2</option>
            <option>3</option>
          </select>
        </td>
      </tbody>
    </table>
    <p> 
    <input type="button" value="Add Course" onClick="addRow('dataTable')" /> 
    <input type="button" value="Remove Course" onClick="deleteRow('dataTable')" />
    <input id="button" name="submit" type="submit" value="Submit Data" />

  <p>

</form>

JS: the same.

And the "data.php" will recieve a multidimensional array. You can see the result with:

<?php
echo '<pre>';
print_r($_POST);
echo '</pre>';
?>

If you fill 3 rows you will get this $_POST array:

Array
(
    [chk] => Array
        (
            [0] => on
            [1] => on
            [2] => on
        )

    [course] => Array
        (
            [0] => Course 1
            [1] => Course 2
            [2] => Course 3
        )

    [year] => Array
        (
            [0] => 2000
            [1] => 2001
            [2] => 2002
        )

    [semester] => Array
        (
            [0] => 1
            [1] => 2
            [2] => 3
        )

    [submit] => Submit Data
)
user_72516270
Related