jQuery Form Input Selector And Attribute Selector Example

jQuery provides a lot of form input selectors ( include input type selector, input status selector ) for you to get form input web elements easily. Besides that, you can also use the jQuery Html tag attribute selector to get web elements by web element’s attribute values. This article will show you some examples of that.

1. jQuery Form Input Selectors Example.

The below picture is the jQuery form input selectors example web page.

jQuery provides the below form input selectors.
input:text: Return text input.
input:password: Return password input.

input:button: Return button input.
input:checkbox: Return checkbox input.
input:radio: Return radio button input.

input:image: Return image input.
input:file: Return file input.
input:hidden: Return hidden input.

input:submit: Return submit button input.
input:reset: Return reset button input.

1. 1 Source Code File.

form-input-selector.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Input Selector</title>
    <script src="../../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {

            // Get text input box and set it's text.
            $("input:text").val("Please input user name.");

            // Get password input box and set password.
            $("input:password").val("12345678");

            // Get button input, set button text and change background and text color.
            $("input:button").val("Click this button to register").css({color:'yellow', background:'blue'});

            // Get checkbox and check it.
            $("input:checkbox").attr('checked', true);

            // Get radio button and select it.
            $("input:radio").prop('checked', true);

            // Get image input and set it's border style.
            $("input:image").css("border", "dotted red 2px");

            // Get file input and set it's border style.
            $("input:file").css("border", "solid green 5px");

            // Get form hidden input and set it's value.
            $("input:hidden").val("This is hidden field.");

            // Get submit button input and set text.
            $("input:submit").val("Submit");

            // Get reset button input and set text.
            $("input:reset").val("Reset");
        });

    </script>
</head>
<body>

<form id="register" method="post" action="">

    <input type="text" value="" /><br>
    <input type="password" value="" /><br>
    <input type="button" value="" /><br>
    <input type="checkbox" value="checkbox" /><br>
    <input type="radio" value="radio button" /><br>
    <input type="image" src="../../images/ic_launcher.png" /><br>
    <input type="file" value="" /><br>
    <input type="hidden" value="" /><br>
    <input type="submit" value="" /><br>
    <input type="reset" value="" /><br>

</form>

</body>
</html>

2. jQuery Form Input Properties Selector Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/leSz2C2d-ig.

:enabled: Return all enabled web elements.
:disabled: Return all disabled web elements.

:checked: Return all checked web elements such as checkbox, radio button, etc.
:selected: Return all selected options in the select drop-down list.

form-input-properties-selector.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Input Properties Selector</title>
    <script src="../../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {

            // Get disabled text input and set text.
            $("input:text:disabled").val("Not Editable.");

            // Get enabled text input, set text and focus on it.
            $("input:text:enabled").val("Editable.").focus();


            // When 'Reverse Select' button is clicked.
            $("#reverse_button").on('click', function () {

                // Get text input object array.
                var text_input_arr = $('input:text');

                // Get array length.
                var length = text_input_arr.length;

                // Loop the text input array.
                for(var i=0;i<length;i++)
                {
                    // Cast text input dom object to jQuery object.
                    var text_input = $(text_input_arr[i]);

                    if(text_input.prop("disabled")===true)
                    {
                        // If text input is disabled.
                        // Enable it by setting disabled attribute to empty.
                        text_input.prop('disabled', '');
                        // Set text to 'Editable'.
                        text_input.val('Editable');
                    }else
                    {
                        // If text input is enabled.
                        // Disable it by setting disabled property.
                        text_input.prop('disabled', 'disabled');
                        // Set text to 'Not Editable'
                        text_input.val('Not Editable');
                    }
                }

                // Get checkbox jQuery object.
                var checkbox = $("input:checkbox");

                if(checkbox.prop('checked'))
                {
                    // If checkbox is checked then set it to uncheck.
                    checkbox.prop('checked', '');
                }else
                {
                    // If checkbox is not checked then check it.
                    checkbox.prop('checked', 'checked');
                }

                // Get select option jQuery object.
                var select_option = $("select > option[value='javascript']");

                if(select_option.prop('selected'))
                {
                    // If the option is selected then deselect it.
                   select_option.prop('selected', '');
                }else
                {
                    // If the option is not selected then select it.
                    select_option.prop('selected', 'selected');
                }

            });
        });

    </script>
</head>
<body>

<form id="form" method="post" action="">

    <input type="text" disabled="disabled" value="" /><br>
    <input type="text" disabled="disabled" value="" /><br>
    <input type="text" enabled value="" /><br>
    <input type="checkbox" checked="checked" value="checkbox" /><br>
    <input type="radio" value="radio button" /><br>
    <select>
        <option value="java">Java</option>
        <option value="javascript" selected="selected">JavaScript</option>
        <option value="python">Python</option>
    </select><br/>

    <input type="button" id="reverse_button" value="Reverse Select" />

</form>

</body>
</html>

3. jQuery Html Tag Attributes Selector Example.

If the Html tag has attributes with or without value, you can also use it’s attribute to find the web elements like below.
[attribute]: Return web element has specified attribute.
[attribute=value]: Return web element which attribute value equal to the provided value.

[attribute!=value]: Return web element which attributes value does not equal the provided value.
[attribute^=value]: Return web element which attribute value start with provided value.
[attribute$=value]: Return web element which attribute value end with provided value.

[attribute*=value]: Return web element which attribute value contains provided value.
[attr1!=value1][attr2=value2][attr13^=value3]: Return web elements that match multiple attribute value selector at same time.
Below is the example image that uses the jQuery Html tag attributes selector example.

html-tag-attribute-value-selector.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html Tag Attribute Selector</title>
    <script src="../../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {

            // Get text input which has name attribute value start with 'user'.
            $("input:text[name^='user']").val("Jerry.");

            // Get input which has name attribute value end with 'ord'.
            $("input[name$='ord']").val("666666");

            // Get text input which has name attribute value contains 'add'.
            $("input:text[name*='add']").val("[email protected]").css({background:'blue', color:'yellow'});

            // Multiple attribute value selector. name attribute value contains phone and value attribute value is empty.
            $("input:text[name*='phone'][value='']").val("13901234567").css("color","blue");
        });

    </script>
</head>
<body>

<form id="form" method="post" action="">

    <input type="text" name="user_name" value="" /><br>
    <input type="password" name="password" value="" /><br>
    <input type="text" name="email_address" value="" /><br>
    <input type="text" name="phone" value="" /><br>
    <input type="text" name="phone" value="8888888" /><br>

</form>

</body>
</html>