{"id":922,"date":"2012-06-15T19:16:27","date_gmt":"2012-06-15T19:16:27","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=922"},"modified":"2012-06-15T19:16:27","modified_gmt":"2012-06-15T19:16:27","slug":"jquery-form-selectors-examples-jquery-form-selectors-reference","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-form-selectors-examples-jquery-form-selectors-reference\/","title":{"rendered":"jQuery Form Selectors Examples \/ References"},"content":{"rendered":"

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\u00a0jQuery Form Selectors Examples<\/strong><\/em> with you for a better understanding of how the\u00a0jQuery Form Selectors work.<\/p>\n

jQuery Form Selectors Examples<\/h2>\n

1. TextBox \u2013 $(“input:text”)<\/h2>\n

Select a textbox using jQuery<\/h3>\n
$(\"input:text\");<\/pre>\n
Get textbox value using jQuery<\/h3>\n
$(\"input:text\").val();<\/pre>\n
Set textbox value using jQuery<\/h3>\n
$(\"input:text\").val(\"This is some custom text.\");<\/pre>\n
2. Textarea \u2013 $(“textarea”)<\/h2>\n
Select a textarea using jQuery<\/h3>\n
$(\"textarea\");<\/pre>\n
Get textarea value using jQuery<\/h3>\n
$(\"textarea\").val();<\/pre>\n
Set textarea value using jQuery<\/h3>\n
$(\"textarea\").val(\"This is some custom text.\");<\/pre>\n
3. Password \u2013 $(“input:password”)<\/h2>\n
Select a password using jQuery<\/h3>\n
$(\"input:password\");<\/pre>\n
Get password value using jQuery<\/h3>\n
$(\"input:password\").val();<\/pre>\n
Set password value using jQuery<\/h3>\n
$(\"input:text\").val(\"This is some custom text.\");<\/pre>\n
4. Radio Buttons \u2013 $(“input:radio”)<\/h2>\n
Select a radio button using jQuery<\/h3>\n
$(\"input:radio\");<\/pre>\n
Get selected radio button option using jQuery<\/h3>\n
$(\"input:radio[name=radio_button_name]:checked\").val();<\/pre>\n
Select the first radio button option using jQuery<\/h3>\n
$('input:radio[name=radio_button_name]:nth(0)').attr('checked',true);<\/pre>\n
or<\/p>\n
$('input:radio[name=radio_button_name]')[0].checked = true;<\/pre>\n
5. Check Box \u2013 $(“input:checkbox”)<\/h2>\n
Select a checkbox using jQuery<\/h3>\n
$(\"input:checkbox\");<\/pre>\n
To check whether a checkbox is checked using jQuery<\/h3>\n
$(\"input:checkbox[name=checkbox_name]\").is(':checked');<\/pre>\n
To check a checkbox using jQuery<\/h3>\n
$(\"input:checkbox[name=checkbox_name]\").attr('checked',true);<\/pre>\n
To unchecked a checkbox using jQuery<\/h3>\n
$(\"input:checkbox[name=checkbox_name]\").attr('checked',false);<\/pre>\n
6. Select(dropdown box) \u2013 $(“select”)<\/h2>\n
Select a dropdown box using jQuery<\/h3>\n
$(\"select\")<\/pre>\n
or<\/p>\n
$(\"#dropdown_id\")<\/pre>\n
Get selected drop down box value using jQuery<\/h3>\n
$(\"#dropdown_id\").val();<\/pre>\n
Set drop down box value to a custom value using jQuery<\/h3>\n
$(\"#dropdown_id\").val(\"This is some custom value.\");<\/pre>\n
7. Submit button \u2013 $(“input:submit”)<\/h2>\n
Select a submit button using jQuery<\/h3>\n
$(\"input:submit\");<\/pre>\n
Add click event to Submit button using jQuery<\/h3>\n
$(\"input:submit\").click(function() {\n\/\/Do this\n});<\/pre>\n
8. Reset button \u2013 $(“input:reset”)<\/h2>\n
Select a reset button using jQuery<\/h3>\n
$(\"input:reset\");<\/pre>\n
Add click event to Reset button using jQuery<\/h3>\n
$(\"input:reset\").click(function() {\n\/\/Do this\n});<\/pre>\n
9. Hidden value \u2013 $(“input:hidden”)<\/h2>\n
Select a hidden value using jQuery<\/h3>\n
$(\"input:hidden\");<\/pre>\n
Get hidden value using jQuery<\/h3>\n
$(\"input:hidden\").val();<\/pre>\n
Set hidden value using jQuery<\/h3>\n
$(\"input:hidden\").val(\"This is some custom text.\");<\/pre>\n
10. Upload File \u2013 $(“input:file”)<\/h2>\n
Select a file using jQuery<\/h3>\n
$(\"input:file\");<\/pre>\n
Get file value using jQuery<\/h3>\n
$(\"input:file\").val();<\/pre>\n
Your Turn!<\/h5>\n
Do you know of any other jQuery form selectors<\/strong><\/em>? Feel free to share by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"
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\u00a0jQuery Form Selectors Examples with you for a better understanding of how the\u00a0jQuery Form Selectors work.<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[79,41],"class_list":["post-922","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-form-selectors","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-eS","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=922"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/922\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}