laravel - Laravel 中的动态表单

Question

我想在 Laravel 中创建一个动态表单。

首先是我的表单（这是预先已经存在的输入字段。）：

 <div class="input-group">
                <input type="text" value="{{ old('youtube', $model->youtube) }}" name="youtube" class="form-control @error('youtube') is-invalid @enderror" id="id_youtube">
                <div class="input-group-append">
                    <a href="{{ route('basedata.target.create', ['popup'=>'true']) }}" onclick="centeredPopup(this.href, 'popup', 800, 500, 'yes');return false" class="btn btn-outline-secondary"><i class="fas fa-minus"></i></a>
                </div>
            </div>


            @error('youtube')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
        @if($model->youtube)
        <div class="col-sm-1">
            <p class="form-control-static">
                <a href="https://youtu.be/{{ $model->youtube }}" target="_blank">
                    https://youtu.be/{{ $model->youtube }} <i class="fa fa-external-link-alt"></i>
                </a>
            </p>
        </div>
        @endif
    </div>

要克隆的 Div：

<div class="form-group row" id="form">
        <label for="id_link" class="col-sm-2 col-form-label" style="visibility: hidden;">Link</label>
        <div class="col-sm-3">
            <select name="linktype_ids[]" class="form-control select2--full" id="id_linktype_ids">
                @foreach($linktypes as $linktype)
                <option value="{{ $linktype->id }}">{{ $linktype->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-sm-6">


            <div class="input-group">
                <input type="text" name="youtube" class="form-control" id="id_youtube">
                <div class="input-group-append">
                    <a href="{{ route('basedata.target.create', ['popup'=>'true']) }}" onclick="centeredPopup(this.href, 'popup', 800, 500, 'yes');return false" class="btn btn-outline-secondary"><i class="fas fa-minus"></i></a>
                </div>
            </div>

        </div>
    </div>

按钮：

<div class="form-group row" id="abc">
        <div class="col-sm-10 offset-sm-2">
            <button class="btn btn-secondary" id="add" data-add-click-handler>x</button>
        </div>
    </div>

JS：

<!-- Dynamic Form -->
$(document).on('click', '[data-add-click-handler]', function(event) {
    event.preventDefault();
    var html        =   $( "#form" ).html();
    //$.add(html).prependTo("#abc");
});

我必须怎么做才能克隆我的变量 html 中包含的代码？提前致谢！！！

标签： laraveldynamicform