Add textfield dynamically into HTML : JavaScript DHTML examples (example source code) » Form Control » TextField

JavaScript DHTML
C++
Java Products
Java Articles
JavaScript DHTML Home  »   Form Control   » [  TextField  ]   
 



Add textfield dynamically into HTML

Please note that some example is only working under IE or Firefox.


/*
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>
Related examples in the same category
1.  TextField focus and select all
2.  Show TextField value in Dialog
3.  TextField focus, blur, and click action
4.  Display textfield value in new page
5.  JavaScript Loan Calculator
6.  Another TextField jump
7.  TextField get Focus and clear content
8.  Validate an input field with minimum and maximum values
9.  Validate an field with a maximum number of characters
10.  Select the textfield and focus
11.  Focus an input field
12.  Jump to the next field
13.  Get textfield value
14.   Methods and Properties of the Text Object
15.  Selecting Text Upon Focus
16.  assign a default value to a Text object
17.  Compound Interest Calculator
18.  Resetting a Text Object to Default Value
19.  Getting and Setting a Text Object's Value
20.  Passing a Text Object (as this) to the Function
21.  Text Object Select and Focus
22.  Data Validation via an onChange event Handler
23.   Firing the onSame Event (FireFox)
24.  Numerals Only
25.  Letter only, yes no only textfield
26.  Auto focus textfield
27.  Block enter textfield
28.  If the textfield has been changed








Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.