Eu tenho um formulário para o cadastro de empresas. Nesse cadastro a empresa pode ter vários certificados que devem ser adicionados de acordo com a necessidade. Eu tenho dois templates, um com os campos da empresa, e ou…

Laravel - Adicionar campos dinamicamente dentro de um formulário

Acho que você consegue algo bem feito usando js, pois você precisará primeiro esperar a página carregar para só depois usar o evento do click do botão…

Tendo isso em mente a primeira coisa a se fazer para não gerar conflito no php é indicar no form que o campo do certificado pode ser uma lista:

<input type="text" name="certificados[]">

Percebeu os colchetes (vazios) após ceritificados? Isso vai indicar para o php no submit que você está mandando 1 ou + do mesmo campo, ou seja, uma lista…

Segundo passo, no botão do “adicionar certificado” um evento:

<input type="button" value="Adicionar Certificado" onclick="addCert();">

E no js:

function addCert() {
    var lista = document.getElementsByName('certificados[]');
    var ultimoLista = lista[lista.length - 1];
    var novoCert = ultimoLista.cloneNode(true);
    var formPai = ultimoLista.parentNode; //ou document.getElementById('id_do_form');
    formPai.insertBefore(novoCert, ultimoLista.nextSibling);
}

É só uma ideia, sem seu código fica dificil acertarmos na mosca…

Não coloquei o código por que eu não tinha ideia de como começar a fazer isso.

Segue o código abaixo:
Formulário (os certificados vão dentro deste formulário)

<?php ?>
<div class="row">
    <div class="col-md-6">
        <div class="form-group{{ $errors->has('simplesNacional') ? ' has-danger' : '' }}">
            <label for="name">Simples Nacional</label>
            @if(!$clientPassword)
                <input type="text" class="form-control" placeholder="Simples Nacional" name="simplesNacional" value="{{ old('simplesNacional') }}" required autofocus>
            @else
                <input type="text" class="form-control" placeholder="Simples Nacional" name="simplesNacional" value="{{$clientPassword->simplesNacional}}">
            @endif
            @if ($errors->has('simplesNacional'))
                <span class="help-block">
                    <strong>{{ $errors->first('simplesNacional') }}</strong>
                </span>
            @endif
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group{{ $errors->has('siare') ? ' has-danger' : '' }}">
            <label for="name">SIARE</label>
            @if(!$clientPassword)
                <input type="text" class="form-control" placeholder="SIARE" name="siare" value="{{ old('siare') }}" required autofocus>
            @else
                <input type="text" class="form-control" placeholder="SIARE" name="siare" value="{{$clientPassword->siare}}">
            @endif
            @if ($errors->has('siare'))
                <span class="help-block">
                    <strong>{{ $errors->first('siare') }}</strong>
                </span>
            @endif
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <h4>Certificados</h4>
    </div>
</div>

<div class="row">
    <div class="col-md-3">
            <button type="button" id="addDigitalCertificate" class="btn btn-primary">Adicionar certificado digital</button>
    </div>
</div>

<div class="row" id="digitalCertificates">
    
</div>

Certificado (template com os campos do certificado)

<?php ?>
<div class="row">
    <div class="col-md-2">
        <div class="form-group{{ $errors->has('issueDate') ? ' has-danger' : '' }}">
            <label for="issueDate">Data de emissão</label>
            @if(!$digitalCertificate)
                <input type="date" class="form-control" placeholder="Data de emissão" name="issueDate" value="{{ old('issueDate') }}" required autofocus>
            @else
                <input type="date" class="form-control" placeholder="Data de emissão" name="issueDate" value="{{$digitalCertificate->issueDate}}">
            @endif
            @if ($errors->has('issueDate'))
                <span class="help-block">
                    <strong>{{ $errors->first('issueDate') }}</strong>
                </span>
            @endif
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group{{ $errors->has('expirationDate') ? ' has-danger' : '' }}">
            <label for="expirationDate">Data de expiração</label>
            @if(!$digitalCertificate)
                <input type="text" class="form-control" placeholder="Data de esxpiração" name="expirationDate" value="{{ old('expirationDate') }}" required autofocus>
            @else
                <input type="text" class="form-control" placeholder="Data de esxpiração" name="expirationDate" value="{{$digitalCertificate->expirationDate}}">
            @endif
            @if ($errors->has('expirationDate'))
                <span class="help-block">
                    <strong>{{ $errors->first('expirationDate') }}</strong>
                </span>
            @endif
        </div>
    </div>
    <div class="col-md-8">
        <div class="form-group{{ $errors->has('certifyingEntity') ? ' has-danger' : '' }}">
            <label for="certifyingEntity">Certificadora</label>
            @if(!$digitalCertificate)
                <input type="text" class="form-control" placeholder="Certificadora" name="certifyingEntity" value="{{ old('certifyingEntity') }}" required autofocus>
            @else
                <input type="text" class="form-control" placeholder="Certificadora" name="certifyingEntity" value="{{$digitalCertificate->certifyingEntity}}">
            @endif
            @if ($errors->has('certifyingEntity'))
                <span class="help-block">
                    <strong>{{ $errors->first('certifyingEntity') }}</strong>
                </span>
            @endif
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-2">
        <div class="form-group{{ $errors->has('type') ? ' has-danger' : '' }}">
            <label for="type"></label>
            @if(!$digitalCertificate)
                <input type="text" class="form-control" placeholder="Tipo" name="type" value="{{ old('type') }}" required autofocus>
            @else
                <input type="text" class="form-control" placeholder="Tipo" name="type" value="{{$digitalCertificate->type}}">
            @endif
            @if ($errors->has('type'))
                <span class="help-block">
                    <strong>{{ $errors->first('type') }}</strong>
                </span>
            @endif
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group{{ $errors->has('subType') ? ' has-danger' : '' }}">
            @if(!$digitalCertificate)
                <input type="text" class="form-control" name="subType" value="{{ old('subType') }}" required autofocus>
            @else
                <input type="text" class="form-control" name="subType" value="{{$digitalCertificate->subType}}">
            @endif
            @if ($errors->has('subType'))
                <span class="help-block">
                    <strong>{{ $errors->first('subType') }}</strong>
                </span>
            @endif
        </div>
    </div>
    <div class="col-md-8">
        <div class="form-group{{ $errors->has('physicalLocation') ? ' has-danger' : '' }}">
            @if(!$digitalCertificate)
                <input type="text" class="form-control" placeholder="Codificação de localização física" name="physicalLocation" value="{{ old('physicalLocation') }}" required autofocus>
            @else
                <input type="text" class="form-control" placeholder="Codificação de localização física" name="physicalLocation" value="{{$digitalCertificate->physicalLocation}}">
            @endif
            @if ($errors->has('physicalLocation'))
                <span class="help-block">
                    <strong>{{ $errors->first('physicalLocation') }}</strong>
                </span>
            @endif
        </div>
    </div>
</div>

<div class="row">
    <div class="form-check">
        @if(!$digitalCertificate)
            <input type="checkbox" class="form-check-input" name="inPossession" value="{{ old('inPossession') }}" required autofocus>
        @else
            <input type="checkbox" class="form-check-input" name="inPossession" value="{{ $digitalCertificate->inPossession }}" required autofocus>
        @endif
        <label class="form-check-label" for="inPossession">Em posse da empresa</label>
      </div>
</div>

2 Respostas

Topicos relacionados