when I will type the first row 3 input box then those values are shown in the display name input box

Question

when I will type the first row 3 input box then those values are shown in the display name input box.

var output = $('.keyupDisplay');

    
    $('.keyupName').keyup( function() {   
        output.val(function () {
            return $('.keyupName').map(function () {
                return this.value;
            }).get();
        });
    });

It is shown on the display input box but shows with "," separation. Like Mr,Motalib,Hossain I need the result like this Like Mr Motalib Hossain

Answer 1

• Use join
• Cache the fields
• Also no need to use a function inside the val
• Use input since it also handles paste
• Lastly, don't name a field after what you decided to use to interrogate it. As we see it can change

const $displayName = $('.displayName')
const $names = $('.personName').on('input', function() {
  $displayName.val(
    $names
    .map(function() { return this.value; })
    .get()
    .join(' ')
  )
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Names: <input type="text" id="title" class="personName" />
<input type="text" id="firstName" class="personName" />
<input type="text" id="lastName" class="personName" />
<br/>
<input type="text" class="displayName" />