Как отобразить два входных значения в одном поле?

Question

У меня есть три поля: firstname, lastname и fullname.

Что я делаю, я должен отобразить имя и фамилию в поле ввода полного имени.

Например, я ввожу имя: Альфа и фамилия: Гама , поэтому я должен отобразить полное имя : Альфа Гама .

Я попробовал приведенный ниже код, который работает только для имени.

Не могли бы вы мне помочь?

$("#firstname").change(function() {
  $("#fullname").val($(this).val());
});

<input type="text" name="firstname" id="firstname" placeholder="Firstname">
<input type="text" name="lastname" placeholder="lastname">

<input type="text" name="fullname" id="fullname">

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Answer 1

Вы можете использовать вот так.

var firstName = "", lastName = "", fullName = "";
$("#firstname").keyup(function() {
  firstName = $(this).val();
  fullName = firstName+ " " +lastName;
  $("#fullname").val(fullName);
});
$("#lastname").keyup(function() {
  lastName = $(this).val();
  fullName = firstName+ " " +lastName;
  $("#fullname").val(fullName);
});

<input type="text" name="firstname" id="firstname" placeholder="Firstname">
<input type="text" name="lastname" placeholder="lastname" id="lastname">

<input type="text" name="fullname" id="fullname">

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Answer 2

Попробуйте этот фрагмент, надеюсь, он поможет:

function updateFullName() {
    $("#fullname").val($("#firstname").val()+ ' ' + $("#lastname").val());
}

$("#firstname, #lastname").on('input', updateFullName);

<input type="text" name="firstname" id="firstname" placeholder="Firstname">
<input type="text" name="lastname" id="lastname" placeholder="lastname">

<input type="text" name="fullname" id="fullname">

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Answer 3

Попробуйте следующее.

$("#firstname").change(function() {
    var firstName = $(this).val();
    var lastName = $("#lastname").val();
    var fullName = firstName;
    if(lastName !== "") fullName = firstName + " " + lastName;
    $("#fullname").val(fullName);
});

$("#lastName").change(function() {
    var firstName = $("#firstname").val();
    var lastName = $(this).val();
    var fullName = lastName;
    if(firstName !== "") fullName = firstName + " " + lastName;
    $("#fullname").val(fullName);
});