CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4bootstrap-modal
u936293
u936293

Reputation: 16264

Contents of TEXTAREA in a Modal remains the same upon reopening

I have a textarea inside a Bootstrap 4 modal dialog box as follows:

<div class="modal fade" id="updateTitle" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">Update title of ticket</div>
                <button class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <textarea id="titleText"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Save changes</button>
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
            </div>
         </div>
    </div>
</div>
</div>

<p id="title">Test</p>

I populated the contents of the textarea by copying from another element #title as follows:

$("#updateTitle").on("show.bs.modal", function(event) {
    $("#titleText").text($("#title").text());
})

I have not added code to save changes yet. I tested modifying the text in the textarea, dismissed the dialog and reopened it again. When reopened, the textarea showed the modified text instead of that of $("#title").text().

For example, if I changed Test to Test123, upon reopening it showed Test123 even though the script code above had restored it back to Test.

I put a breakpoint and can confirm that the above script was executed every time the dialog is opened. However, the textarea just does not show

Is this by design?

Upvotes: 1

Views: 909

Answers (1)

David Liang
David Liang

Reputation: 21506

The issue you're seeing is because you changed the text of the <textarea> on show.bs.modal but when you type on that <textarea> you're actually setting its value instead!

On jQuery documentation, it said:

The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method

So the fix is to use .val():

$("#updateTitle").on("show.bs.modal", function(event) {
    $("#titleText").val($("#title").text());
});

fiddle: http://jsfiddle.net/aq9Laaew/158406/

Upvotes: 2

Related Questions