in this tutorils will explain how to make a Form Repeater in Laravel Step by step.
First Step Create the Laravel Project using following command
composer create-project laravel/laravel billsystem-app
after that you have to create the routes files in web.php file
<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\BillController; Route::get('/', function () { return view('welcome'); }); Route::get('/bill', [BillController::class, 'index']);
After that create a controller
php artisan make:controller BillController
paste the following codes
class BillController extends Controller { public function index() { return view('bills.index'); } }
return view(‘bills.index’); which is passing the to respective view page inside the views folder
index.blade.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <style> .container { display: flex; justify-content: center; } </style> </head> <body <div class="container"> <div class="col-md-6" > <h2>Bill Form</h2> <form> <table class="table table-bordered" id="billTable"> <thead> <tr> <th>Product Name</th> <th>Quantity</th> <th>Price</th> <th>Total</th> <th>Action</th> </tr> </thead> <tbody id="billRows"> <tr> <td><input type="text" name="products[0][product_name]" class="form-control" required></td> <td><input type="number" name="products[0][quantity]" class="form-control quantity" required></td> <td><input type="number" name="products[0][price]" class="form-control price" required></td> <td><input type="number" class="form-control total" readonly></td> <td><button type="button" class="btn btn-danger removeRow">Remove</button></td> </tr> </tbody> </table> <button type="button" id="addRow" class="btn btn-primary" >Add Row</button> <hr> <div class="form-group"> <label for="grandTotal"><b>Grand Total:</b></label> <input type="number" id="grandTotal" class="form-control" readonly> </div> </form> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { let rowIndex = 1; // Add new row document.getElementById('addRow').addEventListener('click', function() { let row = `<tr> <td><input type="text" name="products[${rowIndex}][name]" class="form-control" required></td> <td><input type="number" name="products[${rowIndex}][quantity]" class="form-control quantity" required></td> <td><input type="number" name="products[${rowIndex}][price]" class="form-control price" required></td> <td><input type="number" class="form-control total" readonly></td> <td><button type="button" class="btn btn-danger removeRow">Remove</button></td> </tr>`; document.getElementById('billRows').insertAdjacentHTML('beforeend', row); rowIndex++; }); // Calculate total and grand total dynamically document.addEventListener('input', function(event) { if (event.target.classList.contains('quantity') || event.target.classList.contains('price')) { let row = event.target.closest('tr'); let quantity = row.querySelector('.quantity').value || 0; let price = row.querySelector('.price').value || 0; let total = quantity * price; row.querySelector('.total').value = total; calculateGrandTotal(); } }); // Remove row document.addEventListener('click', function(event) { if (event.target.classList.contains('removeRow')) { event.target.closest('tr').remove(); calculateGrandTotal(); } }); // Calculate grand total function calculateGrandTotal() { let grandTotal = 0; document.querySelectorAll('.total').forEach(function(totalInput) { grandTotal += parseFloat(totalInput.value || 0); }); document.getElementById('grandTotal').value = grandTotal; } }); </script> </body> </html>
Introduction to Flexbox When it comes to building responsive layouts, Flexbox offers a powerful and…
Introduction to CSS Grid The CSS Grid Layout is a powerful tool for creating responsive…
In this tutorils we are going to teach how to make a attractive Login &…
In this tutorial we are going to teach Form Repeater using HTML CSS JQuery.step by…
Introduction to AJAX and Laravel 11 AJAX, which stands for Asynchronous JavaScript and XML which…
Introduction to FD Rate Calculation In any banking project, accurately calculating Fixed Deposit (FD) rates…