1
resposta

formularios dinamico

Gostaria de adicionar um campo n vezes fossem necessarias para um form Insira aqui a descrição dessa imagem para ajudar na acessibilidade

essa segunda parte do formulario vem de uma tabela que tem uma relaçao ForeignKey com a principal exibida enteriormente é semelhante ao o que acontece em um sistema e registro de compras onde é inicialmente inserido dos dados do cliente em seguida os itens da compra

gostaria que o adicionar uma alternativa, pensei ou abrir em baixo no mesmo formulario ou abri um novo template carregando os dados do emprestimo para exibir exclusivamente a adição de itens

1 resposta

Olá Daniel, como você está?

Peço desculpas pela demora em obter um retorno.

Neste caso, a problemática que você enfrenta tem relações com o Frontend que é a estética da página e para adicionar um campo dinamicamente várias vezes em um formulário, você pode usar JavaScript ou uma biblioteca de JavaScript, como jQuery, para criar novos campos à medida que o usuário precisa. Abaixo um exemplo básico de como você pode fazer isso:

<table id="items">
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantidade</th>
      <th>Preço unitário</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="item1" /></td>
      <td><input type="number" name="quantity1" class="quantity" /></td>
      <td><input type="number" name="price1" class="price" /></td>
      <td><input type="number" name="total1" class="total" readonly /></td>
    </tr>
  </tbody>
</table>

<button id="addItem">Adicionar item</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  var counter = 2;

  $("#addItem").click(function () {
    var newRow =
      "<tr>" +
      '<td><input type="text" name="item' +
      counter +
      '"></td>' +
      '<td><input type="number" name="quantity' +
      counter +
      '" class="quantity"></td>' +
      '<td><input type="number" name="price' +
      counter +
      '" class="price"></td>' +
      '<td><input type="number" name="total' +
      counter +
      '" class="total" readonly></td>' +
      "</tr>";

    $("#items tbody").append(newRow);

    counter++;
  });

  $("tbody").on("input", ".quantity, .price", function () {
    var $row = $(this).closest("tr");
    var quantity = parseFloat($row.find(".quantity").val());
    var price = parseFloat($row.find(".price").val());
    var total = quantity * price;
    $row.find(".total").val(total.toFixed(2));
  });
</script>

Resultado:

Gif com simulação do código acima, onde ao clicar no botão "adicionar item" é colocado mais campos de input na parte inferior do último item adicionado

Para interligar este formulário HTML com seu projeto Django, você pode criar uma view que renderize o template com o formulário que terá como base o código apresentado acima. Todavia, vale ressaltar que o exemplo que apresentei acima é apenas uma ilustração didática, uma vez que não tenho acesso à configuração do seu projeto atual, mas espero que as informações fornecidas possam te ajudar como um ponto de partida para o desenvolvimento dos seus projetos pessoais.

Espero ter ajudado. Continue mergulhando em conhecimento!

Grande abraço.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!