Q1315 How can I dynamically create a text box in a form on click of the image button?

irt.org | Knowledge Base | DHTML | Q1315 [ previous next ]

Q1315 How can I dynamically create a text box in a form on click of the image button?

Unless you use frames and rewrite the complete form, only Internet Explorer 4+ can do what you want:

<body onLoad="curField=0">
<form ID="myForm">
.
.
.
</form>
<a href="javascript:;" onClick="document.myForm.insertAdjacentHTML('BeforeEnd','<input type=text name='+(curField++)+'>'); return false;"><img src="add.gif"></a>

Amos Bannister writes:

The solution to this question is not entirely correct. Two possible solutions come immediately to mind, both of which I have used successfully in the past, and both of which work fine with both Internet Explorer and Netscape. A summary of these solutions is below - I can elaborate if you wish.

Solution 1: Create another FORM containing a TEXT INPUT control. Wrap the form in a <DIV> and set the visibility to invisible. When you want to "create" the text box, just make the DIV visible and position it where-ever you need.

Solution 2: It is possible on both Netscape and Internet Explorer to dynamically create layers (actually DIVs, but they're the same thing kind of). So a more advanced solution would be to create a new layer and write a new form definition to the layer. I have created a set of DHTML widgets based on Dan Steinman's DynAPI which do this quite nicely.

Feedback on 'Q1315 How can I dynamically create a text box in a form on click of the image button?'

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 30th March 2008. Maintained by: Martin Webb
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.