CODEWITHSUNDEEP
phpjavascriptmysql
user1831375
user1831375

Reputation: 63

How to add dynamic textbox (row) and save to database using PHP

I have here my Javascript code that adds dynamic textbox (row) my problem is how can I save the values from the dynamic textbox to database using PHP script? Hope you can help me guys.. Thanks!

<script type="text/JavaScript"> 
  function addRow(r){ 
  var root = r.parentNode;//the root 
  var allRows = root.getElementsByTagName('tr');//the rows' collection 
  var cRow = allRows[0].cloneNode(true)//the clone of the 1st row 
  var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row 
  for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names) 
  cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1)) 
  } 
  root.appendChild(cRow);
  } 
  function shownames(){ 
  var allInp=document.getElementsByTagName('input'); 
  for(var i=0;i<allInp.length;i++){ 
  alert(allInp[i].name) 
  } 
  } 
  </script>

My HTML code:

   <form method="POST" action="#"> <table width="1024" border="0" cellspacing="6" cellpadding="0"> <tr>
      <td width="195"><div class="user"><input type="text" name="user_a" id="user"  tabindex="6"/></div></td> 
    <td width="410"><div class="reported"><input type="text" name="user_b" id="reported" tabindex="7"/></div></td> 
    <td width="399"><div class="reported"><input type="text" name="user_c" id="reported" tabindex="8"/></div></td> 
    <td width="10"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td> </tr> </table> </form>

Upvotes: 3

Views: 6143

Answers (2)

Anshul Gupta
Anshul Gupta

Reputation: 68

<html>
<head>
<title>Dynamic Form</title>
<script language="javascript">
<?php $i = 1; ?>
function changeIt()
{
    //alert(i);
    //var i = 1;

my_div.innerHTML = my_div.innerHTML +"<br><input type='text' name='mytext[<?php echo $i;?>]'><input type='text' name='mytext[<?php echo $i+1;?>]'><input type='text' name='mytext[<?php echo $i+2;?>]'><br>";
<?php $i = $i+3; ?>
}
</script>
</head>
<body>

<form name="form" action="http://localhost/try.php" method="post">
<!--<input type="text" name=t1>-->
<input type="button" value="test" onClick="changeIt()">
<div id="my_div"></div>
<p class="submit"><button type="submit">Register</button></p>       
</body>

try.php(this is the file where you will be catching values and then inserting into sql )

<?php
    $var = $_POST['mytext'];
    echo $var[1].$var[2];
     ?>

Upvotes: 0

Daxen
Daxen

Reputation: 527

You have to use just name of the text box which is added by dynamically.

 $('form').submit(function() {
 var data=($(this).serialize());
 return false;
 });

This function get all the elements value and create one string which is store in data, now data will pass in ajax call.

$('form').submit(function() {
 var data=($(this).serialize());
      $.ajax({
      type: "POST",
      url: "your_some.php",
      data: data,
      }).done(function( msg ) {
      alert( "Data Saved: " + msg );
     });
});

Upvotes: 1

Related Questions