Allow the same value to be inserted in the text area several times

Question

I need your help please. I have a scenario where I appending value from the dropdown to the text area. I'm facing an issue where I cannot appending the same value from the dropdown.

For example I write at text area text hello then insert "User name" then try to insert "User name" again and it dose not inserted.. only another option I can insert. But if I insert another option then I can insert "User name" again.

<select name="email_admin" class="form-control variables_select">
    <option value="">--Select--</option>       
    <option value="user_name">User name</option>
   <option value="ticket_number">Ticket #</option>
   <option value="ticket_subject">Ticket subject</option>            
</select>

$('.variables_select').change(function(){
  var current_select_list = $(this).attr('id');
  var id = $(this).closest('.panel-body').find('textarea').attr('id');
  var cursorPosStart = $('#'+ id).prop('selectionStart');
  var cursorPosEnd = $('#'+ id).prop('selectionEnd');
  var v = $('#' + id).val();
  var textBefore = v.substring(0,  cursorPosStart);
  var textAfter  = v.substring(cursorPosEnd, v.length);
  if ($('#' + current_select_list + ' option:selected').val().length > 0) {
      $('#' + id).val(textBefore + '{{' + $('#' + current_select_list + ' option:selected').val() + '}}' + textAfter);
  }
  $('#'+ id).prop('selectionStart', cursorPosStart);
  $('#'+ id).prop('selectionEnd', cursorPosStart + '{{' + $('#' + current_select_list + ' option:selected').val() + '}}'.length);
});

html.

<div class="panel-body">
    <div class="input-group pull-right margin-bottom-1">
      <?php
      echo Form::select('templates_variables_logs_staff', $templatesVariables, '', array('class' => 'form-control variables_select'));
      ?>
    </div>
    <?php
    echo Form::label('logs_staff', __('Content', 'notifications'), array('class' => 'control-label'));
    echo Form::textarea('logs_staff', $logs_staff, array('class' => 'form-control'));
    ?>
</div>

Show your html too, `textarea` and `panel-body`. we need to run your code. maybe it is good idea you create a working snippet — Alireza Ahmadi, Aug 19 '21 at 14:50
Alireza Ahmadi, change function dose not work when I choose the same option value. — , Aug 19 '21 at 14:56
I know I am telling you please show me your html code too. where is your textarea? where is your `panel-body`? and everything you've used in your script — Alireza Ahmadi, Aug 19 '21 at 15:02
Alireza Ahmadi, it is very complicated to show code.. it is a lot of php inside. — , Aug 19 '21 at 15:07
I found the problem, that because you are using `change` event when you select `username` and again you select `username` you don't change the select box so it doesn't call your script — Alireza Ahmadi, Aug 19 '21 at 15:19

Alireza Ahmadi · Accepted Answer · 2021-08-19T15:38:15.367

That happens because you are using change event when you select username and again you select username you don't change the select box value so it doesn't call your script.

If you need to add same value, you need to use click event instead of change event like this.

Note that click event may call your code multiple so you need to use some extra data to know this click is OK or not. To do that I've used extra attribute (say clicks) and check to see if has value is 1 or not. Also I need to reset the attribute value in focusout event:

 $('.variables_select').focusout(function () {
     $(this).data('clicks', 0);
 });

Here is working sample:

 $('.variables_select').click(function () {
     if ($(this).data('clicks') == 1) {
         $(this).data('clicks', 0);

         var current_select_list = $(this).attr('id');
         var id = $('.panel-body').find('textarea').attr('id');
         var cursorPosStart = $('#' + id).prop('selectionStart');
         var cursorPosEnd = $('#' + id).prop('selectionEnd');
         var v = $('#' + id).val();
         var textBefore = v.substring(0, cursorPosStart);
         var textAfter = v.substring(cursorPosEnd, v.length);
         if ($('#' + current_select_list + ' option:selected').val().length > 0) {
             $('#' + id).val(textBefore + '{{' + $('#' + current_select_list + ' option:selected').val() + '}}' + textAfter);
         }
         $('#' + id).prop('selectionStart', cursorPosStart);
         $('#' + id).prop('selectionEnd', cursorPosStart + '{{' + $('#' + current_select_list + ' option:selected').val() + '}}'.length);
     }
     else
         $(this).data('clicks', 1);
     });

 $('.variables_select').focusout(function () {
     $(this).data('clicks', 0);
 });

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous"></script>

<select name="email_admin" class="form-control variables_select" id="myselect">
        <option value="">--Select--</option>
        <option value="user_name">User name</option>
        <option value="ticket_number">Ticket #</option>
        <option value="ticket_subject">Ticket subject</option>
    </select>

    <div class="panel-body">
        <div class="input-group pull-right margin-bottom-1">
            <textarea id="textarea"></textarea>
        </div>
    </div>

@roman Has your problem been solved? let me know if there is problem — Alireza Ahmadi, Aug 20 '21 at 05:39
Alireza Ahmadi, thank you very much for your help. Now I understand the problem. Your example is working like a charm! It save my time! — , Aug 20 '21 at 08:03
Only faced with problem when I used Select2 plugin for select list. Click function dose not run. — , Aug 20 '21 at 08:33
@roman You can use `onSelect`. See this one https://stackoverflow.com/a/15637696/11359076 — Alireza Ahmadi, Aug 20 '21 at 08:49
Alireza Ahmadi, thanks. do not understand how to implement it to my example. — , Aug 20 '21 at 09:06
It's hard to explain in comment .You can ask another question with focusing on select2 and I am going to explain there with a working sample — Alireza Ahmadi, Aug 20 '21 at 09:14

Rob Moll · Answer 2 · 2021-08-19T15:39:38.867

Here is a somewhat simplified version that hopefully helps you clean up your code and get you to where you need to be:

$('.variables_select').change(function() {
  var selectedOptionValue = $(this).val();
  var textAreaElement = $("#ta")[0];
  var textAreaValue = $(textAreaElement).val();
  var newTextAreaValue = textAreaValue + "\n" + selectedOptionValue;
  $(textAreaElement).val(newTextAreaValue);
  $('.variables_select').val("");// This line resets the select so you can choose the same option again.
});

#ta {
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="email_admin" class="form-control variables_select">
  <option value="">--Select--</option>
  <option value="user_name">User name</option>
  <option value="ticket_number">Ticket #</option>
  <option value="ticket_subject">Ticket subject</option>
</select>

<textarea id="ta"></textarea>

Please check the edited answer. You can now select same option multiple times consecutively. — Rob Moll, Aug 19 '21 at 15:43
Your answer is good but I think OP don't want to reset the value of select box. Because maybe he uses the value in other cases — Alireza Ahmadi, Aug 19 '21 at 15:48

Allow the same value to be inserted in the text area several times

2 Answers2