Dynamic Input, Laravel, JS

Question

Hello, I’m trying to make a dynamic input, consists of a button that you add two fields at once, a text and a file, but I need to persist this in the database, I think I need to make the input Names change and in the controller manage to pass all of them. View

<div class="col-xs-12">
  <div class="col-md-12" >
    <div id="field">
      <div id="field0">
        <!-- Text input-->
        <div class="form-group">
          {!! Form::label('nome-anexo', 'Nome do anexo', ['class' => 'col-md-12 control-label'])!!}
          <div class="col-md-12">
          {!! Form::text('nome-anexo', null, ['class' => 'form-control input-md', 'id' => 'nome-anexo']) !!}
          </div>
        </div>
        <br><br>
        <!-- File Button -->
        <div class="form-group">
          {!! form::label('anexo', 'Anexo', ['class' => 'col-md-12 control-label']) !!}
          <div class="col-md-12">
            {!! Form::file('anexo', ['class' => 'input-file', 'id' => 'anexo']) !!}
            <div id="action_jsondisplay"></div>
          </div>
        </div>

      </div>
    </div>
    <!-- Button --><br>
    <div class="form-group pull-right">
      <div class="col-md-8">
        <button id="add-more" name="add-more" class="btn btn-primary">Adicionar Campo</button>
      </div>
    </div>
    <br><br>
  </div>
</div>

JS

<script type="text/javascript">
$(document).ready(function () {
    var next = 0;
    $("#add-more").click(function(e){
        e.preventDefault();
        var addto = "#field" + next;
        var addRemove = "#field" + (next);
        next = next + 1;
        var newIn = ' <div id="field'+ next +'" name="field'+ next +'"><!-- Text input--><div class="form-group"> <label class="col-md-12 control-label" for="nome-anexo">Nome do Anexo</label> <div class="col-md-12"> <input id="nome-anexo" name="nome-anexo" type="text" placeholder="" class="form-control input-md"> </div></div><br><br><!-- File Button --> <div class="form-group"> <label class="col-md-12 control-label" for="anexo">Anexo</label> <div class="col-md-12"> <input id="anexo" name="anexo" class="input-file" type="file"> </div></div></div>';
        var newInput = $(newIn);
        var removeBtn = '<div class="col-md-12"><button id="remove' + (next - 1) + '" class="btn btn-danger remove-me pull-right" >Remover</button></div></div></div><div id="field">';
        var removeButton = $(removeBtn);
        $(addto).after(newInput);
        $(addRemove).after(removeButton);
        $("#field" + next).attr('data-source',$(addto).attr('data-source'));
        $("#count").val(next);

            $('.remove-me').click(function(e){
                e.preventDefault();
                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#field" + fieldNum;
                $(this).remove();
                $(fieldID).remove();
            });
    });

});
</script>

Contoller

public function attach($contato){

        $contato = Contato::find($contato);

        $titulo = Request::input('titulo');
        $mensagem = Request::input('mensagem');
        $nomeAnexo = Request::input('nome-anexo');

        $anexo = Request::file('anexo');

        $contatoTimeline = ContatoTimeline::saveAnexo($contato,$titulo,$mensagem,$nomeAnexo,$anexo,true);

        $contatoTimeline->user_id = \Auth::id();
        $contatoTimeline->save();

        return redirect()->back()->with([
          'tipo' => 'success',
          'mensagem' => 'Anexo adicionado com sucesso.'
        ]);

    }

Answer 1

You can make the fields added with JS become array:

<input type="text" name="fields[]" value="">

In the controller this field will come in array format.

$fields = $request->get('fields', []);

Note that I passed an empty array if the field is not present in the request.