Combine Multiple Input Fields into One Input Field with Javascript?

Question

I have this code below which combines multiple fields into one field however it only combines them when you click a button. Is there a way to edit this so that it does not require a button to be clicked in order to combine the fields and just combines them as the user types?

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>    

    First Name: <input class="combine" id="input1"  value=""/>
    Last Name: <input class="combine" id="input2" value=""/>
    <button id="setVal">Combine</button>
First and Last Name Combined <input class="combine" id="Voltes5" size="105" value='' />

    <script type="text/javascript">
    $('#setVal').click(function(){
    $('#Voltes5').val(
      $('.combine')
      .not('#Voltes5')
      .map(
        function(){
          return $(this).val();
        })
      .get()
      .join('')
    );
    });
      </script>

Sure, just listen to another event, like $('.combine').on('input', …). — Bergi
– Bergi, Commented Aug 6, 2017 at 12:51
Can you provide a working example based on my code above? Sorry I am new to JS and a bit lost on what you mean. — Thomas
– Thomas, Commented Aug 6, 2017 at 12:53

user2575725 · Accepted Answer · 2017-08-06 12:52:35Z

4

Use input event.

$(function() {
  $('#input1, #input2').on('input', function() {
    $('#Voltes5').val(
      $('#input1, #input2').map(function() {
        return $(this).val();
      }).get().join(' ') /* added space */
    );
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

First Name: <input class="combine" id="input1" value="" /> Last Name: <input class="combine" id="input2" value="" />First and Last Name Combined <input class="combine" id="Voltes5" size="105" value='' />

answered Aug 6, 2017 at 12:52

user2575725

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

Comments

vicky patel · Accepted Answer · 2017-08-07 10:59:23Z

-1

$(document).ready(function(){
$("#setVal").click(function(){
$("#Voltes5").val($("#input1").val() + " " + $("#input2").val());
});
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    First Name: <input class="combine" id="input1"  value=""/>
    Last Name: <input class="combine" id="input2" value=""/>
    <button id="setVal">Combine</button>
First and Last Name Combined <input class="combine" id="Voltes5" size="105" value='' />

answered Aug 7, 2017 at 10:59

vicky patel

7052 gold badges8 silver badges14 bronze badges

Collectives™ on Stack Overflow

Combine Multiple Input Fields into One Input Field with Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related