Question

I would like to know the different elements and their types in a form.

My HTML looks like this:

<form action="save_form" method="post" id="newform" name="newform">
          <div class="form_description">
            <h2 class="editable">Form title. Click here to edit</h2>
            <p class="editable">This is your form description. Click here to edit.</p>
          </div>
          <ul id="form_body" class="ui-sortable">
          <li id="field1" class="">
            <a href="#" onclick="return false;" class="hover">
            <label class="editable" for="field1">Text1</label>
            <input type="text" name="field1" value="">
            </a>
            </li>
            <li id="field2" class="">
            <a href="#" onclick="return false;" class="hover">
            <label class="editable" for="field2">Paragraph2</label>
            <div><textarea cols="" rows="" class="textarea" name="field2"></textarea></div>
            </a>
            </li>
            <li id="radiogroup3" class="">
            <a href="#" onclick="return false;" class="hover">
            <label class="editable" for="radiogroup3">Label3</label>
            <input type="radio" id="radiogroup31" name="radiogroup3" value="1" class="element radio">
            <label class="choice editable" for="radiogroup31">option1</label>
            <input type="radio" id="radiogroup32" name="radiogroup3" value="2" class="element radio">
            <label class="choice editable" for="radiogroup32">option2</label>
            <input type="radio" id="radiogroup33" name="radiogroup3" value="3" class="element radio">
            <label class="choice editable" for="radiogroup33">option3</label>
            </a>
            </li></ul>
        </form>

I came up with the function below but this.type does not return any value (undefined) even though
firebug console shows the correct value.

I cannot use attr(‘type’) since it does not work for textarea and labels.

test = $('#newform').map(function(){ return $.makeArray(this.elements); });

if (test.length != 0) {
    test.each(function(){
        console.log($(this).type);
    });
}

Is there a way in which I can get all elements in a form, including label, textarea and radio buttons.

Answer 1

$(this).type is undefined, you should be using this.type to access the type property. You don’t really need to use map() either to get the elements. You can use this instead:

var $test = $($newform.get(0).elements);

But since elements won’t include labels you should just select the elements you want with a selector. Also since <label>‘s don’t have a type property you can access their nodeName instead which will be label.

var $test= $('#newform').find('input,label,textarea');

if ($test.length != 0) {
    $test.each(function(){
        var type = this.type ? this.type : this.nodeName.toLowerCase();
        console.log(type);
    });
}