Como criar campos dinamicamente no laravel?

André Cabral Criador 05/02/2019
André Cabral

Tenho um cadastro de Clientes relacionado a Contas bancárias porém gostaria que fosse possível adicionar campos referente a novas contas de acordo com a necessidade de cada cliente

Alguém tem um exemplo de como criar e armazenar no banco?

Manager Carlos Ferreira 05/02/2019
Carlos Ferreira

Olá, André!
Tudo bem?

Tenho uma ideia para você, crie uma nova tabela chamada por exemplo fields, e nessa tabela você armazena as informações (colunas) a respeito dos tipos de campos dinâmicos, como por exemplo: type, entry, name, id_field, placeholder, value

Um exemplo simples:
# Recuperando os fields:
$fields = Field::all();

# View
@foreach ($fields as $field)
    <{{ $field->entry }} type="{{ $field->type }}" name="{{ $field->name }}" id="{{ $field->id_field }}" placeholder="{{ $field->placeholder }}" value="{{ $field->value }}">
@endforeach

Verifica se dá certo, e se atendo ao que precisa.

Criador André Cabral 08/02/2019
André Cabral

Na verdade seria como neste tutorial aqui "https://www.youtube.com/watch?v=5cywoTxRqaI" ;

 

Porém não mostra como recuperar os dados numa view de edit com old values.

Manager Carlos Ferreira 09/02/2019
Carlos Ferreira

Entendi.

Você pode criar os inputs desta forma como é exibido no vídeo, porém, precisa deixar o nome com array, algo assim:
<input type="text" name="nome[]">

Porque dessa forma você consegue pegar todos os valores ao submeter este formulário.

Nessa aula aqui ensino algo útil que pode te ajudar neste caso, veja: https://www.youtube.com/watch?v=55iWmNGKGg8

Se ainda restar dúvidas, me retorna. Ok?

Fagner 11/02/2019
Fagner

Bom dia Andre / Carlos 

Fiz um modelo veja se atende

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

 

<div class="container">

  <div class="row">

 

    <div class="col-md-10">

      <select class="form-control" id="selectProduto">

        <option value="A">Produto A</option>

        <option value="B">Produto B</option>

        <option value="C">Produto C</option>

      </select>

    </div>

 

    <div class="col-md-2">

      <button type="button" name="button">Adicionar</button>

    </div>

 

    <div class="col-md-12">

      <span id="msg"></span><br>

    </div>

 

    <div class="col-md-12">

      <table class="table table-striped">

        <thead>

          <tr>

            <th>Produto</th>

            <th>Forn01</th>

            <th>Forn02</th>

            <th>Forn03</th>

          </tr>

        </thead>

        <tbody id="mytbody">

 

        </tbody>

      </table>

    </div>

  </div>

</div>

 

 

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script type="text/javascript">

  $(document).on("change", "#mytbody select", function(){

 

     if($(this).val() == "Sim"){

        $(this).closest("tr").find("select").not(this).prop("disabled", true);

     }else{

        $(this).closest("tr").find("select").prop("disabled", false);

     }

 

  });

 

     $("button").click(function() {

    $('#selectProduto').change(function(){

      $('#msg').html('');

    });

 

    var vIdProduto = $('#selectProduto option:selected').val();

    var vProduto = $('#selectProduto option:selected').text();

    var mensagem = $('#msg');

    var linha = '<tr class="selected" id="linha' + vIdProduto + '">' +

          '<td>' +

          '<input class="idprod" type="hidden" name="idproduto' + vIdProduto + '" value="' + vIdProduto + '">' + vProduto +

          '</td>' +

          '<td>' +

          `<select class="form-control">

            <option value="">Comprar</option>

            <option value="Sim">Sim</option>

            <option value="Não">Não</option>

          </select>`+

          '</td>' +

          '<td>' +

          `<select class="form-control">

            <option value="">Comprar</option>

            <option value="Sim">Sim</option>

            <option value="Não">Não</option>

          </select>`+

          '</td>' +

          '<td>' +

          `<select class="form-control">

            <option value="">Comprar</option>

            <option value="Sim">Sim</option>

            <option value="Não">Não</option>

          </select>`+

          '</td>' +

          ' </tr>'

 

    if($("tr#linha" + vIdProduto).length === 0) {

      $('#mytbody').append(linha);

    } else {

      $('#msg').html("<b class='text-danger'>&#9888; Produto " + vIdProduto + " já foi adicionado!</b>");

    }

    });

</script>

 

Sabe a Solução? Ajude a resolver!

Precisa estar logado para conseguir responder a este ticket!

Clique Aqui Para Entrar!