Question 36243 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Javascript concatenate select and input values in a text box – Jquery

I’d like to concatenate several values from selects and input fields on a final input field that contain all the values.

What I have until now is this:

$('#chosen_a').change(function() {
  $('#ddlNames').val($('#chosen_a option:selected').data('id'));
  console.log($('#chosen_a option:selected').data('id'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="criteria_title" id="chosen_a" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: block;">
  <option value="" disabled="" selected="">- First select -</option>
  <option value="AAA" data-id="AAA">AAA</option>
  <option value="BBB" data-id="BBB">BBB</option>
  <option value="CCC" data-id="CCC">CCC</option>
  <option value="DDD" data-id="DDD">DDD</option>
  <option value="EEE" data-id="EEE">EEE</option>
</select>

<input id="Something1" placeholder="Write something"></input><br/>

<select name="criteria_title" id="chosen_b" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: block;">
  <option value="" disabled="" selected="">- Second select -</option>
  <option value="FFF" data-id="FFF">FFF</option>
  <option value="GGG" data-id="GGG">GGG</option>
  <option value="HHH" data-id="HHH">HHH</option>
  <option value="III" data-id="III">III</option>
  <option value="JJJ" data-id="JJJ">JJJ</option>
</select>

<input id="Something2" placeholder="Write something else"></input><br/>

<br><br>

<input maxlength="2600" name="ddlNames" id="ddlNames" onKeyUp="countChar(this)" placeholder="Blocco Note"></input><br/>

In effect, I can get the first select option to the input field, but I do not know how to add the rest.

Tags:

2

Answers


  1. 0

    If I understand you well …

    Add a class ‘getValues’ to all inputs & selects that you want to get the values and create an event on JQuery onChange so when something will change it will auto-join it in that #ddlNames input.

    $('.getValues').change(function() {
    var values = [];
    $('.getValues').each(function() {
        values.push($(this).val());
    });
    $('#ddlNames').val(values.join(', '));
})
    Login or Signup to reply.
  2. 0

    Try this:

    const onChange = () => {
  const value = $('#chosen_a option:selected').val() + ' '
    + $('#Something1').val() + ' '
    + $('#chosen_b option:selected').val() + ' '
    + $('#Something2').val();

  $('#ddlNames').val(value);
}

$('select').change(onChange);
$('input').keydown(onChange);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search