jQuery Form Selectors Method Example

• A Form Selector selects the HTML element which has type=input field within the form element.
• It is one of the pseudo-class selectors that start with [: ].
• We must indicate [input:file] in jquery otherwise it take [*:file].
• Here we can see the example of input tag in HTML.

: Button

• This jquery selector operates in which input type has a button.
• The jquery executes only an element within the form elements.

$(document).ready(function () {
    $(':button').click(function () {
        alert("hai");
            });
});

• A type=button element will pass a signal to alert when the click event executes.

: checkbox

• In this jquery selector perform the checkbox element which declares the input type="checkbox" within form element.

$(document).ready(function () {
    $(':button').click(function () {
       alert($(':checked').val());
    });
});

• This example gets only the checked element value.

: Disabled

• query: disabled selector get an element which element has a disabled property.

$(document).ready(function () {
    $(':button').click(function () {
     alert($(':disabled').val());
    });
});

• This example gets an element which has the property value has disabled.

: enabled

• It acts like a disabled property.
• The: enabled selector selects an element which has the enabled=enabled property and also as a form element.

$(document).ready(function () {
    $(':button').click(function () {
     alert($(':enabled').val());
    });
});

• The enabled form element only select.

: focus

• The focusing form element to be executed.

$(document).ready(function () {
    $(':button').click(function () {
     $(':focus').css("background","green");
    });
}); 

• This example shows how its focused input field form element and its manipulation.

: file

• The file selector selects an element that has form parents.

$(document).ready(function () {
    $(':button').click(function () {                               
      $(':file').css("border","1px solid green");
      });
});

• A file element has manipulated in jquery.

: image

• An image input form element will be executed.
• This input field manipulates image elements only.

 $(document).ready(function () {
    $(':button').click(function () {                               
      $(':image').css("border","1px solid green");
      });
});    

• This example executes the image which has in the form field.

: input

• The entire input type form elements are to be executed.
• It handles all input type form elements.

 $(document).ready(function () {
    $(':button').click(function () {                               
      $(':input').val();
        });
});      

• an entire input form element value will be get.

: password

• A password input type element form element will be executed.

 $(document).ready(function () {
    $(':button').click(function () {                               
      $(':password').hide();
      });
});   

• This example shows how the password field

: radio

• The radio input type form element will be executed.

$(document).ready(function () {
    $(':button').click(function () {                               
      $(':radio).val();
      });
});  

• The radio input field will be executed

: reset

• Jquery: reset is one of the button types of file elements.
• It executes which have type=reset.

$(document).ready(function () {
    $(':reset').click(function () {                               
      $(':input').val("welcome");
      });
});    

• Mainly the reset button is used to reset the entire input type values.

: selected

• The dropdown list selected element has executed.

$(document).ready(function () {
    $(':reset').click(function () {                               
      alert($(':selected').val());
      });
});  

• The select option input element has executed. 
• In this example get the selected input value.

: submit

• A submit is one of the input type form button element and also this submit input type submit a form elements to the server.

$(document).ready(function () {
    $(':submit').click(function () {                               
      alert("welcome");
        });
});   

• The submit type button gets an input type element values.

: text

• Jquery performs the form which has an input type as text.
• A text form field contains the string value.

$(document).ready(function () {
    $(':button').click(function () {                               
      alert($(':text').val("text"));
         });
}); 

• It executes the text form field.