Process each form fields in a form using JQuery

Question

I have many questions based on form. I don't know the title suits or not. I created a JSP page and contains a form. It has many fields like input, select, textarea.

First is I want to count the number of fields in the form using JQuery. I tried the following.

var ln=$("#fileUpload").find('input,select,textarea').length;
alert(ln);

The form has one select box, 3 input fields and a textarea. But it was giving 0 , instead of 5 .( #fileUpload is the form id I want to submit) How to get the exact number of fields?

Next is, I want to get each element in the form and find some attribute value. For examaple I want to get the name or id attribute for each element.

Answer 1

I would recommend using each() function:

$("#fileUpload input,select,textarea").each(function(){
    console.log(this);
}

Btw: don't use alert, use console.log() instead ;)

Answer 2

There should no problem in your code

Check that you have added the jquery and add an attribute to your form id="fileUpload" then check

Also, check you don't have any other element having id fileUpload like input type="file"

In your page <form id='fileUpload' ... > must be unique

Fiddle http://jsfiddle.net/qUJZf/

Answer 3

You need to make sure that the form is loaded before your js script is launched. To do so, wrap it in document ready like so:

$(function () {
    var ln = $('#fileUpload').find('input, select, textarea').length;
    alert(ln);
});