Show inputs by clicking "Include"

Asked

Viewed 48 times

0

I have a div called "product", inside it at the beginning 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 that when clicking on "Include" appears 5 more inputs inside this 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">

Note: Just to comment,that I can’t use ID because I’m using the function that clones the div in jquery.

Grateful..

javascript jquery

  • You can’t use it id="produto[]" ?

  • Define a class of type inputHidden with display: None, add this class to these inputs, create an inputShow with display: block, when Voce wants to show the input Voce just adds inpitShow with js for all elements with inputHidden

  • "appear 5 more inputs", what’s the problem with jQuery append? Or you just want to display some hidden entries?

2 answers

1


I think that would be what you need, I made the example below see if it meets you.

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

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

.hidden{ display:None; }

I added the method to the button with the click event (Can be used in other system calls ai vai from you ) Used Jquery, the method removes all classes:Hidden from all inputs that have it, Causing inputs to appear

I hope he answers 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>
<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>

  • That’s right, it worked, I hadn’t thought of that logic, it worked right.. Thanks, buddy. Thank you very much!

0

 $("form").submit(function(e) { { 
    e.preventDefault();

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

  • Could explain what this code does and why it works, briefly?

  • it simply adds the amount of inputs on the screen to submit the form.

Browser other questions tagged javascript jquery

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