how to set a value to an input field onclick with jquery

Question

I am trying to set the value of an existing input filed to another input filed with onclick.

<p>Name: <input id="john" type="text" value="" name="user"></p>
<input type="hidden" value="John" />
<span>Set value</span>

When click on span, the value of the hidden input (in this case John ) should be placed as value ont the input field above it. So onclick:

 <p>Name: <input id="john" type="text" value="" name="user"></p>

becomes

 <p>Name: <input id="john" type="text" value="John" name="user"></p>

How can i do that with jquery?

I already have this code but i do not succeed in it:

$("span").click(function(){
   $("input:#john").val();
});

Answer 1

You can use:

const hidden_value = $('input[type="hidden"]').val();

to get the value from the hidden input and then set it's value on the input with the id john using:

$("#john").val(hidden_value)

See working example below:

 $("span").click(function(){ const hidden_value = $('input[type="hidden"]').val(); // get the value from the hidden input $("#john").val(hidden_value); // set the element with the id john to have the retrieved value }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Name: <input id="john" type="text" value="" name="user"></p> <input type="hidden" value="John" /> <span>Set value</span> 

Answer 2

Try this Link

HTML Code:

<p>Name: <input id="john" type="text" value="" name="user"></p>
<input type="hidden" value="John" />
<span>Set value</span>

JS Code:

$("span").click(function(){
   var s= $('input[type="hidden"]').val();
   $("#john").val(s);
});

Answer 3

hope it would be helpful for you,

 $("span").on("click",function(){ console.log($('input[type=hidden]').val()) $("#john").val($('input[type=hidden]').val()) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Name: <input id="john" type="text" value="" name="user"></p> <input type="hidden" value="John" /> <span>Set value</span> 

Answer 4

find this working example, hope this will help. First get value of the the input field and then set it to the field where you want to display.

1- Get value from #john using : $('#john').val(); 2- Set this value to another input field : $('#hiddenFieldId').value($('#john').val());

I have added a input type and commented hidden type. You can do the needful.

 $('span').click(function(){ $('#hiddenFieldId').val($('#john').val()); }); 

 span{ cursor:pointer; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Name: <input id="john" type="text" value="" name="user"></p> <!--<input type="hidden" id="hiddenFieldId" value="John" />--> <input type="text" id="hiddenFieldId" value="John" /> <span>Set value</span>