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

Question

I want to get two values first and last names in one hidden field with space between. I tried with this code

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

It is not working how i want. It's showing only one value each time. Can anyone help me with this how can i get this work?

Thanks in advance.

Answer 1

The issue is because you're overwriting the value of the hidden field on every key entry. To fix this you can use a single event handler on both inputs which concatenates the first and lastnames together. Try this:

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

Note that I made the hidden field visible to make the behaviour clearer in the example.

Answer 2

As of now you are overwriting the content of hidden input. You need to create the fullname string and then update the hidden input.

 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

1. Initialize your variables with the jQuery objects to avoid repeated look over the DOM tree.
2. Concatenate the values to avoid losing the previously entered values.
3. The input which contains the lastName value, has a typo 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

Store the first name is some variable

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

Try something like this. You don't need 2 document.ready and 2 different even handler for keyup

<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

You need to make your code like given below:

<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

Simple it is

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

It shows only the one value each time because you overwrite the previous value of fullname every time .

One solution is to add specific id's for firstName and lastName and during keyup you can have something like

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

i didnt test it but this is the idea.

Answer 9

Don't use two ready functions, use one, and put both event listeners inside that one. Your problem is that your not updating the hidden field with both the first name and last name, you're instead overwriting the firstname with the last name. Thus you must append the last name to the first name and vice versa:

Take a look at the fiddle bellow for a working example. (I have made the hidden field text just so you can see the output)

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