Dynamically Add Form Elements

This is an example of adding form elements to an existing form on the fly. Each new element is uniquely named by the function. Click the Submit button to view the created elements.

You can copy the page html from the textarea below and save it to your local system.

<!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>Dynamically Add Form Elements</title>

function newElement(location)
{
//location is are reference to the parentNode of the button clicked
myElement=location
myBR=document.createElement("BR")
myElement.appendChild(myBR)
mySpan=document.createElement("SPAN")
mySpan.innerHTML='text'+curText+' '
myElement.appendChild(mySpan)
//create a new input element
myNewElement=document.createElement("INPUT")
//assign attributes
myNewElement.type="text"
myNewElement.size="10"
myNewElement.value=""
myNewElement.name='text'+curText
myNewElement.id='text'+curText
//append the new element onto myElement
myElement.appendChild(myNewElement)
//increment curText for use in naming additional elements
curText=curText+1
}

//-->
</script>

</head>

<body>
<h1>Dynamically Add Form Elements</h1>
<p>This is an example of adding form elements to an existing form on the fly.  Each new element is uniquely 
named by the function.  Click the <strong>Submit</strong> button to view the created elements.</p><br />
<form method="post" action="http://kimoto.us/examples/generic_form_processor.php">
<button type="button" onclick="newElement(this.parentNode)">Add Textbox</button>
<br />
<br />
<span>text1 </span><input type="text" name="text1" id="text1" value="" size="10">
</form>
<button type="button" style="margin-left:10px;" onclick="document.forms[0].submit()">Submit</button>

</body>

</html>