Laravel-9 Tutorial – Laravel 9 jQuery Show Hide Div with Radio Button Tutorial

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 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.

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.

Before we create a show hide div feature using jQuery in Laravel, we must understand a bit more about radio buttons.

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.

How to Show Hide Div in Laravel 9 using Radio Button and jQuery

Step 1: Install Laravel Framework
Step 2: Build Controller File
Step 3: Register New Route
Step 4: Create Blade View
Step 5: Test Laravel Application

Install Laravel Framework

To install the laravel framework on your development system, you have to consider the following requirements:

PHP >= 7.3
Composer (Dependency Manager for PHP)
MySQL or any other relational database

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: https://getcomposer.org/.

Then, open your terminal or command prompt and execute the following command to install Laravel:

composer create-project laravel/laravel --prefer-dist laravel-blog

cd laravel-blog

Build Controller File

Open your command line interface and navigate to your Laravel project directory.

Use the following command to create a new controller:

php artisan make:controller FormController

You have to update the given code into the app/Http/Controllers/FormController.php file.


namespace AppHttpControllers;
use IlluminateHttpRequest;
use IlluminateSupportFacadesBlade;
class FormController extends Controller
{
    public function index()
    {
        return view('home');
    }
}

Register New Route

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 routes/web.php file.


use IlluminateSupportFacadesRoute;
use AppHttpControllersFormController;

Route::get('/home', [FormController::class, 'index']);

Create Blade View

The blade is the default templating engine in Laravel; it offers a robust syntax for creating views in laravel.

Blade view file takes the simple, readable PHP code and quickly generates HTML code.

Put following code within the resources/views/home.blade.php file.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Tut</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
  
<div class="container mt-5">
      <h2 class="mb-3">Laravel jQuery Radio Button Div Hide Show Example</h2>
      <div class="mb-4">
        <div><input type="radio" name="type" value="userProfile" /> User Profile</div>
        <div><input type="radio" name="type" value="products" /> Products</div>
     </div>
      
      <div class="userProfile radioBtnChoose mb-3">
        <label>User Profile:</label>
        <input type="text" placeholder="Search user" />
      </div>
      <div class="products radioBtnChoose">
        <label>Products:</label>
        <input type="text" placeholder="Search product" />
      </div>
      <script>
        $(document).ready(function () {
          $('input[type="radio"]').click(function () {
            var inputValue = $(this).attr("value");
            var target = $("." + inputValue);
            $(".radioBtnChoose").not(target).hide();
            $(target).show();
          });
        });
      </script>
    
</div>
  
</body>
</html>

Test Laravel Application

We are going to start the Laravel development server:

Hence, run the following command to start the Laravel development server:

php artisan serve

Open your app using the following URL:

http://127.0.0.1:8000/home

Conclusion

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.

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.

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.