0

Tenho uma div chamada "produto", dentro dela de inicio tenho 4 inputs text:

<input type="text" name="produto"> <input type="text" name="quantidade"> <input type="text" name="valor"> <input type="text" name="subtotal"> <input type="submit" value"Incluir">

Quero que ao clicar em "Incluir" apareça mais 5 inputs dentro dessa div:

<input type="text" name="codigo_produto"> <input type="text" name="ean"> <input type="text" name="un_medida"> <input type="text" name="descricao"> <input type="text" name="tributos">

Obs.: Só pra comentar,que não posso usar ID pois estarei utilizando a função que clona a div em jquery.

Grato..

3
  • Você não pode usar id="produto[]" ? Commented 23/11/2016 às 18:52
  • Define um classe do tipo inputHidden com display: none, adiciona essa classe nesses inputs, cria uma inputShow com display: block, quando voce quiser mostar os input voce apenas adiciona o inpitShow com o js para todos os elementos com inputHidden
    – MarioAleo
    Commented 23/11/2016 às 18:55
  • "apareça mais 5 inputs", qual o problema com append do jQuery? Ou você só quer exibir algumas entradas escondidas?
    – BrTkCa
    Commented 23/11/2016 às 19:04

2 Respostas 2

1

Acho que seria isso que você precisa, fiz o exemplo abaixo veja se te atende.

Resumo do codigo: Os inputs que você quer que aparece após clicar em incluir, foi adicionado a classe do css: escodido assim: class="escondido".

Criei a classe no css: *Obs se vc usar Bootstrap pode substituir a classe escondido por Hidden que tem a mesma função.

.escondido{ display:none; }

Adicionei o método ao botão com o evento click (Pode ser usado em outras chamadas do sistema ai vai de você ) Foi usado JQuery, o método remove todos as classes:Escondido de todos os inputs que a possuem, Fazendo com que os inputs apareçam

Espero que te atenda.

$("input[type='submit']").click(function() {
$(".escondido").removeClass("escondido");
});
.escondido{
  display: none;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="produto">
<input type="text" name="produto"> <input type="text" name="quantidade"> <input type="text" name="valor"> <input type="text" name="subtotal"> <input type="submit" value"Incluir">
  
 <!-- Campos que ficarao escondidos -->
<input type="text" class="escondido" name="codigo_produto"> <input type="text" class="escondido" name="ean"> <input class="escondido" type="text" name="un_medida"> <input type="text" class="escondido" name="descricao"> <input type="text" class="escondido" name="tributos">
</div>

1
  • isso mesmo, deu certo, não tinha pensado nessa lógica, funcionou direitinho..Valeu amigo..muito obrigado!
    – Alh
    Commented 24/11/2016 às 0:31
0
 $("form").submit(function(e) { { 
    e.preventDefault();

  for (var i = 0; i < 5; i++) {
     $('#produto').append('<div><input type="text" name="input_' + i + '"></div>');
  }
 });
2
  • Poderia explicar o que esse código faz e pq ele funciona, de forma breve?
    – rray
    Commented 23/11/2016 às 19:35
  • ele simplesmente adiciona a quantidade de inputs na tela ao submitar o formulário.
    – rodolfocop
    Commented 9/03/2017 às 19:13

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 .