{"id":1191,"date":"2023-04-22T16:26:29","date_gmt":"2023-04-22T16:26:29","guid":{"rendered":"https:\/\/247blogs.com\/wp\/laravel-9-tutorial-laravel-9-jquery-show-hide-div-with-radio-button-tutorial\/"},"modified":"2023-04-22T16:26:29","modified_gmt":"2023-04-22T16:26:29","slug":"laravel-9-tutorial-laravel-9-jquery-show-hide-div-with-radio-button-tutorial","status":"publish","type":"post","link":"https:\/\/247blogs.com\/wp\/laravel-9-tutorial-laravel-9-jquery-show-hide-div-with-radio-button-tutorial\/","title":{"rendered":"Laravel-9 Tutorial &#8211; Laravel 9 jQuery Show Hide Div with Radio Button Tutorial"},"content":{"rendered":"<div id=\"\">\n<p>In this tutorial, we will learn how to hide and show an HTML div element using the radio button in the Laravel 9 application with the help of jQuery.<\/p>\n<p>Laravel is a prevalent PHP web application framework for developing modern, robust, scalable web applications. jQuery, on the other side, is a profound JavaScript library that streamlines client-side scripting of HTML.<\/p>\n<p>Radio buttons are a more significant part of the form. It is a type of graphical user interface (GUI) element used in software and web application development. It is generically used to show a list of options from which a user can select only one option.<\/p>\n<p>Before we create a show hide div feature using jQuery in Laravel, we must understand a bit more about radio buttons.<\/p>\n<p>Radio buttons contain a tiny circle called the radio button and a label that defines the option. When a site visitor clicks on a radio button, it transforms its state to selected, and all other radio buttons in the group become deselected.<\/p>\n<h2>How to Show Hide Div in Laravel 9 using Radio Button and jQuery<\/h2>\n<ul>\n<li><strong>Step 1:<\/strong> Install Laravel Framework<\/li>\n<li><strong>Step 2:<\/strong> Build Controller File<\/li>\n<li><strong>Step 3:<\/strong> Register New Route<\/li>\n<li><strong>Step 4:<\/strong> Create Blade View<\/li>\n<li><strong>Step 5:<\/strong> Test Laravel Application<\/li>\n<\/ul>\n<h2>Install Laravel Framework<\/h2>\n<p>To install the laravel framework on your development system, you have to consider the following requirements:<\/p>\n<ul>\n<li>PHP >= 7.3<\/li>\n<li>Composer (Dependency Manager for PHP)<\/li>\n<li>MySQL or any other relational database<\/li>\n<\/ul>\n<p>Next, you have to install the Composer on your system; if you still need to do it, you can download and install it from the official website: <a href=\"https:\/\/getcomposer.org\/\" rel=\"noopener\" target=\"_blank\">https:\/\/getcomposer.org\/<\/a>.<\/p>\n<p>Then, open your terminal or command prompt and execute the following command to install Laravel:<\/p>\n<pre class=\" language-typescript\"><code class=\"  language-bash\">composer create-project laravel\/laravel --prefer-dist laravel-blog<\/code><\/pre>\n<pre class=\"  language-bash\"><code class=\"  language-bash\"><span class=\"token builtin class-name\">cd<\/span> laravel-blog<\/code><\/pre>\n<h2>Build Controller File<\/h2>\n<p>Open your command line interface and navigate to your Laravel project directory.<\/p>\n<p>Use the following command to create a new controller:<\/p>\n<pre class=\"language-bash\" tabindex=\"0\"><code class=\"language-bash\">php artisan make:controller FormController<\/code><\/pre>\n<p>You have to update the given code into the <strong>app\/Http\/Controllers\/FormController.php<\/strong> file.<\/p>\n<pre class=\"language-php\" tabindex=\"0\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\"><?php<\/span>\n<span class=\"token keyword\">namespace<\/span> <span class=\"token package\">App<span class=\"token punctuation\"><\/span>Http<span class=\"token punctuation\"><\/span>Controllers<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Http<span class=\"token punctuation\"><\/span>Request<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Support<span class=\"token punctuation\"><\/span>Facades<span class=\"token punctuation\"><\/span>Blade<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name-definition class-name\">FormController<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Controller<\/span>\n<span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">public<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function-definition function\">index<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">{<\/span>\n        <span class=\"token keyword\">return<\/span> <span class=\"token function\">view<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'home'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<h2>Register New Route<\/h2>\n<p>Routes in Laravel help you create the URLs that your app will respond to; hence you have to open and add the given code into the <strong>routes\/web.php<\/strong> file.<\/p>\n<pre class=\"language-php\" tabindex=\"0\"><code class=\"language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\"><?php<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Support<span class=\"token punctuation\"><\/span>Facades<span class=\"token punctuation\"><\/span>Route<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">App<span class=\"token punctuation\"><\/span>Http<span class=\"token punctuation\"><\/span>Controllers<span class=\"token punctuation\"><\/span>FormController<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token class-name static-context\">Route<\/span><span class=\"token operator\">::<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'\/home'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token class-name static-context\">FormController<\/span><span class=\"token operator\">::<\/span><span class=\"token keyword\">class<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string single-quoted-string\">'index'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><\/code><\/pre>\n<h2>Create Blade View<\/h2>\n<p>The blade is the default templating engine in Laravel; it offers a robust syntax for creating views in laravel.<\/p>\n<p>Blade view file takes the simple, readable PHP code and quickly generates HTML code.<\/p>\n<p>Put following code within the <strong>resources\/views\/home.blade.php<\/strong> file.<\/p>\n<pre class=\"language-php\" tabindex=\"0\"><code class=\"language-php\"><span class=\"token operator\"><<\/span><span class=\"token operator\">!<\/span><span class=\"token constant\">DOCTYPE<\/span> html<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span>html<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span>head<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>title<span class=\"token operator\">><\/span>Laravel Tut<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>title<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>link href<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha1\/dist\/css\/bootstrap.min.css\"<\/span> rel<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"stylesheet\"<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>link rel<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"stylesheet\"<\/span> href<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"<\/span><span class=\"token operator\">><\/span> \n    <span class=\"token operator\"><<\/span>script src<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"<\/span><span class=\"token operator\">><\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>script<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>head<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span>body<span class=\"token operator\">><\/span>\n  \n<span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"container mt-5\"<\/span><span class=\"token operator\">><\/span>\n      <span class=\"token operator\"><<\/span>h2 <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"mb-3\"<\/span><span class=\"token operator\">><\/span>Laravel jQuery Radio Button Div Hide Show Example<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>h2<span class=\"token operator\">><\/span>\n      <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"mb-4\"<\/span><span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>div<span class=\"token operator\">><\/span><span class=\"token operator\"><<\/span>input type<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"radio\"<\/span> name<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"type\"<\/span> value<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"userProfile\"<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">><\/span> User Profile<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>div<span class=\"token operator\">><\/span><span class=\"token operator\"><<\/span>input type<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"radio\"<\/span> name<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"type\"<\/span> value<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"products\"<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">><\/span> Products<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n     <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n      \n      <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"userProfile radioBtnChoose mb-3\"<\/span><span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>label<span class=\"token operator\">><\/span>User Profile<span class=\"token punctuation\">:<\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>label<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>input type<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"text\"<\/span> placeholder<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"Search user\"<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">><\/span>\n      <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n      <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"products radioBtnChoose\"<\/span><span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>label<span class=\"token operator\">><\/span>Products<span class=\"token punctuation\">:<\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>label<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>input type<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"text\"<\/span> placeholder<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"Search product\"<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">><\/span>\n      <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n      <span class=\"token operator\"><<\/span>script<span class=\"token operator\">><\/span>\n        $<span class=\"token punctuation\">(<\/span>document<span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">ready<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n          $<span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'input[type=\"radio\"]'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">click<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token keyword\">var<\/span> inputValue <span class=\"token operator\">=<\/span> $<span class=\"token punctuation\">(<\/span>this<span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">attr<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\"value\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            <span class=\"token keyword\">var<\/span> target <span class=\"token operator\">=<\/span> $<span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\".\"<\/span> <span class=\"token operator\">+<\/span> inputValue<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            $<span class=\"token punctuation\">(<\/span><span class=\"token string double-quoted-string\">\".radioBtnChoose\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">not<\/span><span class=\"token punctuation\">(<\/span>target<span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">hide<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            $<span class=\"token punctuation\">(<\/span>target<span class=\"token punctuation\">)<\/span><span class=\"token operator\">.<\/span><span class=\"token function\">show<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n          <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>script<span class=\"token operator\">><\/span>\n    \n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n  \n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>body<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>html<span class=\"token operator\">><\/span><\/code><\/pre>\n<h2>Test Laravel Application<\/h2>\n<p>We are going to start the Laravel development server:<\/p>\n<p>Hence, run the following command to start the Laravel development server:<\/p>\n<pre class=\"language-bash\" tabindex=\"0\"><code class=\"language-bash\">php artisan serve<\/code><\/pre>\n<p>Open your app using the following URL:<\/p>\n<pre class=\"language-bash\" tabindex=\"0\"><code class=\"language-bash\">http:\/\/127.0.0.1:8000\/home<\/code><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2023\/03\/15636-01.jpg\" alt=\"Laravel 9 jQuery Show Hide Div with Radio Button Tutorial\" width=\"800\" height=\"496\" class=\"alignnone size-full wp-image-20105\" srcset=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2023\/03\/15636-01.jpg 800w, https:\/\/www.positronx.io\/wp-content\/uploads\/2023\/03\/15636-01-768x476.jpg 768w, https:\/\/www.positronx.io\/wp-content\/uploads\/2023\/03\/15636-01-302x187.jpg 302w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\"><\/p>\n<h2>Conclusion<\/h2>\n<p>Radio buttons are frequently used in various forms, surveys, and other applications where the requirement is to make a single choice from the given options.<\/p>\n<p>Radio buttons are extremely facile and relatively easy to use, and their visual design makes it clear that only one option can be selected at a time.<\/p>\n<p>In this guide, we learned How to show and hide div components based on the selected state of radio buttons in Laravel using the jQuery library.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we will learn how to hide and show an HTML div element using the radio button in the Laravel 9 application with the help of jQuery. Laravel [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1192,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-1191","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","clearfix"],"_links":{"self":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/posts\/1191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/comments?post=1191"}],"version-history":[{"count":0,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/posts\/1191\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/media\/1192"}],"wp:attachment":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/media?parent=1191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/categories?post=1191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/tags?post=1191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}