www.webdeveloper.com
Results 1 to 2 of 2

Thread: dynamically add html controls using javascript in php page

  1. #1
    Join Date
    May 2011
    Posts
    2

    dynamically add html controls using javascript in php page

    hi
    I'm trying to add html controls dynamically.
    and I successful in that using clone method.

    But I lost my way .....
    I confused how to retrieve the values from the controls which I had cloned.
    Below is the simplified code i had done.

    Please help me in retrieving the values. I'm new in using dom objects

    Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    	<script language="javascript" type="text/javascript">
    	function Add(id){ 
    	 var table=document.getElementById(id);
    	 var clone=table.getElementsByTagName('TBODY')[0].cloneNode(true);
    	 table.appendChild(clone);
    	 counter++;
    	}
    	</script>
    </head>
    
    <body>
    <form name="form1" method="post" action="">
    
    <input type="button" name="" value="Add" onclick="Add('tst');"/>
    <input type="button" name="getValues" value="getValues" onClick="getValue()">
      <table id="tst" >
        <tbody> 
        <tr> 
          <td colspan="7" bgcolor="#EEEEEE"><b>Residential Address Details</b></td>
        </tr>
        <tr> 
          <td colspan="1"> Address Line 1 </td>
          <td colspan="6"> 
            <input type="text" style="width: 300" class="inputsubmit" name="address_line_1" id="address_line_1" onChange="saveValues1(this.value)">
          </td>
        </tr>
        <tr> 
          <td colspan="1"> Address Line 2 </td>
          <td colspan="6"> 
            <input type="text" style="width: 300" class="inputsubmit" name="address_line_2" id="address_line_2" onChange="saveValues2(this.value)">
          </td>
        </tr>
        <tr> 
          <td colspan="1"> Country of Residence </td>
          <td colspan="6"> 
            <input type="text" class="inputsubmit" name="country_residence" style="width:35&#37;" onChange="javascript:this.value=this.value.toUpperCase();" id="country_residence"/>
            &nbsp;&nbsp;&nbsp;&nbsp; Residency Type&nbsp;
            <select id="residence_perm_temp" name="residence_perm_temp" class="inputsubmit2">
              <option selected value="">Permanent</option>
              <option value="temporary">Temporary</option>
            </select>
          </td>
        </tr>
        </tbody> 
      </table>
    </form>
    </body>
    
    </html>
    Last edited by Kor; 05-10-2011 at 04:46 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    After you clone the elements, you must change (probably using an indentation) the name and the id of the form's elements.

    Here's an example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    var clone;
    function addRow(but){
    var tbo=but.parentNode.parentNode.parentNode;
    tbo.appendChild(clone);
    var rows=tbo.getElementsByTagName('tr');
    clone=rows[rows.length-1].cloneNode(true);
    orderNames(rows)
    }
    function removeRow(but){
    var thisRow=but.parentNode.parentNode;
    var tbo=thisRow.parentNode;
    tbo.removeChild(thisRow);
    var rows=tbo.getElementsByTagName('tr');
    orderNames(rows)
    }
    function orderNames(rows){
    var i=0,r,j,inp,t,k;
    	while(r=rows[i++]){
    		inp=r.getElementsByTagName('input');j=0;k=1;
    		while(t=inp[j++]){
    		if(t.type=="text"){t.name='col_'+k+'_row_'+i;k++;}
    		}
    	}
    }
    onload=function(){
    clone=document.getElementById('mytab').getElementsByTagName('tr')[0].cloneNode(true)
    }
    </script>
    </head>
    <body>
    <form action="">
    <table width="600" border="1" cellpadding="0" cellspacing="0" id="mytab">
    <tr>
    <td><input type="text" name="col_1_row_1"></td>
    <td><input type="text" name="col_2_row_1"></td>
    <td><input type="text" name="col_3_row_1"></td>
    <td><input type="button" value="ADD NEW ROW" onclick="addRow(this)"><br><br>
    <input type="button" value="REMOVE THIS ROW" onclick="removeRow(this)"></td>
    </tr>
    </table>
    </form>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles