Dynamically Add Rows In HTML Table Using JavaScript and getting textbox value of each text box by submitting a button

Question

I have a table where I can dynamically add rows. I want to get the data in each row to a php array when I submit the save button . Can please somebody help me on this. I'm new to java-script and know very little about it. Thank you!

<HTML>
<HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <SCRIPT language="javascript">
        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name="chkbox[]";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount + 1;

            var cell3 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            element2.name = "txtbox[]";
            cell3.appendChild(element2);


        }

        function deleteRow(tableID) {
            try {
            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) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


            }
            }catch(e) {
                alert(e);
            }
        }

    </SCRIPT>
</HEAD>
<BODY>

    <INPUT type="button" value="Add Row" onClick="addRow('dataTable')" />

    <INPUT type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
 <form action="" method="post">
 <?php $i= 1; ?>
    <TABLE id="dataTable" width="350px" border="1">
        <TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD> 1 </TD>
            <TD> <INPUT type="text" name="harsh"/> </TD>
        </TR>
    </TABLE>
    <input name="saveNewSales" type="submit" value="Save" id="button2" style="text-align:center"/>
 </form>
 <?php

foreach($_POST as $name => $content) { // Most people refer to $key => $value
   echo "The HTML name: $name <br>";
   echo "The content of it: $content <br>";
}
?>

</BODY>
</HTML>

All the inputs with name attribute (checked checkboxes and fields) will be passed to the $_POST array in PHP, so you basically have them in one array — Ivan Yonkov
– Ivan Yonkov, Commented Aug 6, 2013 at 6:05
You should make yourself acquainted with jQuery. It is in mho a brilliant JS library which makes many things in JS generally a lot easier if not at all possible. I know, it is always extra work to learn another 'language' but it is definitely worth it. Using jQuery you will find several elegant ways to do your project. — Carsten Massmann
– Carsten Massmann, Commented Aug 6, 2013 at 6:11
I changed the code as you said.and it gives only the values of two rows. And is there a way to identify whether its a textbox or not. — harshanii
– harshanii, Commented Aug 6, 2013 at 6:33

Prashant Parekh · Accepted Answer · 2013-08-06 06:34:56Z

3

Your code is right, just little change over there

<TR>
  <TD><INPUT type="checkbox" name="chk"/></TD>
  <TD> 1 </TD>
  <TD> <INPUT type="text" name="<?php echo $i; ?>"/> </TD>
</TR>

replace with this code

<TR>
  <TD><INPUT type="checkbox" name="chkbox[]"/></TD>
  <TD> 1 </TD>
  <TD> <INPUT type="text" name="txtbox[]"/> </TD>
</TR>

and your work finish

answered Aug 6, 2013 at 6:34

Prashant Parekh

4281 gold badge7 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

harshanii Over a year ago

That works.. What if I have three textboxes and how can I identify from which column the data is taken <TABLE id="dataTable" width="350px" border="1"> <TR> <TR> <TD><INPUT type="checkbox" name="chkbox[]"/></TD> <TD> 1 </TD> <TD> <INPUT type="text" name="txtbox[]"/> </TD> <TD> <INPUT type="text" name="txtbox1[]"/> </TD> <TD> <INPUT type="text" name="txtbox2[]"/> </TD> </TR> </TR> </TABLE>

Prashant Parekh Over a year ago

just parse name like this.. txtbox[1], txtbox[2]... for this you can use $i as per your code.

score 0 · Accepted Answer · 2013-08-06 06:54:57Z

0

var rows=getElementsByTagName("tr");
var noOfRows=rows.length;

for(int i=0;i<noOfRows;i++){

   var html=rows[i].innerhtml; /*a single row's inner html say (<td>apple</td><td>25</td>)*/
   var td=html.match(/(?!<td>)([\s*\w*]*)[^<\/td>]/g);     
   /**
         td[0] is 'apple', td[1] is '25'
   **/  

}

edited Aug 6, 2013 at 6:54

answered Aug 6, 2013 at 6:47

user2587132

1 Comment

Vieira Over a year ago

Please would you mind explain how to create a select instead an input? for example, Audi, VW, Mercedes ...

Collectives™ on Stack Overflow

Dynamically Add Rows In HTML Table Using JavaScript and getting textbox value of each text box by submitting a button

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related