0

There is form which has table containing 1 row and 4 column.The add row button creates a exact row but with different ids .I want to obtain the data filled in this form and send to a php script when clicked on save and continue later button at the bottom .How can I do this?This being a html page.

<form name="myform">

<h3 align="left"><b>Computer</b><h3>
<table id="POITable" border="1" width="100%">
<tr>
<th style="width:10%">Sr No.</th>
<th>Item Description</th>
<th>Quantity</th>
<th>Rate(Inclusive of Taxes)</th>
<th>Total Cost</th>
</tr>
<tr>
<td>1</td>
 <td><textarea rows="4" cols="50" id="comp_item"></textarea></td>
 <td><input size=25 type="number" id="comp_quant"/></td>
  <td><input size=25 type="number" id="comp_rate"/></td>
 <td><input size=25 type="number" id="comp_total"/></td>
  </tr>
  </table>
  Total:<input type="text" name="computer" align="right"><br>
  <input type="button" id="addmorePOIbutton" value="Add New Row" onclick="insRow()"/>

   <script>

   function insRow()
  {
  console.log( 'hi');
  var x=document.getElementById('POITable');
  var new_row = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  new_row.cells[0].innerHTML = len;
  var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
  inp1.id += len;
   inp1.value = '';
  var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
  inp2.id += len;
   inp2.value = '';
  var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
   inp3.id += len;
   inp3.value = '';
   var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
  inp4.id += len;
  inp4.value = '';
   x.appendChild( new_row );
  document.getElementsByName("len")[0].value=len;
   }
   </script>
  <input type="submit" value="SAVE AND CONTINUE LATER">
  </form>

      </html>

1 Answer 1

1

To retrive your data in php you must add name attributes to your form input-fields. I have rewritten your code by replacing the input-id's with name instead, like so:

<td><textarea rows="4" cols="50" name="comp_item"></textarea></td>
<td><input size=25 type="number" name="comp_quant"/></td>
<td><input size=25 type="number" name="comp_rate"/></td>
<td><input size=25 type="number" name="comp_total"/></td>

also in your form-element you must specify action and method.

<form name="myform" action="myphpformhandler.php" method="POST">

I took the liberty to rewrite some of your code but the essentials are intact.

<form name="myform" action="myphpformhandler.php" method="POST"> <!-- point action towards the php-file where you wish to handle your data -->

    <h3 align="left"><b>Computer</b><h3>
    <table id="POITable" border="1" width="100%">
      <tr>
        <th style="width:10%">Sr No.</th>
        <th>Item Description</th>
        <th>Quantity</th>
        <th>Rate(Inclusive of Taxes)</th>
        <th>Total Cost</th>
      </tr>
      <tr>
        <td>1</td>
        <td><textarea rows="4" cols="50" name="comp_item"></textarea></td>
        <td><input size=25 type="number" name="comp_quant"/></td>
        <td><input size=25 type="number" name="comp_rate"/></td>
        <td><input size=25 type="number" name="comp_total"/></td>
      </tr>
    </table>
    Total:<input type="text" name="computer" align="right"><br>
    <input type="button" id="addmorePOIbutton" value="Add New Row"/>
    <input type="submit" value="SAVE AND CONTINUE LATER">
  </form>

  <script>

    (function() { // Prevent vars from leaking to the global scope

      var formTable = document.getElementById('POITable');
      var newRowBtn = document.getElementById('addmorePOIbutton');

      newRowBtn.addEventListener('click', insRow, false); //added eventlistener insetad of inline onclick-attribute.

      function insRow() {
        var new_row = formTable.rows[1].cloneNode(true),
        numTableRows = formTable.rows.length;

        // Set the row number in the first cell of the row
        new_row.cells[0].innerHTML = numTableRows;

        var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
        inp1.name += numTableRows;
        inp1.value = '';

        var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
        inp2.name += numTableRows;
        inp2.value = '';

        var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
        inp3.name += numTableRows;
        inp3.value = '';

        var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
        inp4.name += numTableRows;
        inp4.value = '';

        // Append the new row to the table
        formTable.appendChild( new_row );

        document.getElementsByName("len")[0].value = numTableRows;
      }
    })();
  </script>

Now to access your data in your "myphpformhandler.php" you use the $_POST-variable with your html-element names. like so!

$_POST['comp_item'];
$_POST['comp_item1'];
$_POST['comp_quant'];
$_POST['comp_quant1']; //etc...
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.