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());
});
}); 

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());
});
}); 

• javascript
• jquery
• html

• why not use .val() method instead of .append()? – ilgaar Commented Jan 17, 2015 at 9:17

5 Answers 5

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

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

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,

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

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

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/hyoLedxw/