Dynamically add controls to a page

**Mark Sreeves** · May 22nd, 2002, 03:11 AM

I want to add controls to a page on the click of a button.

The page needs to have multiple lines each containing 2 text boxes and a select with a new row being added each time a button is clicked.

I could do it by reloading the page but is it possible using just javascript?

**punkpie_uk** · May 22nd, 2002, 03:33 AM

You can use createElement. Heres an example

Code:

<html>
<head>
<title>Create Element Example</title>
<style type="text/css">
<!--
body {font-family:arial; font-size:8pt;)
//-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
function drawNewElement(objectID){
  var aElement=document.createElement(objectID);
  document.getElementById('form1').appendChild(aElement);
}
//-->
</script>

</head>
<body>
<form name="form1" id="form1">
  <label>This is a form</label><br>
  <label>Create New Element (HTML Code for the element you wish to create E.g. &lt;input type="button"&gt;</label><input type="text" name="obj">
  <input type="button" value="Create" onclick="drawNewElement(document.forms('form1').obj.value)"><br>
</form>
</body>
</html>

**Mark Sreeves** · May 22nd, 2002, 03:43 AM

Thanks for that Lee

Having given it some thought, the page is so complicated that I think I'll use the reloading method instead.

Thanks

**Mark Sreeves** · May 23rd, 2002, 03:35 AM

According to the MSDN site I can

You can also specify all the attributes inside the createElement method itself by using an HTML string for the method argument.

Any ideas why the options aren't showing in the select?

Code:

<html>
<head>


<script language="JavaScript" type="text/javascript">
<!--
var f;
function init()
{
f= document.getElementById('form1')
}
function newRow(){
  var aElement=document.createElement("<input name='t1'>")
  var oOption;
  f.appendChild(aElement);
  
  aElement=document.createElement("<SELECT name='s' style='WIDTH: 136px' id=select1><option selected value=1>Oprion 1</option><option value=2>Option 2</option></SELECT>");
  f.appendChild(aElement);
  
  aElement=document.createElement("<input name='t2'>")
  f.appendChild(aElement);
  
  aElement=document.createElement('br');
	f.appendChild(aElement);


}
//-->
</script>

</head>
<body onLoad='init()'>
<form name="form1" id="form1">
<input name="txt1" >
  <input type="button" value="Add Row" onclick="newRow()"><br>


</form>


</body>
</html>

**Mark Sreeves** · May 23rd, 2002, 06:24 AM

Sussed it now

Thread: Dynamically add controls to a page

Thread Tools

Display

Dynamically add controls to a page

Posting Permissions