Javascript concatenate select and input values in a text box-CodePudding

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"  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"  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.

CodePudding user response：

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(', '));
})

CodePudding user response：

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);

CodePudding user response：

Sorry if I keep this up again..

I need the second select tag to change according with the first selection. I'm also using a second function:

<script>

    $(function() {
        $('#chosen_a').change(function(){
            $('.opzione').hide();
            $('#'   $(this).val()).show();
        });
    });
</script>

that shows a div according with ID

<select name="criteria_title" id="chosen_a" data-placeholder="- Seleziona un comando -"  style="width:200px;">
        <option value="" disabled="" selected="">- Seleziona un comando -</option>
        <option value="attaccherà" id=".attaccherà" data-id="attaccherà">.attaccherà</option>
        <option value="contrattaccherà" id=".contrattaccherà" data-id=".contrattaccherà">.contrattaccherà</option>
        <option value="attaccherà2" id="$attaccherà2" data-id="$attaccherà2">$attaccherà</option>
        <option value="contraccherà2" id="$contraccherà2" data-id="$contraccherà2">$contraccherà</option>
     </select> 

<input id="target" placeholder="Write something"></input><br/>  
 
    <div id="attaccherà"  style="display:none;"> 

<select name="criteria_title" id="chosen_b" data-placeholder="- Seleziona un comando -" >
        <option value=""></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>

    
    </div>

   <div id="contrattaccherà"  style="display:none;"> 
bla bla     
    </div>

  <div id="attaccherà2"  style="display:none;"> 
bla bla     
    </div>

 <div id="contrattaccherà2"  style="display:none;"> 
bla bla     
    </div>



<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/>

But this doesn't work if the ID of the div begins with special characters. Still, I need to send the special characters to the input field.

So I need to retrieve something else instead of value. Let's say... the option id?

Here's the question: how can I send the "option ids" instead of the option values in this function?

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

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

$('select').change(onChange);
$('input').keydown(onChange);