CODEWITHSUNDEEP
javascriptjqueryhtml
Never Stop Learning
Never Stop Learning

Reputation: 775

How to add value in textarea using JQUERY

I need help about using append in jquery. Everytime I click button right btnRight the selected option value will add in the textarea so I used append to add the value in the textarea. It is already adding a value in the textarea but the value is "undefined,". can anyone help me why I am getting a value "undefined,"?

Sample HTML Code:

<textarea name="include_field_list" cols="70" rows="5" required="required" readonly="readonly" /></textarea>
<section class="container">
<div>
    <select id="leftValues" size="5" multiple="multiple">
    <option value="post_id">Post ID</option>
    <option value="status">Status</option>
    <option value="shipper_name">Shipper Name</option>
       </select>
</div>
<div>
    <input type="button" id="btnLeft" value="&lt;&lt;" />
    <input type="button" id="btnRight" value="&gt;&gt;" />
</div>
<div>
    <select id="rightValues" size="4" multiple>

    </select>
    <div>
        <input type="text" id="txtRight" />
    </div>
</div>


SELECT, INPUT[type="text"] {
width: 160px;
box-sizing: border-box;
}
SECTION {
padding: 8px;
background-color: #f0f0f0;
overflow: auto;
}
SECTION > DIV {
float: left;
padding: 4px;
}
SECTION > DIV + DIV {
width: 40px;
text-align: center;
}
</style>

JQUERY Code:

$("#btnLeft").click(function () {
var selectedItem = $("#rightValues option:selected");
$("#leftValues").append(selectedItem);
});

$("#btnRight").click(function () {
var selectedItem = $("#leftValues option:selected");
$("#rightValues").append(selectedItem);
/***********This code has a problem************/
$value = $( "#leftValues>option:selected" ).val();
$("textarea[name=include_field_list]").append($value + ',');
/***************/
});

$("#leftValues").change(function () {
var selectedItem = $("#rightValues  option:selected");
$("#txtRight").val(selectedItem.text());
});
});

Upvotes: 3

Views: 8529

Answers (5)

Syed Arif Iqbal
Syed Arif Iqbal

Reputation: 1427

there is silly mistake take place... when user click on button the right hand side not remain selected values. because it's move on right side... you just need to change your direction.

$value = $( "#rightValues>option:selected" ).text();

SEE DEMO

there is an other problem if user deselect any item on right side. then this value not append in textarea.. the better way to handle this use each option in right side..

SEE THIS DEMO

Upvotes: 3

Ziga Petek
Ziga Petek

Reputation: 4110

If you call val() on a multiple-choice select list, you get an array instead of a string. So you are actually trying to append a "," to an array. Try this:

$value = $( "#leftValues>option:selected" ).val();
$("textarea[name=include_field_list]").append($value.join( ", " ) + ',');

The JSFiddle of the fix (Without CSS): http://jsfiddle.net/hyoLedxw/

Upvotes: 0

Sadikhasan
Sadikhasan

Reputation: 18600

You have to correct ^^^^ indicated code in your code.

$value = $( "#leftValues option:selected" ).val();
                       ^^^^
$("textarea[name=include_field_list]").val($value + ',');
                                     ^^^^^

Upvotes: 0

Paresh Makwana
Paresh Makwana

Reputation: 189

You can try this code..

$("textarea[name=include_field_list]").val($value + ',');

if you are appending value after existing, then get that value and pass that value in parameter too,

Upvotes: 0

Michał Kutra
Michał Kutra

Reputation: 1202

Second, $(textarea).append(txt) doesn't work like you think.

Instead of .append() sth to <textarea> element simply use:

var $textarea = $("textarea[name=include_field_list]"),
    $oldValue = textarea.val();

    $textarea($oldValue + 'new value text')

In this jsFiddle You have working solution

Upvotes: 1

Related Questions