Add textfield dynamically into HTML

Add textfield dynamically into HTML : TextField : Form Control JAVASCRIPT DHTML TUTORIALS




/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/


<HTML> 
<HEAD> 
<TITLE>mergeAttributes() Method</TITLE> 
<SCRIPT LANGUAGE="JavaScript"> 
function doMerge(form) {
    var newPElem = document.createElement("P")
    var newInputElem = document.createElement("INPUT")
    newInputElem.id = newInputElem.uniqueID
    newInputElem.mergeAttributes(form.field1)
    newPElem.appendChild(newInputElem)
    form.appendChild(newPElem)
    newInputElem.value = newInputElem.outerHTML
}
// called by onChange event handler of fields
function upperMe(field) {
    field.value = field.value.toUpperCase()
}
</SCRIPT> 
</HEAD> 
<BODY onLoad="document.expandable.field1.value = document.expandable.field1.outerHTML"> 
<H1>mergeAttributes() Method</H1> 
<HR>
<FORM NAME="expandable" onSubmit="return false">
<P><INPUT TYPE="button" VALUE="Append Field 'Clone'" onClick="doMerge(this.form)"></P>
<P><INPUT TYPE="text" NAME="field1" ID="FIELD1" SIZE=120 VALUE="" STYLE="font-
size:9pt" onChange="upperMe(this)"></P>
</FORM> 
</BODY> 
</HTML>

1 Comments

Henrique

Saturday 19th of December 2009

Does not work in firefox...

Add textfield dynamically into HTML : TextField : Form Control JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Form Control » TextField »

Add textfield dynamically into HTML

1 Comments

Henrique

Leave a Comment / Note

JAVASCRIPT DHTML TUTORIALS