Get two input values in one hidden input 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.

as per your code, last name will replace first name

charan kumar
– charan kumar

2018-07-24 12:32:53 +00:00
Commented Jul 24, 2018 at 12:32 — charan kumar
– charan kumar, Commented Jul 24, 2018 at 12:32
yes, it is happening.

Zain
– Zain

2018-07-24 12:33:13 +00:00
Commented Jul 24, 2018 at 12:33 — Zain
– Zain, Commented Jul 24, 2018 at 12:33
just a note. You don't need two different $(document).ready

Budyn
– Budyn

2018-07-24 12:41:28 +00:00
Commented Jul 24, 2018 at 12:41 — Budyn
– Budyn, Commented Jul 24, 2018 at 12:41

Rory McCrossan · Accepted Answer · 2018-07-24 12:39:11Z

2

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.

answered Jul 24, 2018 at 12:39

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rory McCrossan Over a year ago

No problem, glad to help

Satpal · Accepted Answer · 2018-07-24 12:37:17Z

1

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

answered Jul 24, 2018 at 12:37

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Ele · Accepted Answer · 2018-07-24 12:41:36Z

Initialize your variables with the jQuery objects to avoid repeated look over the DOM tree.
Concatenate the values to avoid losing the previously entered values.
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="">

Budyn · Accepted Answer · 2018-07-24 12:37:15Z

0

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());

    });       

});

answered Jul 24, 2018 at 12:37

Budyn

5737 silver badges21 bronze badges

Comments

Himanshu Upadhyay · Accepted Answer · 2018-07-24 12:38:22Z

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());
    }
});
});

htoniv · Accepted Answer · 2018-07-24 12:39:34Z

0

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());
});
});

answered Jul 24, 2018 at 12:39

htoniv

1,65823 silver badges42 bronze badges

Comments

Nikos Chatzivasileiadis · Accepted Answer · 2018-07-24 12:40:36Z

0

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.

answered Jul 24, 2018 at 12:40

Nikos Chatzivasileiadis

5939 silver badges21 bronze badges

Comments

Sanjit Bhardwaj · Accepted Answer · 2018-07-24 12:40:40Z

0

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
   });
});

edited Jul 24, 2018 at 12:40

answered Jul 24, 2018 at 12:36

Sanjit Bhardwaj

8937 silver badges14 bronze badges

1 Comment

Josh Mein Over a year ago

What is the point of the fname variable? Plus this will just append the content every time a key is released which will not do what is desired.

Nick Parsons · Accepted Answer · 2018-07-24 12:46:16Z

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

Collectives™ on Stack Overflow

Get two input values in one hidden input jQuery

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related