Question

有点奇怪的问题。我有一个表单，在这个表单中，控件是使用onClick事件而不是按钮的div。我不能使用按钮，因为我不能使用页面重新加载，而是我必须使用ajax发送所有数据。

另外一半按钮只增加计数器，下面是我的代码。我将如何使用JavaScript来查找元素单击的表单ID。例如：

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

doSomething将继续向上移动父级或类似的级别，直到找到该形式，然后变量将为其分配表单id。

<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

如果你直接使用javascript而不是jquery或其他一些库。每个DOM元素都有parentNode Property

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

从那里你可以遍历每个父级，直到你回到表单元素然后拉出id。

Answer 2

你的doSomething函数可以继续浏览它的父母，直到它找到一个表单，如下所示：

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

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

  return parent.id;
}

此外，如果您使用<button type="button">...</button>，则不会导致页面刷新，因为默认按钮type为submit。

Answer 3

这样的事情怎么样：

 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
}

找到表单id div是

3 个答案: