How to get a form Id an attribute located in

Question

I have the following form:

<form id="formId">
    <!-- some tags -->
    <div>
        <!-- some other divs or something else -->
            <input type="radio" onclick="handler(this) />
    </div>
</form>

Where the function handler looks like:

var handler = function(elem){
    init();
    var clicked = //here should be form id
    //other staff
};

How to get the id of the enclosed form? Assume that there's only one form on the web-page.

I'm looking for pure-js as well as jQuery solutions.

Milind Anantwar · Answer 1 · 2015-05-13T07:54:51.603

5

You need to:

1) create the jquery object for elem.

2) Traverse to form element using .closest('form')

3) Use .attr('id') to get the id

$(elem).closest('form').attr('id');//will return "formId" in defined click handler

Working Demo

edited May 13 '15 at 07:54

answered May 13 '15 at 07:43

Milind Anantwar

81,290
25
94
125

BTW, the pure JS example from another answer works just fine. – St.Antario May 13 '15 at 07:49
@MilindAnantwar you know you can stick that demo into your answer, right? – Patrick Roberts May 13 '15 at 07:56
I meant embedded in the answer, not linked in it. But to each his own. – Patrick Roberts May 13 '15 at 08:13

score 4 · Accepted Answer · answered May 13 '15 at 07:46

Pure JS solution:

var handler = function(elem) {
  // init();
  var clicked = elem.form.getAttribute('id');

  alert(clicked);
};

<form id="formId">
  <!-- some tags -->
  <div>
    <!-- some other divs or something else -->
    <input type="radio" onclick="handler(this)" />
  </div>
</form>

score 1 · Answer 3 · answered May 13 '15 at 08:11

1

Each <input> element in a form has a .form property that contains the <form> element they reside in; the .id is a property on any element.

var handler = function(elem) {
  var clicked = elem.form.id;

  alert(clicked);
};

<form id="formId">
    <!-- some tags -->
    <div>
        <!-- some other divs or something else -->
            <input type="radio" onclick="handler(this)" />
    </div>
</form>

answered May 13 '15 at 08:11

Ja͢ck

170,779
38
263
309

exactly why you should explicitly state your intention by using ``.getAttribute()`` – Patrick Roberts May 13 '15 at 08:18
@PatrickRoberts I would argue that you shouldn't have input elements with names that clash with standard element properties such as id. – Ja͢ck May 13 '15 at 08:23
And I would argue that you shouldn't use [property names that have undefined behavior](http://stackoverflow.com/questions/2435525/best-practice-access-form-elements-by-html-id-or-name-attribute) – Patrick Roberts May 13 '15 at 08:37
The [`.id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id) property is pretty well established; it's just that for forms specifically (but maybe not exclusively) this property can be clobbered by individual input elements. – Ja͢ck May 13 '15 at 09:07

Sarfaraaz · Answer 4 · 2015-05-14T06:53:19.503

0

you could make realy messy code like this.

var handler = function(elem){
    init();
    var searching = true;
    var tempElem = elem;
    while(searching)
    {
        //added check to make sure there is a parentNode as suggested by @Patrick Roberts
        tempElem = tempElem.parentNode || false;
        if(tempElem)
        {
            //added to lower case as corrected by @Patrick Roberts
            if(tempElem.nodeName.toLowerCase() == "form")conversion
                searching = false;
        }
        else
            searching = false;//EDIT: if there is no form node then it will also stop searching
    }
    formElem = tempElem || {"id" :"no form found"};
    var clicked = formElem.id;//here should be form id
    //other staff
};

basically make a while loop to keep going up the chain of elements till you find a form element

edited May 14 '15 at 06:53

answered May 13 '15 at 08:04

Sarfaraaz

488
6
17

``if (tempElem.nodeName.toLowerCase() === "form")``. [Node.nodeName](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName) references [Element.tagName](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName) which is uppercase in HTML, and only lowercase in X(HT)ML. – Patrick Roberts May 13 '15 at 08:22
Also, if you reach the top without finding a form element, you'll get a ``ReferenceError`` before your ``while`` loop terminates. – Patrick Roberts May 13 '15 at 08:25
Your corrected code will now never terminate once ``tempElem`` is false. ``searching`` is never set to false in that case. – Patrick Roberts May 13 '15 at 20:25
i see. will add an else – Sarfaraaz May 14 '15 at 06:51

How to get a form Id an attribute located in

4 Answers4