Change value of an Hidden input with jquery

Question

Hello, I would like to change the value of the Hidden input. The input I want to change has id = Type. I want to change as soon as I click on the Type 2 link, I want to change its value to 2. How I can do this?

	<script src="https:/ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	

	<label id="lb1">Nome: </label>
	<input type="text" id="ip1" placeholder="Digite seu Nome" required autofocus/>
	<br>
	<label id="lb2"> Sobrenome: </label>
	<input type="text" id="ip2" placeholder="Digite seu Sobrenome" required/>
      //	<a href="javascript: fTipo1()">tipo 1</a>
	//<a href="javascript: fTipo2()">tipo 2</a>
	
	<input type="hidden" id="Tipo" value="1"/>
	<script>
		
		
		function fTipo1(){
			var Nome = $("#ip1").val();
			var Tipo = $("#Tipo").val();
			window.location.href="href.php?Nome="+Nome+"&Tipo="+Tipo;
		}
		function fTipo2(){
			
			$('#Tipo').change(function(){
   			 $('2 > #Tipo').val($(this).val());
   			 alert($("#Tipo").val());
			});
			
		}
	</script>
	

Answer 1

The two Javascript functions that you did for me made no sense and I couldn’t even understand what their goal was, so I can’t analyze them. You say you should change the value of the field, but in one function you make a redirect to another route and in the other you assign an event change in the field.

To change the field value simply assign the value to the property value his:

const tipo = document.getElementById("tipo")

function setTipo(novoTipo) {
  tipo.value = novoTipo
  console.log("Tipo alterado para", tipo.value)
}

<input type="hidden" id="tipo" value="1">

<button onClick="setTipo(1)">Tipo 1</button>
<button onClick="setTipo(2)">Tipo 2</button>

Answer 2

You can put a Listener in the link Tipo 2 that when clicked will catch your input hidden and put tipo.value = 2; changing its value to 2...
I put a console.log just to see that you’ve changed

let t2 = document.getElementById('t2');

function muda(e) {
    e.preventDefault();
    let tipo = document.getElementById('Tipo');
    console.log(tipo);

//agora ele muda o value para 2 e tb faz o console.log confirmando pra vc ;)
    tipo.value = 2;
    console.log(tipo);
}

t2.addEventListener('click', muda)

<a id="t2" href="#">tipo 2</a>

<input  type="hidden" id="Tipo" value="1"/>

Answer 3

Put a hash on href of links, add a class (put class="tipo") in each and a dataset data-tipo = "1" value link 1 and data-tipo = "2" link value 2 and use an event click in class .tipo canceling the effect of clicking with event.preventDefault().

By clicking on one of the links, you take the value of the dataset of the clicked link and put in the Hidden input and a if to check if the value is 1 or 2 and does what you want according to the value.

In the example below I put the Hidden input as text and commented on the line of window.location.href only to view the change in value:

$(".tipo").click(function(event){

   event.preventDefault();
   
   var tipo = $(this).data("tipo"); // pega o valor do dataset
   $("#Tipo").val(tipo); // altera o input hidden
   
   if(tipo == 1){
      var Nome = $("#ip1").val();
      // window.location.href="href.php?Nome="+Nome+"&Tipo=1";
   }else if(tipo == 2){
      alert(2);
   }
   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="lb1">Nome: </label>
	<input type="text" id="ip1" placeholder="Digite seu Nome" required autofocus/>
	<br>
	<label id="lb2"> Sobrenome: </label>
	<input type="text" id="ip2" placeholder="Digite seu Sobrenome" required/>
      //	<a class="tipo" data-tipo="1" href="#">tipo 1</a>
	//<a class="tipo" data-tipo="2" href="#">tipo 2</a>
	
	<input type="text" id="Tipo" value="1"/>