Concat multiple form input values using javascript

Question

I am very new to HTML/javascript. I'm attempting to create a form with four fields: the first field (texta) is readonly, the second field (selectiona) is a dropdown list, the third field (textb) is readonly, and fourth field (sentence) is a concatenation of the three other fields. I can't figure out why my javascript isn't working:

<script>
$('#texta, #selectiona, #textb, #selectionb').bind('keypress blur', function() { 
    $('#sentence').val($('#texta').val() + ' ' +
    $('#selectiona').val() + ' ' +
    $('#textb').val() + ' ' +
    $('#selectionb').val() );
});
<script>

<p>Text A:<input id=texta readonly value="My favorite car is a: "></p>
<p>Selection A: <select id=selectiona>
	<option>Select...</option>
	<option>Toyota</option>
	<option>Honda</option>
	</select></p>
<p>Text B: <input id=textb readonly value="because they are "></p>
<p>Selection B: <select id=selectionb>
	<option>Select...</option>
	<option>reliable.</option>
	<option>fun to drive.</option>
	</select></p>
<p>Sentence: <input id=sentence readonly></p>

Select options doesn't have value attributes, so select value is empty — Gaiozz
– Gaiozz, Commented Jul 17, 2018 at 13:52
your code is working, it change when you focus the sentence field — Jax Teller
– Jax Teller, Commented Jul 17, 2018 at 13:53

Zakaria Acharki · Accepted Answer · 2018-07-17 13:59:36Z

1

Your code should work fine if you add the quotes around the HTML tags attributes.

NOTE 1: Your JS code is a valid code, but it will be better to replace bind by on since the bind method was dedicated since jQuery version 3, check :

$('#texta, #selectiona, #textb, #selectionb').on('keypress blur', function() {

NOTE 2: Your code will be more efficient if you give all the elements you want to attach the event to a common class, then attach the event to this class :

$('.common_class').on('change input', function() {

Also you could use input event for input's & textarea's and change for select's.

$('#texta, #selectiona, #textb, #selectionb').bind('input change', function() {
  $('#sentence').val($('#texta').val() + ' ' +
    $('#selectiona').val() + ' ' +
    $('#textb').val() + ' ' +
    $('#selectionb').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Text A:<input id="texta" readonly value="My favorite car is a: "></p>
<p>Selection A:
  <select id="selectiona">
    <option>Select...</option>
    <option>Toyota</option>
    <option>Honda</option>
  </select>
</p>
<p>Text B: <input id="textb" readonly value="because they are "></p>
<p>Selection B:
  <select id="selectionb">
    <option>Select...</option>
    <option>reliable.</option>
    <option>fun to drive.</option>
  </select>
</p>
<p>Sentence: <input id="sentence" style="width:70%" readonly></p>

edited Jul 17, 2018 at 13:59

answered Jul 17, 2018 at 13:56

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

2 Comments

Jax Teller Over a year ago

replace id="text" into id="texta" otherwise, your snippet is wrong

Zakaria Acharki Over a year ago

Good point, me too, but he may enable them in another event... who knows :)

Jax Teller · Accepted Answer · 2018-07-17 13:55:27Z

You can use "on change" :

$('#selectiona, #selectionb').on('change', function() { 
    $('#sentence').val($('#texta').val() + ' ' +
    $('#selectiona').val() + ' ' +
    $('#textb').val() + ' ' +
    $('#selectionb').val() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text A:<input id=texta readonly value="My favorite car is a: "></p>
<p>Selection A: <select id=selectiona>
	<option>Select...</option>
	<option>Toyota</option>
	<option>Honda</option>
	</select></p>
<p>Text B: <input id=textb readonly value="because they are "></p>
<p>Selection B: <select id=selectionb>
	<option>Select...</option>
	<option>reliable.</option>
	<option>fun to drive.</option>
	</select></p>
<p>Sentence: <input id=sentence readonly></p>

Collectives™ on Stack Overflow

Concat multiple form input values using javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related