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" />

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

Answer 2

到目前为止，您正在覆盖hidden输入的内容。您需要创建fullname字符串，然后更新hidden输入。

jQuery(document).ready(function($) {
  $('input[name="firstname"], input[name="lastname"]').keyup(function() {
    var fn = $('input[name="firstname"]'),
      ln = $('input[name="lastname"]');

    var name = fn.val() + ' ' + ln.val();

    $('input[name="fullname"]').val(name)
    console.clear()
    console.log(name)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="firstname" value="">
<input type="text" name="lastname" value="">

<input type="hidden" name="fullname" value="">

Answer 3

使用jQuery对象初始化变量，以避免重复查看DOM树。
连接这些值，以避免丢失先前输入的值。
包含lastName值的输入有错字lasttname。

jQuery(document).ready(function($) {
  var $fn = $('input[name="fullname"]');
  var $firstName = $('input[name="firstname"]');
  var $lastName = $('input[name="lastname"]');

  $firstName.keyup(function() {
    $fn.val($(this).val() + " " + $lastName.val());
  });

  $lastName.keyup(function() {
    $fn.val($firstName.val() + " " + $(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="firstname" value="">
<input type="text" name="lastname" value="">

<input type="text" name="fullname" value="">

Answer 4

存储名字是一些变量

jQuery(document).ready(function($){
  $('input[name="firstname"]').keyup(function() {
     $('input[name="fullname"]').val($(this).val());
  });
  $('input[name="lastname"]').keyup(function() {
    var oldname = $('input[name="fullname"]').val(); //take firstname from hidden field
    $('input[name="fullname"]').val(oldname + ' '+$(this).val()); // appending the values
   });
});

Answer 5

尝试类似这样的方法。您不需要2个document.ready和2个不同的偶数处理程序来进行键控

<input type="text" name="firstname" data-name value="">
<input type="text" name="lasttname" data-name value="">

<input type="hidden" name="fullname" value="">


jQuery(document).ready(function($){

    $('[data-name]').keyup(function() {

    $('input[name="fullname"]').val($('input[name="lastname"]').val() + " " + 
    $('input[name="firstname"]').val());

    });       

});

Answer 6

您需要使代码如下所示：

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

<input type="hidden" name="fullname" value="">


jQuery(document).ready(function($){
 $('input[name="firstname"]').keyup(function() {
    if($('input[name="lastname"]').val() != '')
    {
        var last_name = $('input[name="lastname"]').val();
        $('input[name="fullname"]').val($(this).val()+' '+last_name);            
    }
    else{
        $('input[name="fullname"]').val($(this).val());
    }
});
});
jQuery(document).ready(function($){
 $('input[name="lastname"]').keyup(function() {
    if($('input[name="firstname"]').val() != '')
    {
        var first_name = $('input[name="firstname"]').val();
        $('input[name="fullname"]').val($(this).val()+' '+first_name);            
    }
    else{
        $('input[name="fullname"]').val($(this).val());
    }
});
});

Answer 7

很简单

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

Answer 8

它每次只显示一个值，因为您每次都覆盖全名的先前值。

一种解决方案是为firstName和lastName添加特定的ID，在keyup期间，您可以输入类似的内容

$('input[name="lastname"]').keyup(function() {
    var value = $("#firstNameID").val() + $("#lastNameID").val();
     $('input[name="fullname"]').val(value);
 });

我没有测试它，但这是个主意。

Answer 9

不要使用两个ready函数，请使用其中一个，并将两个事件侦听器都放在该函数中。您的问题是您没有同时用名字和姓氏更新隐藏字段，而是用姓氏覆盖了firstname。因此，您必须在姓氏后加上姓氏，反之亦然：

看看小提琴波纹管作为一个工作示例。（我设置了隐藏字段text只是为了您可以看到输出）

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="firstname" value="" />
<input type="text" name="lasttname" value="" />

<input type="text" name="fullname" value="" />

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

9 个答案: