带有验证和存储 Jquery 的 Laravel 表单添加 html 元素答案

【问题标题】：Laravel Form with Validation and store Jquery add html elements带有验证和存储 Jquery 的 Laravel 表单添加 html 元素
【发布时间】：2020-08-27 07:55:58
【问题描述】：

我使用 Laravel，并且我有一个带有 laravel 验证和必填字段的表单（所以当我遇到错误时，它总是重新加载所有页面，并且我使用旧刀片标签保留值）。一切都很好，但我做了一个按钮来添加一些带有 jquery 的文本框

$(".add-more").click(function(){ 
      var html = $(".copy").html();
      $(".after-add-more").before(html);
    });

    $("body").on("click",".remove",function(){ 
      $(this).parents(".control-group").remove();
    });

当 Laravel 在提交后的每条无效消息处重新加载所有页面时，我如何保存旧值和创建的 n-html 元素？谢谢

【问题讨论】：

你的问题不清楚可以尝试添加一些代码让我们理解。
最佳做法是不重新加载页面并保持 html 不变。无需重新加载即可管理验证。
也在 Laravel 框架中？我知道 Laravel 总是重新加载，因为这个存在旧值检索器.....你确定吗？
好吧，我建议使用localStorage将数据保存到localstorage，在需要时检索，但记得在每个重新加载页面上清空localstorage。

标签： jquery laravel validation

【解决方案1】：

很简单，你不用重新加载整个页面，例如用laravel的@include包含一个元素，表格的内容在另一个刀片文件中，但它被包含了

<table class="table tablesorter ">
    <thead class=" text-primary">
        <tr>
            <th scope="col">ID</th>
            <th scope="col">TIPO</th>
            <th scope="col">fecha</th>
            <th scope="col">Monto</th>
            <th scope="col">Acciones</th>
        </tr>
    </thead>
    <tbody id="table">
        @include('component-table')
    </tbody>
</table>

组件表.blade.php


    <tr>
        <td>hi</td>
        <td>
            test
        </td>
        <td></td>
        <td></td>
        <td class="text-right">

        </td>
    </tr>

现在，您可以创建一个返回此视图的控制器，并在您调用该控制器时仅重新加载表，并将 html 替换为 jquery 的 html() 函数

//on controller 
    public function table()
    {
        return view('component-table.blade.php');
    }
//js
    async function reloadTable(){
        await $.ajax({
            type: "GET",
            url: "{{ route('component-table') }}",
            data: '',
            success: function(response){
                            $('#table').html(response)
                        }
        });
    }

【讨论】：

如果我只重新加载例如表格部分，laravel 验证不适用于没有重新加载的部分，我认为我需要使用旧值 lavaravel 功能吗？谢谢
无论什么需要验证，您都可以将其分离到另一个组件中，我通常按组件、表单、表格、模态等将所有内容分开，以便可以在不影响其他内容的情况下操作所有内容，如果您需要表单经过验证并且不希望重新加载页面的其余部分，只需将该表单放在另一个刀片模板中并包含它，将输入或错误闪现到会话中
我的意思是必须修复子刀片并重新加载父亲

【解决方案2】：

至少使用刀片我得到了这个，我不知道是否正确。恢复我所拥有的。一个包含多个字段和一个按钮的表单，每次您按下此按钮时都会添加其他 2 个 html 字段（一个是组合框，名称='tipo'，从数据库中的表（称为 moyens）中获取值）

@if( old('tipo') )
   @foreach (old('tipo') as $key => $value) 
    <!--<div>{{ $key . ' => ' . $value }}</div>-->
    <div class="col-sm-5">
    <select class="form-control" name="tipo[]">
        @foreach($moyens as $moyen)
            <option value="{{$moyen->code}}" @if($moyen->code == '$value') 'selected' @endif>{{ $moyen->name }}</option>
        @endforeach
    </select>
    </div>
    <div class="col-sm-4">
        <div class="input-group-prepend">
            <span class="input-group-text">&#8364</span>
            <input type="number" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control" name="importo[]" placeholder="importo" value="{{old('polizza')}}">
        </div>
        </div>
        <div class="col-sm-3">
        <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Cancella</button>
    </div>
    @endforeach
@endif

一切正常，但我无法在组合框/es 中检索旧的选定值

这是部分

 <option value="{{$moyen->code}}" @if($moyen->code == '$value') 'selected' @endif>{{ $moyen->name }}</option>

这个方法可以正确吗？谢谢

【讨论】：