I cannot find the name of a dynamically created javascript object (in jQuery)

Question

I have a page which uses javascript to add some textboxes to the page, and then we try to do some work based on these later.

What I am having a lot of trouble with though is that I cannot return the 'name' value which I am saving with the js.

Full page source (albeit a simplified version) is below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function () {
        //we use live because the inputs havent been created yet. 
        $('.myclass').live('blur', function () {

            //debugger;
            alert('textbox selected has ID '+ $(this).attr('id') ); //this returns txtInput
            alert('textbox selected has name '+ $(this).attr('name') ); //this returns null (or an empty string). 
        });

    AddInputTextBox("My Label: ", "txtInput", "mydiv", "MyName");

    });

    function AddInputTextBox(LabelValue, Id, divToAddTo, NameKey) {
        //debugger;
        var txtbox = document.createElement('input');
        txtbox.setAttribute("type", "text");
        txtbox.setAttribute("id", Id);
        txtbox.setAttribute("name", NameKey);
        txtbox.setAttribute("class", "myclass"); 

        alert('Textbox created with name = ' + txtbox.name);

        var foo = document.getElementById(divToAddTo);
        foo.innerHTML += LabelValue;
        foo.appendChild(txtbox);
    } 
    </script> 
</head>

<body>
    <div id="mydiv">
        <!-- placeholder -->
    </div>
</body>
</html>

So as you can see, document.ready runs and creates one textbox. when the blur fires (box loses focus) - I can access the ID, class, type, etc, but I cannot get a value for the 'name'.

Sure it is something dead simple, but can someone tell me why?

It works for me here: jsfiddle.net/nick_craver/K88fL which browser is giving you issues? — Nick Craver
– Nick Craver, Commented Dec 20, 2010 at 16:16
Hmmm, I have just tried in FF and it works (never thought of it being a browser issue), but IE does not work. IE8 to be precise — jb.
– jb., Commented Dec 20, 2010 at 16:24

Pointy · Accepted Answer · 2010-12-20 16:48:16Z

1

When you create <input> elements with IE, you have to do it like this:

var txtbox = document.createElement('<input name="' + NameKey + '">');

IE doesn't like you changing the "name" attribute of an <input> once it exists, so you have to tell it what you're going to do in the call to "createElement()".

One might wonder why you're not using jQuery to build your dynamic content, since you've loading it anyway.

(edit I thought it was the "type" attribute, but now I think it's "name".)

answered Dec 20, 2010 at 16:48

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

1 Comment

jb. Over a year ago

the javascript is an old method which is well-tested and reliable. i'm just modernizing the page as a whole. and if it aint broke dont fix it. Thanks for the answer though, exactly what i needed.

rcravens · Accepted Answer · 2010-12-20 16:19:05Z

0

This seems to be working for me.

http://jsfiddle.net/dem5d/

Am I missing something?

Bob

answered Dec 20, 2010 at 16:19

rcravens

8,3982 gold badges35 silver badges27 bronze badges

Collectives™ on Stack Overflow

I cannot find the name of a dynamically created javascript object (in jQuery)

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