0

Quero que ao clicar em adicionar seja acrescentado um novo input, com nome certinho para que eu possa pegar as informações e enviar através do formulário.

Segue o código.

Pedidos

<form method="POST" action="recebe.php?valida=TRUE">
   Cód. Produto: <input type="text" name="codProduto"/>
   Quantidade: <input type="text" name="qtdProduto"/>
   <input type="button" name="adicionar" value="adicionar"/>
   <input type="submit" value="Enviar"/>
</form>

Página que pega as informações do formulário. Recebe

<?php

if($_REQUEST["valida"] = TRUE && isset($_REQUEST["valida"])) {
    echo "Código do Produto: " . $_POST["codProduto"] . "<br>";
    echo "Quantidade do Produto: " . $_POST["qtdProduto"];
  } else {

  }
?>
4
  • Adicionar que input? Em $_REQUEST["valida"] = TRUE, um = é atribuição, acredito que o que quer é comparação, no caso, troque por ==
    – Costamilam
    Commented 8/05/2018 às 23:08
  • Verdade, vou fazer essa alteração. Amigo, quero que ao clicar no botão ADICIONAR apareça outro input de CódProduto e outro input QtdProduto
    – user112387
    Commented 9/05/2018 às 0:18
  • Bem-vindo Fransuwel, se alguma resposta lhe serviu não deixe de marcá-la como aceita. Veja como nessa imagem i.sstatic.net/evLUR.png e porque nesse post pt.meta.stackoverflow.com/questions/1078/…
    – user60252
    Commented 9/05/2018 às 0:28
  • Fiz uma validação correta, veja resposta editada Para retornar somente os valores dos inputs preenchidos aos pares
    – user60252
    Commented 9/05/2018 às 4:14

1 Resposta 1

1

$(document).ready(function() {
   var maximo = 5;   //maximo de 5 campos
   var i = 1;
   $('#add_div').click (function(e) {
     e.preventDefault();  //previne novos cliques
     if (i < maximo) {
       $('#idDiv').append('<div>\
          Cód. Produto: <input type="text" name="codProduto[]"/> Quantidade: <input type="text" name="qtdProduto[]"/>\
          <a href="#" class="remove">Remover</a>\
           </div>');
           i++;
     }
  });
 
    // Remove o div anterior
    $('#idDiv').on("click",".remove",function(e) {
      e.preventDefault();
      $(this).parent('div').remove();
      i--;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form method="POST" action="recebe.php?valida=TRUE">
<input type="button" id="add_div" value="adicionar"> <input type="submit" value="Enviar"/>
<br>
<div id="idDiv">
    <div>
    Cód. Produto: <input type="text" name="codProduto[]"/>
    Quantidade: <input type="text" name="qtdProduto[]"/>
     
    </div>
</div>
</form>

ADICIONAR

Ao botão (definido no HTML) com o id=”add_div”, adicionamos a função “click” para que, ao clicar, seja executada a função definida.

Primeiro, não permite mais clicks (um de cada vez) e verifica se já temos o máximo de divs possíveis – definido no inicio – var maximo = 5;

Se não acontecer, vamos usar a função append do jquery para adicionar mais uma div (uma div com 2 inputs) a div inicial, com o id=”idDiv”. Posteriormente Incrementamos o i.

REMOVER

Usamos a função on do jquery, para adicionar eventos de click as divs adicionadas.

Porque temos que usar esta função? Porque, ao carregar o documento, o browser analisa o DOM, e qualquer código de javascript (ou jquery) que tenhamos é automaticamente inicalizado e os eventos “atribuídos”. No entanto, estas DIVS são adicionados dinamicamente, não existem quando o documento é carregado. Assim, temos que usar esta função para adicionar o evento “click” a correspondente DIV.

Depois, usamos a função .parent do jquery para remover o div correspondente.

Com este código, o DIV que vamos remover é aquele onde pressionamos REMOVER e não o ultimo inserido.

Para coletar

Note que foi adicionado [] colchetes no atributo namedos inputs. Quando você coloca um "name" com [] colchetes ele é enviado na forma de array para o receptor.

  $codProduto = $_POST['codProduto'];
  $qtdProduto = $_POST['qtdProduto'];

  $result = count($codProduto);

    for ($i = 0; $i < ($result) ; $i++) {
      echo "Código do Produto: " . $codProduto[$i];
      echo " - Quantidade do Produto: " . $qtdProduto[$i] . "<br>";
    }

Para retornar somente os valores dos inputs preenchidos aos pares:

if ($_POST['submit']=="Enviar"){

    $codProduto = array_filter($_POST['codProduto']);
    if (empty($codProduto)){
        $erro = "Código do Produto é requerido <br>";
    }

    $qtdProduto = array_filter($_POST['qtdProduto']); 
    if (empty($qtdProduto)){
       $erro .= "Quantidade do Produto é requerido <br>";
    }     

    if ($erro == ""){

       $result = count($codProduto);

       for ($i = 0; $i < ($result) ; $i++) {

          if ($codProduto[$i]!="" && $qtdProduto[$i]!=""){
            echo "Código do Produto: " . $codProduto[$i];
            echo " - Quantidade do Produto: " . $qtdProduto[$i] . "<br>";
          }

       }

    } else {
      echo $erro;
    }

}
11
  • Funcionou, agora como faço para coletar essas informações, de cada input?
    – user112387
    Commented 9/05/2018 às 0:50
  • @Fransuwel, veja na resposta como coletar, acabei de postar. Faça o teste e me diga se OK
    – user60252
    Commented 9/05/2018 às 1:01
  • Não pega os valores do primeiro input
    – user112387
    Commented 9/05/2018 às 1:33
  • Perdão!!!Pega sim, estou testando
    – user112387
    Commented 9/05/2018 às 1:34
  • Só tem mais esse problema, realmente ele não pega o valor quando se digita apenas o primeiro input
    – user112387
    Commented 9/05/2018 às 1:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .