CODEWITHSUNDEEP
javascriptjqueryhtml
Luca Effe Federzoni
Luca Effe Federzoni

Reputation: 423

$("#myTextArea").val() returns an empty string

I'm having an issue where my textarea value is returning an empty string. I have a modal which opens on a dblclick event where there's a textarea and a button. I want that when the button is clicked the text written in the textarea is fetched and stored in a variable to be used in other functions. By the way when I click on the button the returned text is "".

the textarea html is:

<textarea id="text-comment" placeholder="Insert a new comment" style="min-width:100%"></textarea>

the button html is:

<button class="btn btn-default" data-dismiss="modal" id="edit">Edit</button>`

the function code is:

$(document).on('click', '#edit', function(){    //edits the selected note
    var classes = $(selectedNote).attr("class").toString().split(' ');
    var id = classes[2];
    var newText = $("#text-comment").val();
    console.log("new text is: "+newText);
    $(selectedNote).attr("title", newText);
    for(var i = 0; i < temporaryNotes.length; i++) {
        if(temporaryNotes[i]["ref"] == id) {
            temporaryNotes[i]["text"] = newText;
        }
    }
    for(var i = 0; i < notes.length; i++) {
        if(notes[i]["ref"] == id) {
            deleteNotes.push(notes[i]);
            notes[i]["text"] = newText;
        }
    }
})

Upvotes: 3

Views: 1476

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

I'm going to go on a limb here. The limb might break but who knows?

I believe your modal's contents are defined within the HTML itself. Perhaps you have <div class="modal-content"> or something - I don't know what modal plugin you're using (but if I ever write one, it will use <script type="text/html"> specifically to prevent this issue...)

The problem with defining modals in this way is that the "template" contents are themselves part of the document, even if the "base" one is never shown. The modal plug-in can then call cloneNode on the template and render that as the modal. Simple, right?

Not quite. IDs must be unique on the page, so any modal plug-in that uses cloneNode to render will end up with duplicate IDs all over the place.

To find out if this is the case, try running this code when your modal is visible on-screen:

alert($("[id='text-comment']").length);

This will show how many elements have that ID (whereas #text-comment may just stop after the first one). This value should be exactly 1. If it is 2 (or worse, more!) then you do indeed have a badly implemented modal plugin.

Without knowing exactly which plugin you're using nor how it works, I would suggest finding some way to uniquely identify the displayed modal as opposed to the template, and don't use IDs inside the template.

You'll need to use your browser's Developer Tools to do this, but as an example if your modal appears with class="modal-display" then you could do something like this:

var button = $(this),
    container = button.closest(".modal-display"),
    textarea = container.find("textarea"),
    value = textarea.val();

This kind of "relative search" for elements is much more flexible, and it will help you in future to learn this kind of thing. But for now, it should work around the issue of the duplicate IDs.

Upvotes: 2

Related Questions