Question : laravel dynamically add remove table row
Answered by : rk-rohan
<!DOCTYPE html>
<html>
<head> <title>Laravel 5.7 - Dynamically Add or Remove input fields using JQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container"> <h2 align="center">Laravel 5.7 - Dynamically Add or Remove input fields using JQuery - Pakainfo.com</h2> <div class="form-group"> <form name="product_name" id="product_name"> <div class="alert alert-danger error-message-display" style="display:none"> <ul></ul> </div> <div class="alert alert-success print-success-msg" style="display:none"> <ul></ul> </div> <div class="table-responsive"> <table class="table table-bordered" id="dynamic_field"> <tr> <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td> <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td> </tr> </table> <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" /> </div> </form> </div>
</div>
<script type="text/javascript"> $(document).ready(function(){ var postURL = "<?php echo url('addProduct'); ?>"; var i=1; $('#add').click(function(){ i++; $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" name="name[]" placeholder="Enter your Product Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>'); }); $(document).on('click', '.btn_remove', function(){ var button_id = $(this).attr("id"); $('#row'+button_id+'').remove(); }); $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $('#submit').click(function(){ $.ajax({ url:postURL, method:"POST", data:$('#product_name').serialize(), type:'json', success:function(data) { if(data.error){ previewMessage(data.error); }else{ i=1; $('.dynamic-added').remove(); $('#product_name')[0].reset(); $(".print-success-msg").find("ul").html(''); $(".print-success-msg").css('display','block'); $(".error-message-display").css('display','none'); $(".print-success-msg").find("ul").append('<li>Record Inserted Successfully.</li>'); } } }); }); function previewMessage (msg) { $(".error-message-display").find("ul").html(''); $(".error-message-display").css('display','block'); $(".print-success-msg").css('display','none'); $.each( msg, function( key, value ) { $(".error-message-display").find("ul").append('<li>'+value+'</li>'); }); } });
</script>
</body>
</html>Source : https://www.pakainfo.com/php-laravel-dynamically-add-remove-table-row/ | Last Update : Tue, 21 Jun 22