如何使用jquery为输入字段onclick设置一个值答案

【问题标题】：how to set a value to an input field onclick with jquery如何使用jquery为输入字段onclick设置一个值
【发布时间】：2019-01-21 12:23:34
【问题描述】：

我正在尝试使用 onclick 将现有输入字段的值设置为另一个输入字段。

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

点击 span 时，隐藏的 input（在本例中为 John）的值应作为值放置在其上方的输入字段上。所以点击：

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

变成

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

我怎样才能用 jquery 做到这一点？

我已经有了这段代码，但我没有成功：

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

【问题讨论】：

为什么没有得到隐藏输入的值？
如果您从隐藏的输入中提取值，如果您在页面上隐藏了多个字段，则为该字段提供一个 ID 会有所帮助。这是shows all the various ways to pull a hidden value with jquery.的答案

标签： jquery input onclick

【解决方案1】：

你可以使用：

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

从hidden 输入中获取值，然后使用id john 在输入上设置它的值：

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

请参阅下面的工作示例：

$("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>

【讨论】：

【解决方案2】：

试试这个Link

HTML 代码：

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

JS代码：

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

【讨论】：

【解决方案3】：

希望对你有帮助，

$("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>

【讨论】：

【解决方案4】：

找到这个工作示例，希望这会有所帮助。首先获取输入字段的值，然后将其设置为要显示的字段。

1- 使用 #john 获取价值： $('#john').val(); 2-将此值设置为另一个输入字段： $('#hiddenFieldId').value($('#john').val());

我添加了一个输入类型并注释了隐藏类型。你可以做需要的。

$('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>

【讨论】：