CODEWITHSUNDEEP
javascriptjqueryhtml
Zain
Zain

Reputation: 662

Get two input values in one hidden input jQuery

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.

Upvotes: 3

Views: 1563

Answers (9)

Nick Parsons
Nick Parsons

Reputation: 50684

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

Upvotes: 0

Ele
Ele

Reputation: 33726

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

Upvotes: 1

Sanjit Bhardwaj
Sanjit Bhardwaj

Reputation: 893

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

Upvotes: 0

Nikos Chatzivasileiadis
Nikos Chatzivasileiadis

Reputation: 593

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.

Upvotes: 0

htoniv
htoniv

Reputation: 1668

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 2

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

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

Upvotes: 0

Satpal
Satpal

Reputation: 133403

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

Upvotes: 1

Budyn
Budyn

Reputation: 573

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

    });       

});

Upvotes: 0

Related Questions