使用javascript定位要按下的表单上的按钮答案

【问题标题】：Targeting a button on a form to press, with javascript使用javascript定位要按下的表单上的按钮
【发布时间】：2011-01-21 00:34:49
【问题描述】：

我知道，使用 Javascript，我可以使用以下方式告诉表单提交：

document.forms[0].submit()

但是，如果页面上有多个表单，可以按任意顺序排列，我将如何定位此表单中的提交链接：

<form action="/services/auth/" method="post">
<div id="auth-allow-container" class="button-container">
<a class="Butt" id="auth-allow" type="submit" href="#"><span>SUBMIT</span></a>
<a class="Butt CancelButt" id="auth-disallow" href="#home"><span>CANCEL</span></a>
</div>
</form>

..这样就好像用户点击了提交一样？

【问题讨论】：

您的 FORM 元素不包含任何表单域。此外，您将锚上的 type 属性设置为“提交”。但是锚的 type 属性有不同的功能：w3.org/TR/html401/struct/links.html#adef-type-A 你应该使用这个：<input type=submit>
有几个表单字段，我只是错过了它们。您可能对 type 属性是正确的 - 但是，我无法控制 html。（顺便说一下，这是flickr的标准验证码）
那么，你使用的是 JS 库吗？
不，没有 js 库。我正在为 iPhone UIWebView 使用 stringByEvaluatingJavaScriptFromString 方法，所以我不能使用库 iphoneincubator.com/blog/windows-views/…
呵呵，那个类名是“Butt”。

标签： javascript dom forms

【解决方案1】：

你可以做一个函数：

function submitFormById(id) {
    var el = document.getElementById(id);
    while ( el && el.tagName.toLowerCase() != 'form') {
        el = el.parentNode;
    }
    el && el.submit();
}

然后你像这样使用这个函数：

submitFormById('auth-allow');
submitFormById('auth-disallow');

双方都将提交表单。

【讨论】：

对于表单，使用名称比使用 id 更常见，至少对于这个特定问题。
不幸的是，我无法控制 html
不应该 id='auth-allow' 调用提交吗？
@yopefonic 不，submit() 方法仅针对 FORM 元素定义w3.org/TR/DOM-Level-2-HTML/html.html#ID-76767676
是的，您是否来自兄弟姐妹并不重要。但你仍然需要调用这段 javascript。更新：将带有事件监听器的代码放在我的答案中

【解决方案2】：

给表单一个名称属性。然后你可以做document.name.submit()。即

<form name="MyForm" ....>
<input ... />
</form>

然后你就可以document.MyForm.submit()

编辑：

正如您所说，您无法更改 html，添加 ID 的解决方案也无济于事。您必须确定该特定元素是页面上的哪个数字表单元素，并执行 docuemnt.forms[x].submit() 其中 x 是此表单的索引。

【讨论】：

抱歉，我无法更改 html
当前最佳实践建议您应避免使用名称来访问 html 元素。使用 Šime Vidas 的答案。
在我的经验中（作为专业的 Web 开发人员），在专门解决在 js 中提交表单的问题时，使用该名称更为常见。

【解决方案3】：

输入链接：

onclick="this.parentNode.parentNode.submit();"

如果更改dom结构，这有点脆弱，但它是这种表单的通用链接

更新：

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("auth-allow").addEventListener("click", submithAuthForm, false);
}, false);

function submithAuthForm(){
    document.getElementById('auth-allow').parentNode.parentNode.submit();
}

【讨论】：

不要将 JavaScript 代码放在 HTML 属性中 en.wikipedia.org/wiki/Unobtrusive_JavaScript
@sime 是的，没错，这是一个关于如何使用本地对象来实现结果的简单演示。附加事件时，该元素可用于完全相同的方式。
点击锚点时OP没有说他要提交表单。他问他如何以编程方式触发表单提交。