Question

I am trying to display all values from inputs into a div. I would like my final output to look like this:

startmsg middlemsg *NAME-FROM-SELECT-MENU* endmsg *TEXT-FROM-INPUT-FIELD*

Here is my code:

<select id="names">
  <option value=""></option>
  <option value="Alex">Alex</option>
  <option value="Jeff">Jeff</option>
  <option value="Amy">Amy</option>
  <option value="Kate">Kate</option>
</select>
<input id="message" type="text" />
<input id="clear" type="submit" value="Clear" />
<div id="display"></div>


$('#names')('#message').keyup(function () {
  $('#display').append('starmsg').append('middlemsg').text($(this).val().append('endmsg'));
});

Answer 1

I reckon your code isn’t too far away. You want the multiple selector, and probably also the change event rather than keyup. You also need to call append on jQuery objects, rather than strings:

$('#names, #message').change(function () {
    $('#display')
        .text('startmsg ')
        .append(' middlemsg ')
        .append($('#names').val())
        .append(' endmsg ')
        .append($('#message').val());
});