After changing text in textarea is not changing when try to change using drop-down list text?

Question

I have three multi-select dropdown lists and after selection from these dropdown list user press the submit button and the list text show in textarea but if user change some text in textarea and then again select another list from the dropdown then press submit the text is not changing in textarea. I tried some solutions such as one the guy said use $("#total_selections").val(""); instead of $("#total_selections").html(""); but after this nothing is showing in textarea.

<div class="form-group">
  <button type="button" class="btn btn-primary" id="selection_button" disabled>Select Tags</button>
 </div>
@Html.TextAreaFor(m => m.Formula, new { @class = "form-control", id = "total_selections" })

$("#selection_button").click(function () {
            $("#tag_creation").prop('disabled', false);
            $("#total_selections").val("");
            SelectedItemArray();
        });
    });


    function SelectedItemArray() {
        var datas = new Array();
        var datas = $('.add_item option:selected').map(function ()
        {
            return $(this).text() || undefined;
            }).get();
        $.ajax({
            url: "@Url.Action("selectedTags","CalculatedTags")",
            type: 'Post',
            contentType: 'application/json',
            dataType: 'json',
            data: JSON.stringify({ 'selectedTags': datas }),
            success: function (data) {
                $("#total_selections").append(data);
            }
        });
    }

Does this answer your question? [How do I clear a textarea with jquery](https://stackoverflow.com/questions/38984133/how-do-i-clear-a-textarea-with-jquery) — Muhammad Sami, Jun 04 '20 at 13:37

Muhammad Sami · Accepted Answer · 2020-06-04T17:51:49.267

0

$("#selection_button").click(function () {
               var  sel = $('#add_item option:selected').val();
     const ele= `<p style = "display:inline; background-color: #e9ebee; color: black; margin: 2px; padding: 1px;"> ${sel} <span style="cursor: pointer" onclick= "this.parentElement.remove()"> x</span> </p>`;
     $("#total_selections").append(ele);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  id="add_item">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

  <button type="button"  id="selection_button" >Select Tags</button>
<div contenteditable="false" style="min-height:50px; border:1px solid black; 
 width:300px;" id="total_selections"></div>

The append function changes the DOM, and this is not what you are trying to do here (This is what breaks the default behavior of the textarea element).

edited Jun 04 '20 at 17:51

answered Jun 04 '20 at 13:52

Muhammad Sami

520
2
8
21

not working getting null in textarea when using .val() but getting text when using .text() or .html – Jun 04 '20 at 15:37
Check selected value and data through console it should work – Muhammad Sami Jun 04 '20 at 15:42
sorry i made a silly mistake i should use $("#total_selections").val(data); instead of this $("#total_selections").append(data); – Jun 04 '20 at 15:47
Hi I have another question can I make these selections in Textarea unchangeable i mean saab audi are uneditable but we can insert something between them something like saab+audi=car – Jun 04 '20 at 15:53
i didnot get what u wanna say! do you want to make textarea readonly ? – Muhammad Sami Jun 04 '20 at 16:22
yes each selected text from dropdown should be only read-only in textarea – Jun 04 '20 at 17:07
I don't want to make the whole Textarea read-only instead I just want to make read-only the selected items from the dropdown list – Jun 04 '20 at 17:19
you could not be able to do this in textarea! check this https://stackoverflow.com/questions/4705848/rendering-html-inside-textarea/4705882 – Muhammad Sami Jun 04 '20 at 17:43

After changing text in textarea is not changing when try to change using drop-down list text?

1 Answers1