$(this).attr('id') returns undefined, despite id being defined

Question

I am going to have several forms, which all use the same class, on a page. They all work the same way. However, I have issues making things work. There is a that needs to update other fields when the user changes the field.

I got this working fine, when there is only one form. However, when i try to have more than one form, it breaks down. I switched from id to class to have the script run, but now I am in situation where jQuery won't give me the ID.

Here is what the HTML looks:

<form class='varaosaTuote' id='lomake0'> 
                <input type='hidden' value='Add' name='Action' id='Toiminto'> 

            <table> <tr> 

            <th> Koko </th>

            <th> RTK    </th>

            <th> Määrä  </th>

            <th> Hinta/kpl  </th>

            </tr>

            <tr>
<td> 
 <select class='varaosaKoko' id='valitsin0' name='id'> 
<option value='47'>18/450 </option> 
<option value='48'>18/600 </option> 
<option value='49'>22/450 </option> 
<option value='50'>22/600 </option> 
 </select> </td> 

                <td> <input id='RTK0' type='text'' name='RTK' value='' readonly> </td> 

                <td> <input type='text' name='amount' id='maara'> </td> 

                <td> <p id=hinta><p></td>
 <tr></table>

And this is the Jquery:

$(".varaosaKoko").ready( function () {
        var id = $(this).attr('id');
        var luokka = $(this).attr("class");
        //var parent = $(this).closest('form');

        console.log("Valmiina kenttä id:" + $(this).attr('id') + ", luokka: " + luokka);


    });

Yet, it always gives both id and class as "undefined". In code, as you can see, they are defined.

Anyone have any idea what is wrong? The HTML is generated with PHP, since the plan to have more than one form of the same class, so each one gets their own identifier as a number for id.

EDIT

Clarification, since I forgot this:

The JQuery, in full form and not just the part I posted, is:

$(document).ready(function(){

 $(".varaosaKoko").ready( function () {
            var id = $(this).attr('id');
            var luokka = $(this).attr("class");
            //var parent = $(this).closest('form');

            console.log("Valmiina kenttä id:" + $(this).attr('id') + ", luokka: " + luokka);


        });

});

`this === document`, not your form. Not sure `.ready()` work on HTMLelements... — Karl-André Gagnon, Jul 14 '14 at 12:48
That's because `this` in the context of the ready handler is not valitsin0, it's the document. You need to explicitly find `.varaosaKoko` within the handler ([fiddle](http://jsfiddle.net/antisanity/szyP7/)). — canon, Jul 14 '14 at 17:10

score 4 · Accepted Answer · answered Jul 14 '14 at 12:48

4

You should rather use document with ready. and then iterate over the form and get their id and class:

$(document).ready( function () {
$(".varaosaKoko").each(function(){
    var id = $(this).attr('id');
    var luokka = $(this).attr("class");
    console.log("Valmiina kenttä id:" + $(this).attr('id') + ", luokka: " + luokka);
});});

answered Jul 14 '14 at 12:48

Milind Anantwar

81,290
25
94
125

I wonder, why OP's code not working..? any ideas..? His code is semantically correct as well as syntactically.. But why didn't it work..? Is ready event only designed for document..? – Rajaprabhu Aravindasamy Jul 14 '14 at 12:53
@RajaprabhuAravindasamy: see comments on the question. – Milind Anantwar Jul 14 '14 at 12:54
1

@RajaprabhuAravindasamy I'm not sure what happen with the ready on an HTML element. Im sure about the fact that in his code, `this === document` – Karl-André Gagnon Jul 14 '14 at 12:57
1

@RajaprabhuAravindasamy: well it is true. ready can not be used with dom element. see this answer http://stackoverflow.com/a/19355923/1719752 – Milind Anantwar Jul 14 '14 at 12:58
@Karl-AndréGagnon `this === document` how you are telling this..? I confused about it since OP has bound ready event with another element right.? – Rajaprabhu Aravindasamy Jul 14 '14 at 13:01
@RajaprabhuAravindasamy im doing my research. I can't see why the event is firing and the first log (`this`) is the document. Trying to find out what's happening (probably gonna ask a question myself to know why if i can't find it). – Karl-André Gagnon Jul 14 '14 at 13:03
1

Found it! Doesn't matter what's in the jQuery selector, you just need to have a jQuery object to access the method `.ready()`, then it use a promise and run the function. [Here the revelant part for binding](https://gist.github.com/kagagnon/a13de27760ba1af883c0#file-gistfile1-js-L269) and [here's the revelant par for the resolving promise](https://gist.github.com/kagagnon/a13de27760ba1af883c0#file-gistfile1-js-L917) – Karl-André Gagnon Jul 14 '14 at 13:07
The code is already in $(document).ready, all my jQuery is. Also, this does not solve the issue that I need the select tag to call for a function to update other fields. – Mandemon Jul 14 '14 at 16:17
can you share the fiddle?? – Milind Anantwar Jul 14 '14 at 16:23
Okay, this one did find all the id's, for whatever reasons. I put two same classes and it found both ids. Still, need to figure how to find parent form from all this so I can adjust the correct form each time. – Mandemon Jul 15 '14 at 06:52
You can use the selector `$('elementselector').closest('form')`. this will return you parent form element. – Milind Anantwar Jul 15 '14 at 06:58
Thanks. I now got both parent form, so I can select the correct field to adjust and .change() is working also (I get ping which field and form has been adjusted). This solves my problem, thanks. – Mandemon Jul 15 '14 at 07:00

ramby · Answer 2 · 2014-07-15T15:08:11.617

It seems that your jQuery script is above the form. just place your jQuery script below the form. or before ending the body tag.

your DOM elements should be ready before calling the jQuery script related to them.

undefined means either it is really not defined or it is defined out of the scope/function and in your case it is defined out of scope (i.e forward reference issue)

So your page should look like as below:-

 <html>
    <head></head>
    <body>
    <form class='varaosaTuote' id='lomake0'> 
    <input type='hidden' value='Add' name='Action' id='Toiminto'> 

                <table> <tr> 

                <th> Koko </th>

                <th> RTK    </th>

                <th> Määrä  </th>

                <th> Hinta/kpl  </th>

                </tr>

                <tr>
    <td> 
     <select class='varaosaKoko' id='valitsin0' name='id'> 
    <option value='47'>18/450 </option> 
    <option value='48'>18/600 </option> 
    <option value='49'>22/450 </option> 
    <option value='50'>22/600 </option> 
     </select> </td> 

                    <td> <input id='RTK0' type='text'' name='RTK' value='' readonly> </td> 

                    <td> <input type='text' name='amount' id='maara'> </td> 

                    <td> <p id=hinta><p></td>
     <tr></table> 

     ///

     ///

     </form>

<script type="text/javascript">
     $("select.varaosaKoko").each( function () {
            var id = $(this).attr('id');
            var luokka = $(this).attr("class");        
            console.log("Valmiina kenttä id:" + $(this).attr('id') + ", luokka: " + luokka);


        });
</script>
</body>

The script is already inside $(document).ready, so it should fire only after the full document has been loaded. Sorry that I did't say it in OP. — Mandemon, Jul 14 '14 at 16:19
please check this hope it clear your problem http://stackoverflow.com/questions/6346238/get-jquery-this-id — ramby, Jul 14 '14 at 19:22
Just tried to move the jQuery after the form. Didn't work, gave me the same output. — Mandemon, Jul 15 '14 at 05:49

$(this).attr('id') returns undefined, despite id being defined

2 Answers2