I want to access form elements by using javascript. The form is generated dynamically so the name, id of the form and the elements are variable. I want to get the id value of a textarea inside it by providing the name of the form, which is generated by a different script.

For instance:

<form method=post name=form33>
    <textarea id=466 cols=50 rows=5></textarea>
    <input name=submit33 onclick=postCmnt(33) value=Post type=button>
</form>

and I have the name of the form name "form33" and I need its textarea id that is 466 as output...

Javascript Generating The Form:

function openComment(id, msgid, div) {
    var div = document.getElementById(div);
    div.innerHTML = "<form method=post name=form"+id+">
        <textarea id="+msgid+" cols=50 rows=5></textarea>
        <input name=submit"+id+" onclick=postCmnt("+id+") value=Post type=button>
        </form>"
}

Javascript that need to access the form

Here is my attempt to access the id name of textarea by providing form name.

function postCmnt(id){
    var msgid=document.forms["form"+id].elements[0].id.value;//the text area's id
    var msg=document.getElementById(msgid).value;//value of text area
    //rest scripts goes here        
} 

Information:

1. Form is not static generated by call to the function openComment()
2. predicting number of form in a page is not possible as it depends upon user input .Though the textarea is the 1st element of the form .

I want to access form elements by using javascript. The form is generated dynamically so the name, id of the form and the elements are variable. I want to get the id value of a textarea inside it by providing the name of the form, which is generated by a different script.

For instance:

<form method=post name=form33>
    <textarea id=466 cols=50 rows=5></textarea>
    <input name=submit33 onclick=postCmnt(33) value=Post type=button>
</form>

and I have the name of the form name "form33" and I need its textarea id that is 466 as output...

Javascript Generating The Form:

function openComment(id, msgid, div) {
    var div = document.getElementById(div);
    div.innerHTML = "<form method=post name=form"+id+">
        <textarea id="+msgid+" cols=50 rows=5></textarea>
        <input name=submit"+id+" onclick=postCmnt("+id+") value=Post type=button>
        </form>"
}

Javascript that need to access the form

Here is my attempt to access the id name of textarea by providing form name.

function postCmnt(id){
    var msgid=document.forms["form"+id].elements[0].id.value;//the text area's id
    var msg=document.getElementById(msgid).value;//value of text area
    //rest scripts goes here        
} 

Information:

1. Form is not static generated by call to the function openComment()
2. predicting number of form in a page is not possible as it depends upon user input .Though the textarea is the 1st element of the form .

• javascript
• html
• dom
• client-side

Share Follow edited Jun 13, 2014 at 18:21 SunSparc 1,92222 gold badges2323 silver badges4747 bronze badges asked Jun 23, 2013 at 9:22 Shatadru BandyopadhyayShatadru Bandyopadhyay 4811 gold badge11 silver badge66 bronze badges 5

• is the form id static – user2067005 Commented Jun 23, 2013 at 9:25
• document.querySelector('[name="form"]') ? – elclanrs Commented Jun 23, 2013 at 9:25
• the form and is attributes are not static its generated by the first javascript function when called , there might be more than one form in the document . – Shatadru Bandyopadhyay Commented Jun 23, 2013 at 9:58
• not sure what your issue is exactly but from what you posted you need to at least remove the "text" from the getElementById("text"+msgid) since the word text does not apear in the id of the textboxes. – Eyal Alsheich Commented Jun 23, 2013 at 9:59
• @EyalAlsheich: Yes you are right ,made this mistake when I was forming the question from my project . – Shatadru Bandyopadhyay Commented Jun 23, 2013 at 10:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can add a hidden field that contains the msgid:

Javascript Generating The Form:

function openComment(id,msgid,div){
    var div = document.getElementById(div);
    div.innerHTML="<form method=post name=form"+id+">
        <input type='hidden' id='theid"+id+"' value='"+msgid+"'>
        <textarea id="+msgid+" cols=50 rows=5></textarea>
        <input name=submit"+id+" onclick=postCmnt("+id+") value=Post type=button>
        </form>"
}

and then just get the value directly:

function postCmnt(id){
    var msgid=document.getElementById("theid"+id).value;//the text area's id
    var msg=document.getElementById(msgid).value;//value of text area
    //rest scripts goes here        
} 

If there is only one form in the documents, you can do

   document.forms[0]

As pointed out you can use

 document.getElementById("teller")[i]

to access the i-th field of the form with id "teller".

Demo