How to access the text content of textarea that was generated dynamically with javascript?

Question

I have a web page where users can upload pdfs. When users have uploaded for instance 3 pdfs, then three textarea and buttons are generated so that they can submit titles for the pdfs. My problem is I do not know how to get access to the text in the textarea of these dynamically generated texareas as i hope to also assign those titles to the uploaded pdfs. When any of the button are pressed, my submitTitle() function has no idea which button was pressed, and I do not know how to figure this one out. I have a scope problem and don't know how to sort this. Please can someone advise?

Here is my code thus far:

         function completeHandler(event){
        // convert JSON text to a JSON object
        var jsonObject = JSON.parse(event.target.responseText);
        _("status").innerHTML = jsonObject.succeed[0].name;



        // Creating a form dynamically.
        // Allow user to copy/paste the title of the pdf.
        var succeedList = jsonObject.succeed;
       console.log(succeedList);

        for( i=0; i<succeedList.length; i++){
            var div_forTextArea = document.createElement("DIV");
            div_forTextArea.setAttribute('class', 'dyn_div');

            var heading = document.createElement("h6");
            heading.innerHTML = jsonObject.succeed[i].name;
            div_forTextArea.appendChild(heading);

            var textarea = document.createElement("TEXTAREA");
            var txtarea_id = 'txt_'+i;
            textarea.innerHTML="Enter title of pdf here...";
            textarea.setAttribute('id', 'txtArea_'+i);
            div_forTextArea.appendChild(textarea);
            console.log(textarea);

            var subm_btn = document.createElement("INPUT");
            subm_btn.setAttribute('type','submit');
            subm_btn.setAttribute('id', 'btn_'+i);
            subm_btn.setAttribute('value', "submit title");
            subm_btn.setAttribute('onclick', 'submitTitle()');
            console.log(subm_btn);

            div_forTextArea.appendChild(subm_btn);

            document.getElementById('out_box').appendChild(div_forTextArea);

        }
    }


  function submitTitle(){
  //?????
    }

What about `document.getElementById('txt_0').value;` ? http://stackoverflow.com/questions/1642447/how-to-change-the-content-of-a-textarea-with-javascript — nuala, Mar 26 '15 at 19:13
I don't know which button has been pressed thus which text area to retrieve the text content. My submitTitle function is outside the completedHandler function. If i place it inside, then when i press any of the buttons, the function submitTitle() is not recognised ("undefined") — dave, Mar 26 '15 at 19:24

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

Basically you need to be sure that you are assigning an ID so that you can retrieve it. You can only operate on an object if you can't refer to it. (How would you refer to a friend if your friend didn't have a name?)

Here is a previous question that has asked the same thing. This should answer your question. :) good Luck!

edited May 23 '17 at 12:06

Community

1
1

answered Mar 26 '15 at 19:25

Kleigh

424
3
12

score 0 · Accepted Answer · answered Mar 26 '15 at 19:29

You could give submitTitle an extra parameter which indicates which button was clicked/which textarea shall be evauluated.

When creating the elements write;

subm_btn.setAttribute('onclick', 'submitTitle('+i+')');`

And then use it like this:

function submitTitle(id){
    var textEntered = document.getElementById('txtArea_txt_'+id).value;
    console.log('Textarea #'+id+' has text: '+textEntered);
}

How to access the text content of textarea that was generated dynamically with javascript?

2 Answers2