CODEWITHSUNDEEP
javascriptjquery
Justin
Justin

Reputation: 2530

jQuery SELECT with Textarea

Just wondering if someone can help me on a problem, I don't fully undersand why it doesn't work.

I have this fiddle, http://jsfiddle.net/uomt99zp/

What it is doing: When you select from the drop down box, insert that word into the textarea. Which it DOES, when the textarea isn't "touched".

If you type something into the box, and then try to select an item, it doesn't work.

I'm not sure why this doesn't update the textarea. Perhaps someone can shed some light on this issue?

<textarea name="template" required="required" class="template form-control" rows="6"></textarea>
<select class="templatesAvailableFields">
<option>Select One</option>
    <option>Test1</option>                     
    <option>Test2</option>
    <option>Test3</option>
</select>

$('.templatesAvailableFields').on('change', function() {
        var text = $('.templatesAvailableFields option:selected').text();
        $('.template').append(text);
});

Upvotes: 5

Views: 656

Answers (8)

Naser
Naser

Reputation: 43

You should control input value's with val() method

// cache element
var $select = $('.templatesAvailableFields');

$select.change( function() {
  $('.template').val($select[0].value);
});

Upvotes: 0

Pierre
Pierre

Reputation: 166

To answer to the "why" it does not work, it's because, the contents of a textarea represent its default value. So, when you append an element to the textarea, you change the default value of this textarea.

So it changes the textarea as long as you did not type in. Once you typed in, the default value is no more used, even if you remove all the text of the textarea.

Upvotes: 1

JTM
JTM

Reputation: 58

Your code is working ...i tried it in visual studio .... Only change I had made is I kept the script under the option control... I am not sure about.for me its working fine.

<body >
<textarea name="template" required="required" class="template form-control" rows="6"></textarea>
<select class="templatesAvailableFields">
<option>Select One</option>
    <option>Test1</option>                     
    <option>Test2</option>
    <option>Test3</option>
</select>
 <script type="text/javascript">

     $('.templatesAvailableFields').on('change', function () {
         var text = $('.templatesAvailableFields option:selected').text();
         $('.template').append(text);
     });
    </script>
</body>

Upvotes: 0

tech-gayan
tech-gayan

Reputation: 1413

$('.templatesAvailableFields').on('change', function() {
    var text = $('.templatesAvailableFields option:selected').text();
var existing=$('.template').val();

    $('.template').val(existing+text);
});

.append(), .html() and .text() methods do not work with form elements, for setting/getting value of a from element .val() method should be used instead:

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

You can try val(function) with old value + new text to append,

$('.templatesAvailableFields').on('change', function() {
    var text = $('.templatesAvailableFields option:selected').text();
    $('.template').val(function(ind,val){
         return val+text;
    });
});

Live Demo

Upvotes: 1

Rohit Rehan
Rohit Rehan

Reputation: 570

just replace append with text

here is the updated fiddle

$('.templatesAvailableFields').on('change', function() {
    var text = $('.templatesAvailableFields option:selected').text();
    $('.template').text($('.template').text() + text);

// $('.template').val(text); this won't work in IE <= 7 });

http://jsfiddle.net/rrehan/uomt99zp/2/

Upvotes: -1

Milind Anantwar
Milind Anantwar

Reputation: 82231

You need to set value using .val():

$('.template').val($('.template').val()+text);

Working Demo 1

Also .val() can have callback function which can be used for setting a new value:

function Type: Function( Integer index, String value ) => String A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.

$('.template').val(function(i,v){ return v+ text});

Working Demo 2

Upvotes: 8

cpr43
cpr43

Reputation: 3112

By using .append you are just concatinating your output string if you want only the dropdown element it would be better to use the .text() or .val() method

Upvotes: 0

Related Questions