How To Calculate Your Age Using Jquery, Ajax In Laravel

admin_img Posted By Bajarangi soft , Posted On 20-01-2021

We can make age calculator using ajax with laravel.

How To Calculate Your Age Using Jquery, Ajax In Laravel

Step 1: Create a View file like blog.blade.php add some fields like birthdate .
resources/views/welcome.blade.php

 

    <html>
    <head>
        <title>Age Calculator</title>
        <link rel='stylesheet' href='style.css'/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-latest.min.js"></script>
        <script src='script.js'></script>
    </head>
    <br>
    <body>
        <div id="main_container" class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <div id="birth_date_input" class="control-label">Birth Date*: 
                            <input type="date" id="birth_date" class="form-control">
                        </div>
                    </div>
                </div>     
                <div class="col-md-6">
                    <button id="calculate" class="btn btn-success" style="margin-top: 25px;">Calculate your age</button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="age_container"><span id="exact_age"></span></div>
                    <div id="age_container"><span id="exact_age1"></span></div>
                    <div id="age_container"><span id="exact_age2"></span></div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
        $("#calculate").click(function(){
            var birth=$("#birth_date").val();
             $.ajax({
                 type:"POST",
                url: '{{url('caldate')}}',
                data:  {"_token": "{{ csrf_token() }}",
                    birthdate   : birth},
                dataType: 'json',
                success: function (data) {
                    $('#exact_age').text(data.years);                
                }
            });
        });
    });
    </script>
    </body>
    </html>


Step: 2 Create a function in controller for calculating your age and send response using json to ajax .
app/Http/Controllers/BlogController.php

 

public function caldate(Request $request)
    {
        $birthdate = $request->input('birthdate');
        $today = date('Y-m-d');
        $date1=date_create($birthdate);
        $date2=date_create($today);
        $diff=date_diff($date1,$date2);
        $value['years'] = $diff->format("%Y Years %M Months %D Days");
        return response()->json($value);             
    }


Step: 3 Make a route for connection with controller.
app/Http/routes.php

Route::post('caldate', 'BlogController@caldate');

Related Post