javascript - 在一个隐藏的输入 jQuery 中获取两个输入值

Question

我想在一个隐藏字段中获取名字和姓氏两个值，中间有空格。我试过这段代码

jQuery(document).ready(function($) {
  $('input[name="firstname"]').keyup(function() {
    $('input[name="fullname"]').val($(this).val());
  });
});

jQuery(document).ready(function($) {
  $('input[name="lastname"]').keyup(function() {
    $('input[name="fullname"]').val($(this).val());
  });
});

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

<input type="text" name="firstname" value="">
<input type="text" name="lasttname" value="">
<input type="hidden" name="fullname" value="">

它没有按我想要的方式工作。它每次只显示一个值。 任何人都可以帮我解决这个问题吗？

提前致谢。

Answer 1

问题是因为您在每个键条目上都覆盖了隐藏字段的值。要解决此问题，您可以在两个输入上使用单个事件处理程序，将名字和姓氏连接在一起。试试这个:

jQuery(function($) {
  var $firstname = $('input[name="firstname"]');
  var $lastname = $('input[name="lastname"]');
  var $fullname = $('input[name="fullname"]');

  $firstname.add($lastname).keyup(function() {
    $fullname.val($firstname.val() + ' ' + $lastname.val());
  });
});

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

<input type="text" name="firstname" value="" />
<input type="text" name="lastname" value="" /><br /><br />

<input type="text" name="fullname" value="" readonly="true" />

请注意，我使隐藏字段可见，以使示例中的行为更加清晰。