How to add an HTML form element dynamically using javascript

Question

I'm trying to add a text field to a form dynamically using javascript. From what I can tell, my code should work.

function change()
{
textField = document.createElement("text");
textField.id="sub"+count;
textField.name="sub"+count;
textField.value="Enter a name for another new subcategory";
textField.size="35";
textField.onchange="javascript:change()";
textField.onFocus="javascript:clearField()";
document.getElementById("addCatForm").appendChild(textField);
}

Evan Trimboli · Accepted Answer · 2010-06-23 16:29:08Z

2

You want:

var field = document.createElement('input');
field.type = 'text';

NB if you're doing lots of Javascript development, you might want to use a framework, such as ExtJS

The code to do it would be:

var field = Ext.get('form').createChild({
    tag: 'input'
    //other options
});
field.on('change', change);
field.on('focus', focus);

answered Jun 23, 2010 at 16:29

Evan Trimboli

30.1k6 gold badges49 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

The Who Over a year ago

You may want to use "setAttribute" so field.setAttribute("type", "text").

Peter Ajtai · Accepted Answer · 2010-06-23 16:30:28Z

1

You're creating a TEXT element, but adding things to it for an INPUT element.

answered Jun 23, 2010 at 16:30

Peter Ajtai

57.8k13 gold badges124 silver badges143 bronze badges

Collectives™ on Stack Overflow

How to add an HTML form element dynamically using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related