php - keep data form dynamically in laravel after submit if have field fail

View Original

how to keep all data in form dynamically in Laravel 7 after submitting and request is failing. the all form Created Dynamically after click (button Add more ) is deleted only keep the first form and lot all old data My questions.

1- how to keep all form dynamically created

2 - how to keep all data

The Blade Form

    <!DOCTYPE html>
<html>
<head>
    <title>Add/remove multiple input fields dynamically</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>
</head>
<body>
  
<div class="container">
    <h2 align="center"> </h2> 
    <form action="{{ route('addmorePost') }}" method="POST">
        @csrf
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @if (Session::has('success'))
            <div class="alert alert-success text-center">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">?�</a>
                <p>{{ Session::get('success') }}</p>
            </div>
        @endif
        <table class="table table-bordered" id="dynamicTable">  
            <tr>
                <th>Name</th>
                <th>Qty</th>
                <th>Price</th>
                <th>Action</th>
            </tr>
            <tr>  
                <td><input type="text" name="addmore[0][name]" placeholder="Enter your Name" class="form-control" /></td>  
                <td><input type="text" name="addmore[0][qty]" placeholder="Enter your Qty" class="form-control" /></td>  
              <td><input type="text" name="addmore[0][price]" placeholder="Enter your Price" class="form-control" /></td>  
                <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
            </tr>  
        </table>  <button type="submit" class="btn btn-success">Save</button>
    </form>
</div>
<script type="text/javascript">   
    var i = 0;      
    $("#add").click(function(){  
        ++i;  
        $("#dynamicTable").append('<tr><td><input type="text" name="addmore['+i+'][name]" placeholder="Enter your Name" class="form-control" /></td><td><input type="text" name="addmore['+i+'][qty]" placeholder="Enter your Qty" class="form-control" /></td><td><input type="text" name="addmore['+i+'][price]" placeholder="Enter your Price" class="form-control" /></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');
    }); 
    $(document).on('click', '.remove-tr', function(){  
         $(this).parents('tr').remove();
    });    
</script>
</body>
</html>

The Controller

<?php

   

namespace App\Http\Controllers;

    

use Illuminate\Http\Request;

use App\ProductStock;

   

class ProductAddMoreController extends Controller

{

    /**

     * Display a listing of the resource.

     *

     * @return \Illuminate\Http\Response

     */

    public function addMore()

    {

        return view("addMore");

    }

    

    /**

     * Display a listing of the resource.

     *

     * @return \Illuminate\Http\Response

     */

    public function addMorePost(Request $request)

    {

        $request->validate([

            'addmore.*.name' => 'required',

            'addmore.*.qty' => 'required',

            'addmore.*.price' => 'required',

        ]);

    

        foreach ($request->addmore as $key => $value) {

            ProductStock::create($value);

        }

    

        return back()->with('success', 'Record Created Successfully.');

    }

}

Answer

Solution:

You can flash the request inputs into the session during the post request if it fails and then check in the other route if the data you flashed is there and then some logic to build the table based on old inputs https://laravel.com/docs/8.x/requests#flashing-input-to-the-session

Or if your lazy you could make an XHR request upon submitting the form just for validation checks, and then only submit it if it passed

Source