Question

我是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>

Answer 1

您不需要jQuery。我已经提供了使用jQuery和普通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>

Vanilla 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代码的缝合方式，有时在运行JavaScript代码时HTML元素不可用（例如，如果JavaScript代码包含在<head>标签，这些天来我认为这已经变得非常罕见了。由于这个原因，在我引用任何HTML元素之前，我已经习惯了确保文档准备就绪。使用jQuery，可通过以下代码完成此操作：

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

使用香草JavaScript，代码如下：

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

尽快进行更新

此外，我的代码在文本输入值更改后更新了隐藏的输入值，而不是等待表单提交。对于给定的情况，这两种选择都可以完全接受。我习惯于尽快更新类似的东西；如果将来我写了一些JavaScript代码，期望它们的值等同于输入控件，并且该代码在提交表单之前运行，那么我的代码中可能有一个错误。因此，我发现在更改发生后立即进行更新更加安全。

Answer 2

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

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

jQuery从另一个文本输入值获取输入值并将其设置为隐藏的输入值

2 个答案: