{"id":2037,"date":"2013-01-20T07:24:26","date_gmt":"2013-01-20T07:24:26","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=2037"},"modified":"2013-01-20T07:24:26","modified_gmt":"2013-01-20T07:24:26","slug":"javascript-textbox-empty-how-to-check-if-textbox-is-empty-using-javascript","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/javascript-textbox-empty-how-to-check-if-textbox-is-empty-using-javascript\/","title":{"rendered":"How To Check If Textbox Is Empty Using JavaScript"},"content":{"rendered":"<p>If you have worked with forms, then you would know how important it is to process the form input to make sure that all the required\u00a0information\u00a0is filled out properly. In this article, I am going to share a very easy way that you can use to <em><strong>check if Textbox is Empty using JavaScript<\/strong><\/em>.<\/p>\n<p><!--more--><\/p>\n<h2>How to use\u00a0JavaScript to\u00a0Check If Textbox Is Empty?<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=2037\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>For this example, I am assuming that we have a Textbox in a form and we need to check if this textbox is empty or not when the &#8220;Check&#8221; button is clicked.<\/p>\n<h3>Example: Check if Textbox has contents or if it is empty using JavaScript<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example \">&lt;script Language=\"JavaScript\"&gt;\n&lt;!--\nfunction check_blank()\n{\n\/\/ If the value of the textbox is empty, then show an alert\nif (my_form.state.value == \"\")\n{\nalert(\"Please fill in State.\");\n\n\/\/ Focus the textbox so that user can fill it\nmy_form.state.focus();\n\n\/\/ return false to stop further processing\nreturn false;\n}\n\n\/\/ If state is not null continue processing\nreturn true;\n}\n--&gt;\n&lt;\/script&gt;\n\n&lt;form name=\"my_form\" id=\"my_form\" action=\"#\" onsubmit=\"return check_blank();\"&gt;\n&lt;label for=\"state\"&gt;State&lt;\/label&gt;\n&lt;input type=\"text\" name=\"state\" id=\"state\" &gt;\n&lt;input type=\"submit\" value=\"Check\"&gt;\n&lt;\/form&gt;<\/pre>\n<p>Once you run the above code and click the &#8220;Check&#8221; button, the page will show an alert. If you enter something in it and then click the button, the form will quietly submit the info.<\/p>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=2037\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p><strong>Simple, isn&#8217;t it?<\/strong><\/p>\n<p>Do you know of any other ways to use <strong><em>JavaScript to\u00a0check if textbox is empty<\/em><\/strong>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you have worked with forms, then you would know how important it is to process the form input to make sure that all the required\u00a0information\u00a0is filled out properly. In this article, I am going to share a very easy way that you can use to check if Textbox is Empty using JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":352,"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":[17,13],"tags":[80,35],"class_list":["post-2037","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-tips-and-tricks","category-tips-and-tricks","tag-javascript-demos-2","tag-javascript-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-wR","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2037","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=2037"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2037\/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=2037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=2037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=2037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}