jQuery Form Selectors Examples

1. TextBox – $(“input:text”)

Select a textbox using jQuery

$("input:text");

Get textbox value using jQuery

$("input:text").val();

Set textbox value using jQuery

$("input:text").val("This is some custom text.");

2. Textarea – $(“textarea”)

Select a textarea using jQuery

$("textarea");

Get textarea value using jQuery

$("textarea").val();

Set textarea value using jQuery

$("textarea").val("This is some custom text.");

3. Password – $(“input:password”)

Select a password using jQuery

$("input:password");

Get password value using jQuery

$("input:password").val();

Set password value using jQuery

$("input:text").val("This is some custom text.");

4. Radio Buttons – $(“input:radio”)

Select a radio button using jQuery

$("input:radio");

Get selected radio button option using jQuery

$("input:radio[name=radio_button_name]:checked").val();

Select the first radio button option using jQuery

$('input:radio[name=radio_button_name]:nth(0)').attr('checked',true);

or

$('input:radio[name=radio_button_name]')[0].checked = true;

5. Check Box – $(“input:checkbox”)

Select a checkbox using jQuery

$("input:checkbox");

To check whether a checkbox is checked using jQuery

$("input:checkbox[name=checkbox_name]").is(':checked');

To check a checkbox using jQuery

$("input:checkbox[name=checkbox_name]").attr('checked',true);

To unchecked a checkbox using jQuery

$("input:checkbox[name=checkbox_name]").attr('checked',false);

6. Select(dropdown box) – $(“select”)

Select a dropdown box using jQuery

$("select")

or

$("#dropdown_id")

Get selected drop down box value using jQuery

$("#dropdown_id").val();

Set drop down box value to a custom value using jQuery

$("#dropdown_id").val("This is some custom value.");

7. Submit button – $(“input:submit”)

Select a submit button using jQuery

$("input:submit");

Add click event to Submit button using jQuery

$("input:submit").click(function() {
//Do this
});

8. Reset button – $(“input:reset”)

Select a reset button using jQuery

$("input:reset");

Add click event to Reset button using jQuery

$("input:reset").click(function() {
//Do this
});

9. Hidden value – $(“input:hidden”)

Select a hidden value using jQuery

$("input:hidden");

Get hidden value using jQuery

$("input:hidden").val();

Set hidden value using jQuery

$("input:hidden").val("This is some custom text.");

10. Upload File – $(“input:file”)

Select a file using jQuery

$("input:file");

Get file value using jQuery

$("input:file").val();

Your Turn!

Do you know of any other jQuery form selectors? Feel free to share by commenting below.