how to add new input cell?

dewan · #1 (**permalink**) 05-02-10, 04:55 PM

hello there,
I made a input page where a table(inside the cell there is html input text box) takes some input . Now I want to add new input rows while click on Insert Rows button.
Here is a idea that how to add new rows,
Tryit Editor v1.4
but I m unable to find how I can set text boxes and access them.
Can anybody help me to resolve this problem or having new ideas to resolve actual problem?

job0107 · #2 (**permalink**) 05-02-10, 11:30 PM

In this example I am creating a simple contact form.

PHP Code:


			
<?php
if(!empty($_POST["submit"]))
{
 echo "Name: ".$_POST["Name"]."<br />
       Address: ".$_POST["Address"]."<br />
       City: ".$_POST["City"]."<br />
       State: ".$_POST["State"]."<br />
       Zip Code: ".$_POST["Zip"]."<br />
       Phone: ".$_POST["Phone"]."<br />
       Email: ".$_POST["Email"]."<br />";
 }
else{
?>
<html>
<head>
<script type="text/javascript">
function insertFormElements()
{
 var inputElement_array = new Array("Name","Address","City","State","Zip","Phone","Email");
 var obj=document.getElementById('myTable');
 for(var i=0;i<inputElement_array.length;i++)
 {
  var x = obj.insertRow(i);
  var l = x.insertCell(0);
  l.style.width = "50px";
  l.style.paddingRight = "10px";
  l.innerHTML = inputElement_array[i] + ":";
  var r = x.insertCell(1);
  r.innerHTML = "<input type='text' name='" + inputElement_array[i] + "'>";
  }
 var x = obj.insertRow(inputElement_array.length);
 var y = x.insertCell(0);
 y.colSpan = 2;
 y.align = "center";
 y.innerHTML = "<input type='submit' name='submit' value='Submit'>";
 document.getElementById('btn1').style.display = "none";
 }
</script>
</head>

<body>
<form name="contactForm" action="#" method="post">
 <table id="myTable" border="0"></table>
</form>
<button id="btn1" onclick="insertFormElements()">Insert Contact Form Elements</button>
</body>
</html>
<?php } ?>

dewan · #3 (**permalink**) 05-05-10, 06:06 PM

hello Jerry,
thanks for your kind reply.

Here in this problem, I have already created a table, codes are following

PHP Code:


			
    <h3> Update  </h3> <br>
    
<?php    
    if(empty($_POST['submit']))
    {
?>    
        <form method = "POST">
            Product Quantity  <input type = "text" name = "num" size = "10" >
            <input  type="submit" name = "submit" value = "Create" />    
        </form>

<?php
    }
    else
    {
?>        <form name="f2" action="up_inv2.php" method = "post">
        
        <table border="1" cellpadding="0" cellspacing="0" style = " border-collapse: collapse; border-bottom-width: 0" width = "17%">
            <tr>
                <td align="center" style = "border-style: solid; border-width: 1"> Product ID </td>
                <td align="center" style="border-top-color: #C0C0C0; border-top-width: 1"> Quantity </td>
            </tr>
        
<?php
            $n = $_POST['num'];
            $s = $_POST['submit'];

            for($i = 0; $i < $n; $i++)
            {
?>    
                <tr>
                    <td> &nbsp; PR <input type = "text" id="pid" name = "<?php echo 'pid'.$i; ?>" onBlur="pd(this)" size = "6" style = "float:none; border: 1px solid #FFFFFF"></td>
                    <td> <input type = "text" name = "<?php echo 'quan'.$i; ?>" size = "10" style = "float:none; border: 1px solid #FFFFFF"></td>
                </tr>
                        
      <?php } ?>
            
       </table>
       <input type = "reset" value = "Reset">
       <input type = "submit" name = "s" value = "Submit">
       </form> 
<?php       
     } ?>

Now I want to add Insert button, while click on insert button there will add a new row at the bottom of the table. I m succeed to add new cell but unable to access. on the product column new row will be named 'pid'.$i now how can i manage this.

job0107 · #4 (**permalink**) 05-06-10, 08:31 AM

Ok, sense I don't know what the function pd() does, I have inserted an alert() command in the pd() function that will alert the id and name of that input element.
This way you will be able to see the results of the existing input elements and the new ones that were added, using the insert button.
And for testing purposes, I added some PHP code to the top of the PHP so you can see the contents of the $_POST array when either of the forms are submitted.

PHP Code:


			
<html>
<head>
<style>
body{background:#0c0;}
</style>
<script>
function pd(obj)
{
 alert(obj.id+" - "+obj.name);
 }
function insRow()
{
 var objId = document.getElementById("rowNum").value;
 var obj=document.getElementById('myTable');
 var x = obj.insertRow();
 var l = x.insertCell(0);
 l.innerHTML = "&nbsp;&nbsp;PR&nbsp;<input type='text' id='pid"+objId+"' name='pid"+objId+"' onBlur='pd(this)' size='6' style='float:none;border:1px solid #FFFFFF;'>";
 var r = x.insertCell(1);
 r.innerHTML = "<input type='text' name='quan"+objId+"' size='10' style='float:none;border:1px solid #FFFFFF;'>";
 objId++;
 document.getElementById("rowNum").value=objId;
 }
</script>
</head>
<body>
<h3> Update  </h3> <br>

<?php
// This code added for testing purposes. //
if(!empty($_POST)){print_r($_POST);}
//////////////////////////////////////////

if(empty($_POST['submit']))
{
?>
<form method="POST">
 Product Quantity  <input type="text" name="num" size="10" >
 <input type="submit" name="submit" value="Create" />
</form>
<?php
 }
else
{
?>

<!-- I changed the action of the form for testing purposes. -->

 <form name="f2" action="#" method="post">
  <table id="myTable" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-bottom-width:0" width="17%">
   <tr>
    <td align="center" style="border-style:solid;border-width:1;"> Product ID </td>
    <td align="center" style="border-top-color:#C0C0C0;border-top-width:1;"> Quantity </td>
   </tr>
<?php
  $n=$_POST['num'];
  $s=$_POST['submit'];
  for($i=0;$i<$n;$i++)
  {
?>
   <tr>
    <td> &nbsp; PR <input type="text" id="pid<?php echo $i; ?>" name="<?php echo 'pid'.$i; ?>" onBlur="pd(this)" size="6" style="float:none;border:1px solid #FFFFFF;"></td>
    <td> <input type="text" name="<?php echo 'quan'.$i; ?>" size="10" style="float:none;border:1px solid #FFFFFF;"></td>
   </tr>
<?php
   }
?>
  </table>
  <br />
  <input type="reset" value="Reset">
  <input type="submit" name="s" value="Submit">
  <input type="button" value="Insert" onclick="insRow()">
  <input type="hidden" id="rowNum" name="n" value="<?php echo $n=empty($n)?0:$n; ?>">
 </form>
<?php
 }
?>
</body>
</html>

dewan · #5 (**permalink**) 05-07-10, 04:00 PM

Hello Jerry,

Actually function pd() was used for test purpose, which was included in head tag of HTML which part was not posted here. Anyways I got my solution... Now I m able to access new input cell(s).

thank-u.

job0107 · #6 (**permalink**) 05-07-10, 07:24 PM

Your welcome.