Add textfield dynamically into HTML : TextField « Form Control « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Event
7. Event onMethod
8. Form Control
9. GUI Components
10. HTML
11. Javascript Collections
12. Javascript Objects
13. Language Basics
14. Node Operation
15. Object Oriented
16. Page Components
17. Security
18. Style Layout
19. Table
20. Utilities
21. Window Browser
Microsoft Office Word 2007 Tutorial
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
C# / C Sharp
C# / CSharp Tutorial
ASP.Net
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
PHP
Python
SQL Server / T-SQL
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
JavaScript DHTML » Form Control » TextField 
Add textfield dynamically into HTML


/*
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. Text field tab Index
2. Is Text Editable
3. Get vcard name
4. Text Field autocomplete Example
5. TextField focus and select all
6. Show TextField value in Dialog
7. TextField focus, blur, and click action
8. Display textfield value in new page
9. JavaScript Loan Calculator
10. Another TextField jump
11. TextField get Focus and clear content
12. Validate an input field with minimum and maximum values
13. Validate an field with a maximum number of characters
14. Select the textfield and focus
15. Focus an input field
16. Jump to the next field
17. Get textfield value
18.  Methods and Properties of the Text Object
19. Selecting Text Upon Focus
20. Assign a default value to a Text object
21. Compound Interest Calculator
22. Resetting a Text Object to Default Value
23. Getting and Setting a Text Object's Value
24. Passing a Text Object (as this) to the Function
25. Text Object Select and Focus
26. Data Validation via an onChange event Handler
27.  Firing the onSame Event (FireFox)
28. Numerals Only
29. Letter only, yes no only textfield
30. Auto focus textfield
31. Block enter textfield
32. If the textfield has been changed
w___w__w_.__j__a___v___a___2__s.___c_om_ | Contact Us
Copyright 2003 - 08 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.