Samolina One Samolina One - 3 years ago 186
jQuery Question

how to name objects dynamically created by javascript

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

Answer Source

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
)
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download