Jquery 从另一个文本输入值中获取输入值并设置为隐藏输入值答案

【问题标题】：Jquery get input value from another text input value and set into hidden input valueJquery 从另一个文本输入值中获取输入值并设置为隐藏输入值
【发布时间】：2020-05-18 22:59:21
【问题描述】：

我是 Jquery 的新手。我的用户故事：我有两个输入表单标签。一个是隐藏的，一个是文本。我需要从输入文本中获取值并将该值设置为隐藏输入，然后提交具有这两个值的表单。是否可以在 Jquery 中进行。这是我的示例代码：

if ($_POST) {
  $email = $_REQUEST['email'];
  $username = $_REQUEST['username'];

  echo "Email Value: " . $email ." And Username Value :" .$username;
}

var lap = $("emailId").val();
var test = $("userId");
test.val(test);

<form>
  <input id="emailId" name="email" type="text" value="">
  <input id="userId" name="username" type="hidden" value="">
  <input type="submit" value="Submit" />
</form>

【问题讨论】：

您的 jQuery id 选择器缺少 # 前缀...var test = $("#userId"); 应该可以与那些已修复和 test.val(lap) 一起正常工作
我尝试使用 id 选择器。还是没有运气
除了# 前缀，您还需要使用test.val(lap)。另请注意，此逻辑只会在页面加载时执行。如果要在输入值后更新值，则需要使用事件处理程序。我建议input。
你有一个示例事件处理程序。我还在学习。请帮忙。
@mike1225 $('input[type=submit]').on('click', yourFunction) 这是点击事件输入的事件监听器

标签： javascript jquery html

【解决方案1】：

你不需要 jQuery。我提供了一个使用 jQuery 和 vanilla JavaScript 的解决方案。

jQuery 版本

$(document).ready(function(){
  $email = $('#email')
  // Note that we are updating the hidden input value each time the
  // text input value changes. We could do this less frequently by
  // using the `input` or `change` event instead of the `keyup` event.
  $email.on('keyup', function(e){
    $('#userId').val($email.val())
  });
})

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

<form>
  <input type="text" name="email" id="email" />
  <input type="hidden" name="userId" id="userId" />
  <button type="submit" id="submit">Submit</button>
</form>

原生 JavaScript 版本

document.addEventListener('DOMContentLoaded', function(e) {
  var txtEmail = document.querySelector('#email')
  var txtUserId = document.querySelector('#userId')
  // Note that we are updating the hidden input value each time the
  // text input value changes. We could do this less frequently by
  // using the `input` or `change` event instead of the `keyup` event.
  txtEmail.addEventListener('keyup', function(e) {
    txtUserId.value = txtEmail.value
  })
})

<form>
  <input type="text" name="email" id="email" />
  <input type="hidden" name="userId" id="userId" />
  <button type="submit" id="submit">Submit</button>
</form>

我的方法的简要说明

等待 HTML 加载

无论你是否使用 jQuery，取决于你的 JavaScript 和 HTML 代码是如何拼接在一起的，有时你的 HTML 元素在你的 JavaScript 代码运行时不可用（例如，如果你的 JavaScript 代码包含在<head> 标签，我认为这些天已经变得非常罕见）。出于这个原因，我养成了在引用任何 HTML 元素之前确保文档准备就绪的习惯。使用 jQuery，这是通过以下代码完成的：

$(document).ready(function(){
  // The code here (inside this function) will be executed after the HTML finishes loading.
})

使用 vanilla JavaScript，代码如下所示：

document.addEventListener('DOMContentLoaded', function(){
  // The code here (inside this function) will be executed after the HTML finishes loading.
})

尽快更新

另外，我的代码在文本输入值改变后更新隐藏的输入值，而不是等待表单提交。对于给定的情况，任何一种选择都可能是完全可以接受的。我有尽快更新此类内容的习惯；如果将来我编写一些 JavaScript 代码，期望这些输入控件的值是等效的，并且该代码在提交表单之前运行，我的代码中可能会有错误。因此，我发现一旦发生更改就立即更新更安全。

【讨论】：

【解决方案2】：

根据jquery documentation，您忘记在两个选择器中使用#。你应该使用：

var lap = $("#emailId").val();
var test = $("#userId");
test.val(lap);

【讨论】：

test.val(test) 不正确，会使值 "[object Object"]"
很好的参考文档！
@Trevor 谢谢先生。我在控制台的输入框中输入时看到了该值，如何将此值放入隐藏输入并提交两个值
@mike1225 看看我上面的回答 (stackoverflow.com/a/53285919/269061)。它自动设置隐藏输入的值，因此当您提交表单时，该值已经存在。