Selected value is not added to the existing text inside text area when a user type inside of it

Question

I have a drop list where the nurse choose from, a diagnostic, and then this diagnostic is added into a textarea where the nurse will add more details near it. Then, they can add more diagnostics into the same textarea and add more info near this diagnostic.

Whenever the nurse selecting diagnostics, they are adding normally, but the moment she types in the textarea near the diagnostic added, and went to add another one, nothing is added.

Here is the jQuery script for the process:

$("#medication_id").on('change', function(){

    $("#medication_pill").text($("#medication_pill").text() + " + " + $("#medication_id option:selected").text());
});

can you add your html also – Albert Einstein May 18 '18 at 06:50 — Albert Einstein, May 18 '18 at 06:50

score 1 · Accepted Answer · answered May 18 '18 at 06:54

Change your code to use $("#medication_pill").val(). This will work for you:

$("#medication_id").on('change', function(){
    $("#medication_pill").val($("#medication_pill").val() + " + " + $("#medication_id option:selected").text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='medication_id'>
  <option>Medication 1</option>
  <option>Medication 2</option>
  <option>Medication 3</option>
</select>

<textarea id="medication_pill"></textarea>

The .val() method is primarily used to get the values of form elements such as input, select and textarea. When called on an empty collection, it returns undefined.

@droidnation glad to help – Ankit Agarwal May 18 '18 at 07:10 — Ankit Agarwal, May 18 '18 at 07:10

Krzysztof Janiszewski · Answer 2 · 2018-05-18T07:40:04.767

It is hard to debug without html code. So please always remember that when you ask a question you should add enough code so that the problem was reproducable.

This code has a few things that should be changed

First of all avoid using $(selector) more than it is necessary (it is memory consuming). If you want to perform a couple of operations like in your case on an element $("#medication_pill") just save it to a variable.

Secondly on html form elements it is better to use val() function instead of text(). Here is why

Lastly in an change event you do not have to do make jQuery call to the select element ($("#medication_id option:selected")) since this event is bounded to this element. Instead you can just use $(this).

Here is an working example with desired functionality.

$("#medication_id").on('change', function() {
  var textarea = $("#medication_pill");
  textarea.val($("#medication_pill").val() + " + " + $(this).val());
});

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

<select id="medication_id">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<textarea id="medication_pill"></textarea>

And here is an example with clearing select after change so that you can select tha same option couple of times in a row.

var select = $("#medication_id");
var textarea = $("#medication_pill");

select.on('change', function() {
  textarea.val($("#medication_pill").val() + " + " + select.val());
  select.val("");
});

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

<select id="medication_id">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<textarea id="medication_pill"></textarea>

If it helped you and you used my solution than please accept this question. — Krzysztof Janiszewski, May 18 '18 at 08:09

Selected value is not added to the existing text inside text area when a user type inside of it

2 Answers2