如果字段失败，提交后在laravel中动态保持数据表单

问题描述

提交和请求失败后如何在 Laravel 7 中动态保持所有数据的形式。单击（按钮添加更多）后动态创建的所有表单被删除只保留第一个表单和很多旧数据我的问题。

1- 如何保持所有表单动态创建

2 - 如何保存所有数据

刀锋形态

Create VM

控制器

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

解决方法

如果失败，您可以在发布请求期间将请求输入闪存到会话中，然后检查其他路由是否存在您闪存的数据，然后根据旧输入构建表的一些逻辑https://laravel.com/docs/8.x/requests#flashing-input-to-the-session

或者，如果您懒惰，您可以在提交表单时发出 XHR 请求，仅用于验证检查，然后仅在通过时才提交

laravel laravel laravel-7 laravel-request