javascript - find form id div is in

Question

Bit of a weird question. I have got a form and inside this form the controls are div's with onClick events instead of buttons. I can't use buttons as I can't use page reloads, instead I have to send all data using ajax.

Plus half of the buttons just increase counters, below is my code. How would I go about using JavaScript to find the form ID that the element clicked on is in. So as an example:

<form id="20">
   ...
   <div onClick="doSomething(this)">
   ...
</form>

The doSomething will then keep moving up levels of parents or something like that until it finds the form, and then a variable will have the form id assigned to it.

<form id="50">
            <div class="image_container background">
                <div style="text-align:center; font-size:12px;">image1</div>
                <input type="hidden" id="imgId" value="50" />
                <div class="image" style="background-image:url(images/image3.JPG);"></div>
                <div class="selected_product">
                    <span>KR</span>
                </div>
                <input type="hidden" id="applied_products" value="KR" />
            </div>
            <div class="controls_container background">
                <div id="selected">KR</div>
                <a class="button arrow expandProducts">
                    <span>
                        <div class="products">
                            <span>KR</span>
                            <span>A5</span>
                            <span>CC</span>
                        </div>
                    </span>
                </a>
                <hr />
                <span class="button plus" onClick="sale(this)"></span>
                <input type="text" id="amount" disabled="disabled" value="0"/>
                <span class="button minus"></span>
                <hr />
                <input type="text" id="total" disabled="disabled" value="£0"/>
            </div>
        </form>

Answer 1

If you are going straight javascript and not jquery or some other library. Each DOM Element has a parentNode Property

var elm = document.getElementById(yourDivId);
var parent = elm.parentNode;

From there you can cycle through each parent, until you get back to the form element and then pull out the id.

Answer 2

Your doSomething function could continue navigating through it's parents until it finds a form, like so:

function doSomething( elem )
{ 
  var parent = elem.parentNode;

  if( parent && parent.tagName != 'FORM' )
  {
    parent = doSomething(parent);
  }

  return parent.id;
}

Also, if you use <button type="button">...</button> it won't cause a page refresh, since the default button type is submit.

Answer 3

How about something like that:

 function handler(target) {
    var parent = target.parentNode;

    // loop until parent is a form or browser crashes :)
    while (parent.tagName != 'FORM') {
        parent = parent.parentNode;
    }

    var formId = parent.id; // the id you wanted

    // do stuff
}