CODEWITHSUNDEEP
javascriptjqueryhtml
user5563910
user5563910

Reputation:

Appending Selectbox values to textarea

I seem to be having a very basic problem. I am trying to add selected values from a select box into a text area. I also need the user to be able to add extra content in the text area.

For example, they select an option->this then gets added to the selectbox->the user can type extra info->then select another item from the selectbox which gets added after the user's added text. The issue i'm having is once I add text to the textarea, when you select an item it doesn't get added anymore.

This is my code:

<p>
  <select name="selectfield" id="selectfield">
    <option value="" selected>- Select -</option>
    <option value="Apples/">Apples/</option>
    <option value="Oranges/">Oranges/</option>
    <option value="Plums/">Plums/</option>
  </select>
</p>

<textarea style="width:100%" name="info" id="info" cols="20" rows="5"></textarea>

$("#selectfield").on("change", function(){
 var info = $("#selectfield").val();
  $("#info").append(info);
});

Sample text in my textarea that i'd like to be able to have is :

Oranges/200Plums/10 etc.

https://jsfiddle.net/rdawkins/80j9q0jf/2/

Upvotes: 1

Views: 1899

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You cannot append() to a textarea in the manner you're attempting. Instead you can provide a function to val() to add the chosen value of the select to the current setting. Try this:

$("#selectfield").on("change", function() {
    var $select = $(this);
    $("#info").val(function(i, val) {
        return val += $select.val();
    })
});

Updated fiddle

I would note though, that this pattern is not very user friendly and is easily broken by the user accidentally deleting the chosen value of a select. I think you may be better to line-list each item with it's own input field for a user to amend.

Upvotes: 1

Related Questions