Form selector

In this chapter you will learn:

Full list of jQuery form element selectors
Different ways to get all of the elements

List of form element selectors

jQuery contains filters that make it easy to select form elements. The following table summarizes all of the different form filters.

Filter	Description
:button	Selects all button elements and elements of type button.
:checkbox	Selects all elements of type checkbox.
:checked	Selects all elements that are checked.
:disabled	Selects all elements that are disabled.
:enabled	Selects all elements that are enabled.
:file	Selects all elements of type fi le.
:image	Selects all elements of type image.
:input	Selects all input, text area, select and button elements.
:password	Selects all elements of type password.
:radio	Selects all elements of type radio.
:reset	Selects all elements of type reset.
:selected	Selects all elements that are selected.
:submit	Selects all elements of type submit.
:text	Selects all elements of type text.

The following code show show to get the count of input elements.

<!DOCTYPE html> <!-- j  a  v  a 2  s . com-->
<html>
    <head>
        <script src="http://java2s.com/style/jquery-1.8.0.min.js"> 
        </script>
        <script>
            $(function(){ 
                var n = $(':input').length; 
                document.writeln(n); 
            });
        </script> 
    </head> 
    <body>
        <form name="" method="post"> 
            <input type="text" /> 
            <input type="hidden" /> 
            <input type="password" /> 
            <input type="radio" /> 
            <input type="reset" /> 
            <input type="submit" /> 
            <input type="image" /> 
            <input type="file" /> 
            <input type="checkbox" /> 
            <input type="reset" /> 
            <input type="button" value="hit me"/> 
            <button>Hit me too</button> 
            <select>
                <option>floor 1</option> 
                <option>floor 2</option> 
            </select>
            <textarea></textarea>
        </form> 
    </body> 
</html>

Click to view the demo

Get all of the elements

The following code shows a few different ways to get all of the elements in the same form.

<!DOCTYPE html> <!--from   j a  v  a2  s. c  o m-->
<html>
    <head>
        <script src="http://java2s.com/style/jquery-1.8.0.min.js"> 
        </script>
        <script>
            $(function(){ 
                var n1 = $("input").length; 
                var n2 = $(":input").length; 
                var n3 = $("form > *").length; 
                var n4 = $(":text").length; 
                var n5 = $("input[type='text']").length; 
                document.writeln(n1 + ","+ n2 +","+ n3 + "," + n4 + "," + n5); 
            });
        </script> 
    </head> 
    <body>
        <form name="" method="post"> 
            <input type="text" /> 
            <input type="text" /> 
            <input type="text" /> 
        </form> 
    </body> 
</html>