Show inputs by clicking "Include"

0

I have a div called "product", inside it I have 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">

I want you to click on "Include" to see 5 more inputs within that 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">

asked by anonymous 23.11.2016 / 19:46

2 answers

1

I think this is what you need, I did the example below see if it suits you.

Summary of the code: The inputs you want to appear after clicking include, have been added to the css class: escoded like this: class="hidden".

I created the class in css: * Note that if you use Bootstrap you can replace the hidden class with Hidden that has the same function.

.escondido { display: none; }

I added the method to the button with the click event (Can be used on other system calls there goes from you) JQuery has been used, the method removes all classes: Hidden from all inputs that have it, Making inputs appear

I hope it caters to you.

$("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><divid="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>
    
23.11.2016 / 22:19
0
 $("form").submit(function(e) { { 
    e.preventDefault();

  for (var i = 0; i < 5; i++) {
     $('#produto').append('<div><input type="text" name="input_' + i + '"></div>');
  }
 });
    
23.11.2016 / 20:05