dynamically add html controls using javascript in php page

**hisuryahere** · 05-10-2011 01:29 AM

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>

**Kor** · 05-10-2011 03:50 AM

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: dynamically add html controls using javascript in php page

Thread Tools

Display

dynamically add html controls using javascript in php page

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions