Usable but invisible input

Question

I need an Input, where I can pass a value to it via javascript but make it invisible. I have 3 fixed values that I will always pass one of them, SAC, Distributor or Consultant, but since I need to send these values in the form just to know what kind of crud to do in the other file, I would like to use an invisible input.

I’ll give an example of the current code, just following the idea of what I use today, the type variable by default is SAC, picking it I add the input value as Sac..

<script>
 if(type=sac){
     $('#tipo').value('sac');
 }else if...

</script> 
<form action="page2">
 <input style="display: hidden;" id="tipo">
</form>

Answer 1

<script>
 if(type=sac){
     $('#tipo').value('sac');
 }else if...

</script> 
<form action="page2">

 <input type="hidden" id="tipo"> <!-- Existe o input type "hidden", que é invisível -->
</form>

One more example here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_hidden

Answer 2

There are some problems in your code, come on:

First: Your conditional is assigning a value and not comparing it, ie if you need to compare you use two equal signs, so ==.

Second: To pass the value to a input you must use the .val(valorAqui) and not the .value().

Third: You can apply the display:none for all fields that will not be displayed and then apply with the method .value() put the value within the input.

Fourth: From what I’ve seen you’re using the Jquery and how you use the script before the document html, which is not advisable, you MUST put it that way.

$(document).ready({
 //seu código aqui
})

But what’s the point?

This way you will run the script only when the document is ready, so it won’t give problems, like not finding any element you want to manipulate and it hasn’t even been loaded yet.

Quinto: display:hidden is an attribute htmlthat does not exist you need to use the display:none or use the type=hidden in the input.

Keeping this in mind your code will run perfectly! :)

Answer 3

Not only the Hidden type in the input, you can also create a class for it to be invisible.

.input-hidden{
  height:0;
  width:0;
  visibility: hidden;
  padding:0;
  margin:0;
  float:right;
}

besides the display: none; which is a widely used attribute too.