jQuery Form Input Selector And Attribute Selector Example

jQuery provide a lot of form input selectors ( include input type selector, input status selector) for you to get form input web elements easily. Beside that, you can also use jQuery html tag attribute selector to get web elements by web element’s attribute values. This article will show you some example about that.

1. jQuery Form Input Selectors Example.

jquery form input selectors example

jQuery provide below form input selectors.

  1. input:text : Return text input.
  2. input:password : Return password input.
  3. input:button : Return button input.
  4. input:checkbox : Return checkbox input.
  5. input:radio : Return radio button input.
  6. input:image : Return image input.
  7. input:file : Return file input.
  8. input:hidden : Return hidden input.
  9. input:submit : Return submit button input.
  10. 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.

  1. :enabled : Return all enabled web elements.
  2. :disabled : Return all disabled web elements.
  3. :checked : Return all checked web element such as checkbox, radio button etc.
  4. :selected : Return all selected options in select drop down list.
READ :   jQuery Pseudo Class Selector Example

jquery form input properties example

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.

  1. [attribute] : Return web element has specified attribute.
  2. [attribute=value] : Return web element which attribute value equal to the provided value.
  3. [attribute!=value] : Return web element which attribute value do not equal to the provided value.
  4. [attribute^=value] : Return web element which attribute value start with provided value.
  5. [attribute$=value] : Return web element which attribute value end with provided value.
  6. [attribute*=value] : Return web element which attribute value contains provided value.
  7. [attr1!=value1][attr2=value2][attr13^=value3] : Return web elements that match multiple attribute value selector at same time.
READ :   How To Use jQuery In Html

jquery web element attribute value 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>
(Visited 333 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.