Problem sending multiple data to Controller

Asked

Viewed 44 times

0

I have this dynamic table

            <form action="{{route ('AddDocumentosAbertura')}}" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
            {{ csrf_field() }}
                 <table >
                    <thead>
                        <th>CPF ou CNPJ</th>
                        <th>Porcentagem</th>
                        <th></th>
                    </thead>
                    <tbody id="table" class="table mg-b-0">
                        <tr>
                        <td>
                            <input type='text' name="cpf_ab[]" class='form-control' > 
                        </td>

                        <td>
                            <input type='text' class="cpf form-control"  name='porcentagem[]' >
                        </td>
                        <td><button type="button" class="tg88 btn btn-primary button88" id="addRowBtn">+</button></td>
                        </tr>
                    </tbody>
                </table>
      <button class="btn btn-primary bd-0">Enviar</button>
      </form>

When the user clicks "+" it will add a new row in the table to fill in data. js that does this below:

  var tbody = $('#table').children('tbody');
var table = tbody.length ? tbody : $('#table');

$('#addRowBtn').click(function(){

    table.append("<tr><td><input type='text' name='cpf_ab[]' class='cpf form-control' ></td><td><input type='text' class='cpf form-control'  name='porcentagem[]' ></td><td><button type='button' class='btn btn-danger delRowBtn'>-</button></td></tr>");
})

$(document.body).delegate(".delRowBtn", "click", function(){
        $(this).closest("tr").remove();        
    }); 

So far so good, it’s all right, but when I send this data to my controller, it only sends the row that was manually placed inside the table (the first row). I also tested put this line that is added dynamically, I put it manually inside the table, and it worked... I’m not getting to understand why the addition of dynamic lines is not going to the server

Code that php (Standard)

$dataForm = $Request->except(['_token']);
$countcc = count($dataForm['cpf_ab']);

  for ($i = 0; $i < $countcc; $i++) {
                $ans = [
                    'cpf_ab' => $dataForm['cpf_ab'][$i],
                    'porcentagem' => $dataForm['porcentagem'][$i],

                ];

             $fctr = AB_Socios::insert($ans);
            }
  • Try sending your form via ajax.

1 answer

0


I created a form with Bootstrap and used Jquery to add a new line with a different "id" and "name" for each line. Then in Controller I took the amount of fields and divided by 2 which are the amount of fields created at each line. I made a file that shows each iteration a name and an age. now just switch to your values there.

<body>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6 jumbotron">
            <form action="/dinamicForm" method="POST">
            @csrf
                <div class="line">
                    <div class="form-group">
                        <label for="nome">Nome</label>
                        <input type="text" id="nome" name="nome_0" class="form-control" >
                    </div>
                    <div class="form-group">
                        <label for="idade">Idade</label>
                        <input type="text" id="idade" name="idade_0" class="form-control" >
                    </div>
                </div>
                <div class="form-group">
                    <button id="create-new-line" class="btn btn-info">Criar nova Linha</button>
                    <button type="submit" id="send-form" class="btn btn-info">Enviar Formulário</button>
                </div>
            </form>
        </div>
    </div>
</div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

In Jquery

cont = 0;
$('#create-new-line').on("click", function(e){
   cont ++;
   var content =
   '<div class="form-group">' + 
     '<label for="nome-' + cont + '">Nome</label>' + 
     '<input type="text" class="form-control" id="nome-' + cont + '" name="nome_' + cont + '" >'+
   '</div>' +
   '<div class="form-group">' + 
     '<label for="idade-' + cont + '">Idade</label>' + 
     '<input type="text" class="form-control" id="idade-' + cont + '" name="idade_' + cont + '" >'+
   '</div>';
   $('.line').append(content);
   e.preventDefault(e);
});

and in the Controller

$qtd = (count($values) / 2);

$x = 0;
   for($x = 0; $x<$qtd; $x++){
      $nome_linha = "nome_$x";
      $idade_linha = "idade_$x";
      echo '--------------------------------------<br>';
      echo "Nome: " . $$nome_linha . "<br>";
      echo "Idade: " . $$idade_linha . "<br>";
   }
echo '--------------------------------------<br>';

Browser other questions tagged

You are not signed in. Login or sign up in order to post.