accessing data from dynamically created html table in php

Question

By using javascript i have added new rows to the table dynamically. but i don't know how to access the data from those dynamically created rows in PHP so that i can insert them into database.

i here by giving html and java script please help me to write PHP code to extract data from dynamically created table. i can extract data from static table by using DOM object.

<form name="frmtransport" method="post" action="transportation.php"  id="Form1">
  <table  id="Table1" name="transport">
    <tr >
      <td colspan="8" >
        Transportation 
      </td>
  </tr>
  <tr style="height: 36px;">
    <td colspan="2" Date 
  </td>
    <td    colspan="6" >
      <input type="text" id="jQueryDatePicker1"  name="trdate" value="25/02/2015">
    </td>
  </tr>
  <tr>
    <td>
      location 
    </td>
    <td>
      no.of boxes
    </td>
    <td>
      Gf.no 
    </td>
    <td>
      invoice no
    </td>
    <td>
      invoice date
    </td>
    <td>
      lorryno
    </td>
    <td>
      vat no 
    </td>
  </tr>
  <tr>
    <td >
      <select name="cmblocation" size="1" id="Combobox1"             style="position:relative;width:170px;height:36px;z-index:1;">
        <option value="volvo">
          Volvo
        </option>
        <option value="saab">
          Saab
        </option>
        <option value="mercedes">
          Mercedes
        </option>
        <option value="audi">
          Audi
        </option>
      </select>
    </td>
    <td >

      <input type="text" id="Editbox1" name="txtnoofboxes">

    </td>
    <td >

      <input type="text" id="Editbox2" name="txtgrno" >

    </td>
    <td >

      <input type="text" id="Editbox3" name="txtinvoiceno" >

    </td>
    <td >

      <input type="text" id="Editbox4" name="txtinvoiceno" >

    </td>
    <td >

      <input type="text" id="Editbox5" name="txtinvoiceno" >

    </td>
    <td >

      <input type="text" id="Editbox6" name="txtinvoiceno" >

    </td>
    <td >

      <input type="button" id="Button1" onclick="myFunction();" name="cmdadd" value="Add" >

    </td>
  </tr>

  <tr>
    <td colspan="8">

      <input type="submit" value="Save" name="btnsave" id="Button1" 
    </td>
    </tr>
  </table>

</form>

JavaScript Code:

function myFunction() {
    var table = document.getElementById("Table1");
    //var rowc=table.rows.length;
    var row = table.insertRow(4);
    row.className = "rowstyle";

    var cell0 = row.insertCell(0);
    var element = document.getElementById("Combobox1");
    var op = element.options[element.selectedIndex].text;
    document.getElementById("Combobox1").value = "";

    cell0.innerHTML = op;
    var cell1 = row.insertCell(1);
    cell1.innerHTML = document.getElementById("Editbox1").value;
    document.getElementById("Editbox1").value = "";

    var cell2 = row.insertCell(2);
    cell2.innerHTML = document.getElementById("Editbox2").value;
    document.getElementById("Editbox2").value = "";
    var cell3 = row.insertCell(3);
    cell3.innerHTML = document.getElementById("Editbox3").value;
    document.getElementById("Editbox3").value = "";
    var cell4 = row.insertCell(4);
    cell4.innerHTML = document.getElementById("jQueryDatePicker2").value;
    document.getElementById("jQueryDatePicker2").value = "";
    var cell5 = row.insertCell(5);
    cell5.innerHTML = document.getElementById("Editbox5").value;
    document.getElementById("Editbox5").value = "";
    var cell6 = row.insertCell(6);
    cell6.innerHTML = document.getElementById("Editbox6").value;
    document.getElementById("Editbox6").value = "";
    var cell7 = row.insertCell(7);
    cell7.innerHTML = '<input type="button" id="Button1" style="width:45px;height:35px;" value="Delete" onclick="deleteRow(this)"/>';

    /* cell1.innerHTML = document.getElementsByName("txtnoofboxes").value;
      cell2.innerHTML = document.getElementsByName("txtnoofboxes");*/


}

Answer 1

When you submit the form, only data from input fields in the form will be submitted to the server. Your code takes the entered values out of the input fields and places them in table cells, effectively removing them from the submitted data.

You need to add the values of the created rows to input fields (or use AJAX as Deepak Kamat suggested). When you add the values to an input field is up to you. You can do it:

1. When the user clicks add (This has the benefit of editable fields).
2. When the user clicks save.

The second option requires form submission via JavaScript form.submit() , but it allows you to keep the table unencumbered by lots of input fields, if that is a concern to you.

(Also, look into catching for null values so you don't create empty rows on accident)