CODEWITHSUNDEEP
phpjavascriptmysql
john
john

Reputation: 61

add values from dynamically added rows into database

hi i am working on a php form which has to add a table row dynamically when add button is pressed and i am using for loop to save the values the problem is that it is not saving the data into my database and gives the error that the loop values of my textbox is undefined can anyone help me here is my script

<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" type="text/javascript">
var i=1;
function addRow()
{
          var tbl = document.getElementById('table1');
          var lastRow = tbl.rows.length;
          var iteration = lastRow - 1;
          var row = tbl.insertRow(lastRow);

          var firstCell = row.insertCell(0);
          var el = document.createElement('input');
          el.type = 'text';
          el.name = 'name' + i;
          el.id = 'name' + i;
          el.size = 20;
          el.maxlength = 20;
          firstCell.appendChild(el);

          var secondCell = row.insertCell(1);
          var el2 = document.createElement('input');
          el2.type = 'text';
          el2.name = 'address' + i;
          el2.id = 'address' + i;
          el2.size = 20;
          el2.maxlength = 20;
          secondCell.appendChild(el2);

          var thirdCell = row.insertCell(2);
          var el3 = document.createElement('input');
          el3.type = 'text';
          el3.name = 'contactNum' + i;
          el3.id = 'contactNum' + i;
          el3.size = 20;
          el3.maxlength = 20;
          thirdCell.appendChild(el3);
          alert(i);
          i++;
          frm.h.value=i;
          alert(i);

}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title></head>

<body>
<form action="submit.php" method="post" name="frm" id="frm">
<table width="40%" border="2" cellpadding="0" cellspacing="0" id="table1">
  <tr>
    <td><strong>Name</strong></td>
    <td><strong>Address</strong> </td>
    <td><strong>Contact Num</strong> </td>
  </tr>
  <tr>
    <td><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
    <td><input name="address" type="text" id="address" size="20" maxlength="20" /></td>
    <td><input name="contactNum" type="text" id="contactNum" size="20" maxlength="12" /></td>
  </tr>

</table>
<input type="button" value="Add" onclick="addRow();" />
<input name="Submit" type="submit" value="Submit" />
<label>
<input name="h" type="hidden" id="h" value="0" />
</label>
</form>
</body>
</html>

hereis my submit.php code

<?php
mysql_connect("localhost", "root", '')or die(mysql_error());
mysql_select_db("test") or die(mysql_error());
$num =  $_POST['h'];
for($i=0;$i<=$num;$i++)
{

        $name       = $_POST["name_$i"];
        $address    = $_POST["address_$i"];
        $contactNum = $_POST["contactNum_$i"];

mysql_query("INSERT INTO `com`(`name`, `add`, contact) Values('$name', '$address', '$contactNum')") or die(mysql_error());
}
echo "<h1>Done!</h1>";

?>

Upvotes: 1

Views: 5411

Answers (3)

Devang Rathod
Devang Rathod

Reputation: 6736

Below code will solve your problem and insert data in database.

<script language="javascript" type="text/javascript">
var i=1;
function addRow()
{
      var tbl = document.getElementById('table1');
      var lastRow = tbl.rows.length;
      var iteration = lastRow - 1;
      var row = tbl.insertRow(lastRow);

      var firstCell = row.insertCell(0);
      var el = document.createElement('input');
      el.type = 'text';
      el.name = 'name_' + i;
      el.id = 'name_' + i;
      el.size = 20;
      el.maxlength = 20;
      firstCell.appendChild(el);

      var secondCell = row.insertCell(1);
      var el2 = document.createElement('input');
      el2.type = 'text';
      el2.name = 'address_' + i;
      el2.id = 'address_' + i;
      el2.size = 20;
      el2.maxlength = 20;
      secondCell.appendChild(el2);

      var thirdCell = row.insertCell(2);
      var el3 = document.createElement('input');
      el3.type = 'text';
      el3.name = 'contactNum_' + i;
      el3.id = 'contactNum_' + i;
      el3.size = 20;
      el3.maxlength = 20;
      thirdCell.appendChild(el3);
     // alert(i);
      i++;
      frm.h.value=i;
    //  alert(i);
}
</script>

In make change in according to below :

<tr>
    <td><input name="name_0" type="text" id="name_0" size="20" maxlength="20" /></td>
    <td><input name="address_0" type="text" id="address_0" size="20" maxlength="20" /></td>
    <td><input name="contactNum_0" type="text" id="contactNum_0" size="20" maxlength="12" /></td>
</tr>

In submit.php made change like below.

for($i=0;$i<$num;$i++)

Upvotes: 0

Alexander
Alexander

Reputation: 7842

The values of the textbox is undefined - in PHP you are lookin for name_$i (with "_") and in javascript the names are without "_" (el.name = 'name' + i;)

Also pay attention that in your javascript your loop starting from 1 (- in your php). The first client side row is comming from HTML but there you didn't put any index (name="name" instead of name="name_0"). It's better even not to fill the table with any row and just call the function (with i=0) when the page is loaded.

Upvotes: 0

Joe Brown
Joe Brown

Reputation: 637

It appears that you are incrementing "i" one too many times.

      i++;
      frm.h.value=i;

should be

      frm.h.value=i;
      i++

or you could adjust the for loop:

     for($i=0; $i < $num; $i++)

Upvotes: 2

Related Questions