How to access form element with javascript without using element's id

Question

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:

Form is not static generated by call to the function openComment()
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 .

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
– 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
– 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
– Shatadru Bandyopadhyay, Commented Jun 23, 2013 at 10:17

SunSparc · Accepted Answer · 2014-06-13 18:25:31Z

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        
}

edited Jun 13, 2014 at 18:25

SunSparc

1,9222 gold badges23 silver badges48 bronze badges

answered Jun 23, 2013 at 10:29

Eyal Alsheich

4774 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shatadru Bandyopadhyay Over a year ago

hmm thats a way for doing exactly what I want . Thanks

paulusm · Accepted Answer · 2013-06-23 09:24:55Z

1

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

   document.forms[0]

answered Jun 23, 2013 at 9:24

paulusm

8167 silver badges19 bronze badges

1 Comment

Shatadru Bandyopadhyay Over a year ago

Forms in the page is more than one and number of the form is variable changes upon user input.

Aravind · Accepted Answer · 2013-06-23 10:34:59Z

0

As pointed out you can use

 document.getElementById("teller")[i]

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

Demo

edited Jun 23, 2013 at 10:34

answered Jun 23, 2013 at 9:32

Aravind

3,2094 gold badges25 silver badges37 bronze badges

4 Comments

Shatadru Bandyopadhyay Over a year ago

Thanks .So if the name of the for is "x" say and textarea is first element so I can access it like this document.forms["x"][0] ? right ?

Shatadru Bandyopadhyay Over a year ago

but sadly its returning some error. Uncaught TypeError: Cannot read property 'value' of null

Aravind Over a year ago

No you need to use the form's number.If it's the first from in the document, then it's forms[0], so the j-th element of the i-th form will be referred to as forms[i][j]

Shatadru Bandyopadhyay Over a year ago

but its variable in a page ! and only thing I know can get is the name/id of the form

Collectives™ on Stack Overflow

How to access form element with javascript without using element's id

Javascript Generating The Form:

Javascript that need to access the form

3 Answers 3

1 Comment

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Javascript Generating The Form:

Javascript that need to access the form

3 Answers 3

1 Comment

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related