Dynamically created input field using jquery is disabled

Question

I am working on a dynamic form in which I need to create a dynamic input field on the press of a button. Here is the JQuery code:

$(this).find(".inner").html(html_ + "<input type='text' class='TB' id='" + TxtID + "' />");

This is the created DOM markup:

<input type="text" class="TB" id="S0Q0_TB0"/>

This input field is working in Chrome and Safari (Enabled for edit), but it seems to be disabled in Opera, Firefox and IE 9.

Couldnt find a relevant question in the KB. Need a quick solution

Thanks in advance :)

Does any other code make it disabled? You code does not have anything to make it disabled. — xdazz
– xdazz, Commented Mar 20, 2012 at 8:48
The code is fine (though we don't what html_ is or if TxtID is unique or not). So if you have no other info to give us, you won't get any (good\helpful) answers.You see you already got two answers that won't help you a bit... — gdoron
– gdoron, Commented Mar 20, 2012 at 8:51
try assigning a value attribute to the input. i couldn't reproduce it based on the stripped code, it seems something other than the input code is interfering (e.g. the html_, the TxtID variable). — Eliran Malka
– Eliran Malka, Commented Mar 20, 2012 at 8:53

Alytrem · Accepted Answer · 2012-03-20 08:52:07Z

1

I tested it on firefox and Internet Explorer, and it works. http://jsfiddle.net/mDDPW/2/

Are you sure it's not a side effect for somewhere else in your code ?

answered Mar 20, 2012 at 8:52

Alytrem

2,6101 gold badge14 silver badges13 bronze badges

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

3 Comments

Ali Haider Over a year ago

Your snippet is spot on but in my project the created input field is disabled in Opera/FF/IE. Cant figure out why...but it works in Chrome/Safari

Ali Haider Over a year ago

Couldnt find an answer yet but ill take your effort into consideration. Thanks

Ali Haider Over a year ago

$.disableSelection(); was the culprit.

FrontEnd Expert · Accepted Answer · 2012-03-20 08:52:15Z

You can use append instead of .html

you are also appending but this is very easy to implement..

or if i am understanding your problem then any issue related to browser compatibility.. give browser compatibility..

like this->

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />

or try this>>

 jQuery('#mainField').find('tr:last').before("<tr><td colspan='3'>&nbsp;</td></tr ><tr><td></td><td align='center'></td><td></td></tr>");
                                                                        jQuery('#mainField').find('tr:last').prev().find('td:nth-child(1)').append(newField);
                                                                        jQuery('#mainField').find('tr:last').prev().find('td:nth-child(2)').append(newField2);
                                                                        jQuery('#mainField').find('tr:last').prev().find('td:nth-child(3)').append(newField3);

this is bad practice, user agent meta tags should not be used as permanent solution.
Cant append, the html structure will get broken. P.S: I am making a form builder, in which controls are being dragged/dropped on a div where they get created.

Collectives™ on Stack Overflow

Dynamically created input field using jquery is disabled

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related