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

Question

I am new at Jquery.我是 Jquery 的新手。 My User Story: I have two input form tag.我的用户故事：我有两个输入表单标签。 One is hidden and One is Text.一个是隐藏的，一个是文本。 I need to take value from input text and set that value into hidden input and then submit the form with both value.我需要从输入文本中获取值并将该值设置为隐藏输入，然后使用这两个值提交表单。 Is it possible to do in Jquery.是否可以在 Jquery 中进行。 Here is my example code:这是我的示例代码：

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>

Answer 1

You don't need jQuery for this.为此，您不需要 jQuery。 I've provide a solution using jQuery as well as vanilla JavaScript.我提供了一个使用 jQuery 和 vanilla JavaScript 的解决方案。

jQuery Version 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>

Vanilla JavaScript Version香草 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>

A brief explanation of my method我的方法的简要说明

Waiting for the HTML to load等待 HTML 加载

Whether you're using jQuery or not, depending on how your JavaScript and HTML code is stitched together, sometimes you're HTML elements are not available when your JavaScript code runs (for example, if your JavaScript code is included in the <head> tag, which I think has become pretty uncommon these days).无论您是否使用 jQuery，取决于您的 JavaScript 和 HTML 代码如何拼接在一起，有时您的 HTML 元素在您的 JavaScript 代码运行时不可用（例如，如果您的 JavaScript 代码包含在<head>标签，我认为这些天已经变得非常罕见）。 For this reason, I've gotten into the habit of making sure the document is ready before I reference any HTML elements.出于这个原因，我养成了在引用任何 HTML 元素之前确保文档准备就绪的习惯。 Using jQuery, this is done with the following code:使用 jQuery，这是通过以下代码完成的：

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

With vanilla JavaScript, the code looks like this:使用 vanilla JavaScript，代码如下所示：

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

Making Updates As Soon As Possible尽快更新

In addition, my code updates the hidden input value after the text input value has changed, rather than waiting for the form to be submitted.另外，我的代码在文本输入值改变后更新隐藏的输入值，而不是等待表单提交。 Either option may be perfectly acceptable for a given situation.对于给定的情况，任何一种选择都可能是完全可以接受的。 I am in the habit of updating things like these as soon as possible;我有尽快更新这些东西的习惯； if in the future, I write some JavaScript code that is expecting the value of these to input controls to be equivalent, and that code runs before the form is submitted, I'll probably have a bug in my code.如果将来我编写一些 JavaScript 代码，期望这些输入控件的值是等效的，并且该代码在提交表单之前运行，那么我的代码中可能会出现错误。 Hence, I find it safer to just update as soon as the change occurs.因此，我发现在发生变化时立即更新更安全。

Answer 2

As per jquery documentation You forgot to use # in your both selectors.根据jquery 文档您忘记在两个选择器中使用# 。 You should use:你应该使用：

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

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

问题描述

2 个解决方案

解决方案1
1 2018-11-13 16:53:38

解决方案2
0 2018-11-13 16:38:42

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

问题描述

2 个解决方案

解决方案1 1 2018-11-13 16:53:38

解决方案2 0 2018-11-13 16:38:42

解决方案1
1 2018-11-13 16:53:38

解决方案2
0 2018-11-13 16:38:42