0

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();
});
Jack Maessen
  • 1,780
  • 4
  • 19
  • 51
  • Why you don't get the value of the hidden input ? – executable Jan 21 '19 at 12:28
  • 1
    If you pull the value from the hidden input it would help to give that field an id in case you have more than one hidden on the page. Here's an answer that [shows all the various ways to pull a hidden value with jquery.](https://stackoverflow.com/a/4376682/3585500) – ourmandave Jan 21 '19 at 12:40

4 Answers4

3

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>
Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
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);
});
Vishvadeep singh
  • 1,624
  • 1
  • 19
  • 31
1

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>
Dhananjay Yadav
  • 291
  • 2
  • 9
1

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>
Aishwarya
  • 637
  • 9
  • 21