jQuery Form Selectors Examples / References

Do you know what there are many form selectors in jQuery and it’s very easy to access the form elements very easily with just few lines of code. In this article, I am going share jQuery Form Selectors Examples with you for a better understanding of how the jQuery Form Selectors work.

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.