Printable View
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?
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. <input type="button"></label><input type="text" name="obj">
<input type="button" value="Create" onclick="drawNewElement(document.forms('form1').obj.value)"><br>
</form>
</body>
</html>
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
According to the MSDN site I can
Any ideas why the options aren't showing in the select?Quote:
You can also specify all the attributes inside the createElement method itself by using an HTML string for the method argument.
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>
Sussed it now:)