Why am I getting "undefined" when trying to print id values from form elements in JQuery?

Question

This is my form:

<form action="/Admin/usuarios/obtener_valores" method="POST">
<div class="span-16">
    <input type="hidden" value="1" name="usuarioPinIdHidden" id="usuarioPinIdHidden">
    <table class="summary" style="border: none;">
        <tr>
            <td colspan="2">¿A que edad tuvo sus primeras vacaciones?</td>
        </tr>
        <tr>
            <td colspan="2"><input id="text@&#39;+1+^+1" name="respuesta[0].respuesta" type="text" value=""/></td>
        </tr>
        <tr>
            <td colspan="2">¿Estaba casado en 1991?</td>
        </tr>
        <tr>
            <td colspan="2"><input id="boolean@&#39;+3+^+1" name="respuesta[1].respuesta" type="radio" value="true"/>
                <label for="boolean@'+3+^+1">Si</label>
                <br />
                <input id="boolean@&#39;+3+^+1" name="respuesta[1].respuesta" type="radio" value="false"/>
                <label for="boolean@'+3+^+1">No</label></td>
        </tr>
    </table>
</div>

This is a function to print all the id values after clicking the submit button:

$(document).ready(function() {
        $('form').submit(function (){
            return verificarRespuestas();
        });
    });

    function verificarRespuestas(){
        alert('hola');
        $('form').children().each(function(){
            var child = $(this);
            alert(child.id);
        });
        return false;
    }

but this is what it's printed:

• hola
• undefined
• undefined

when I expect to get these values:

• hola
• text@'+1+^+1
• boolean@'+3+^+1

What am I doing wrong?

Thanks in advance!

Answer 1

• children only selects the immediate children to the element, you want $('form').find('input') or $('form').find('input[id]') to only get those that have an ID, or $('form').find('input:visible') to only get those that are visible (ie, not hidden.)
• Once there, you can simply do this.id in the each. Or, through jQuery, $(this).attr('id').
• You have invalid IDs - not only do they have invalid characters, you cannot duplicate them as you do for the second input. What is the point of all the gibberish?

There are many smarter ways to denote field types in your inputs if you are doing some sort of client-side validation or styling, most commonly through classes but also through custom attributes or field types in HTML5. IDs are definitely not where you want to be putting booleanXXX information. The HTML spec says:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Answer 2

Description

You should use the jQuery attr() function to get the id.

jQuery.attr() Get the value of an attribute for the first element in the set of matched elements.

Sample

alert(child.attr('id');

More Information

• jQuery.attr()

Answer 3

child is a jquery object, thus it doesn't have an id propery.

You should use this:

  $('form').children().each(function(){
        var child = this;
        alert(child.id);

Or this:

  $('form').children().each(function(){
        var $child = $(this);
        alert(child.attr('id'));

You should add a prefix of $ to your jQuery variables.

Read this:
Is there any specific reason behind using $ with variable in jQuery

Answer 4

NOTE: YOU have invalid IDS

        $('form input').each(function(){
            alert(this.id);
        });