this.form.submit(); 有更好的 jQuery 解决方案吗？答案

【问题标题】：Is there a better jQuery solution to this.form.submit();?this.form.submit(); 有更好的 jQuery 解决方案吗？
【发布时间】：2010-09-29 21:43:15
【问题描述】：

我想触发当前元素所在表单的提交事件。我知道有时可行的方法是：

this.form.submit();

我想知道是否有更好的解决方案，可能使用 jQuery，因为我不是 100% 确定方法适用于每个浏览器。

编辑：

我的情况如下：

<form method="get">
    <p><label>Field Label
        <select onchange="this.form.submit();">
            <option value="blah">Blah</option>
            ....
        </select></label>
    </p>
</form>

我希望能够提交更改<select> 的表格。

我正在寻找一种解决方案，它适用于任何表单中的任何字段，而无需知道表单上的 id 或名称。 $('form:first') 和 $('form') 不起作用，因为表单可能是页面上的第三个。另外，我已经在网站上使用 jQuery，所以使用一点 jQuery 没什么大不了的。

那么，有没有办法让 jQuery 检索输入/选择/文本区域所在的表单？

【问题讨论】：

你发布的方法一直对我有用。
是的，为什么 this.form.submit() 不起作用？

标签： javascript jquery forms submit

【解决方案1】：

我认为您正在寻找的是这样的：

$(field).closest("form").submit();

例如，要处理 onchange 事件，您可以这样：

$(select your fields here).change(function() {
    $(this).closest("form").submit();
});

如果由于某种原因您没有使用 jQuery 1.3 或更高版本，您可以调用 parents 而不是 closest。

【讨论】：

使用最接近（“form”）而不是父母（“form”）。 parents() 获取作为表单的元素的所有父级，最接近的() 停止吃掉作为元素父级的第一个表单
@TeKapa：谢谢。 jQuery 1.3（添加了closest 函数）在我回答问题一周后问世。

【解决方案2】：

this.form.submit();

这可能是您最好的选择。特别是如果您还没有在项目中使用 jQuery，则无需为此添加它（或任何其他 JS 库）。

【讨论】：

【解决方案3】：

我发现使用 jQuery 最好的解决方案是

$(this.form).submit()

使用此语句 jquery 插件（例如 jquery form plugin）可以正常工作，并且 jquery DOM 遍历开销最小化。

【讨论】：

【解决方案4】：

类似于Matthew's的回答，我刚刚发现你可以做到以下几点：

$(this).closest('form').submit();

错误：使用父功能的问题是该字段需要立即在表单内才能工作（而不是在 tds、标签等内）。

我的立场是正确的：parents（带 s）也可以。感谢 Paolo 指出这一点。

【讨论】：

with parent('form') 你说的可能是真的，但是对于 parentS('form') 它应该可以工作，即使它的字段是在一个 td 内，等等。
不会 parents('form') 返回作为该元素父级的所有表单吗？这可能会提交您尚未打算提交的外部表单。
刚刚遇到这个，想补充一点，您不应该在表单中包含表单。这是无效的，在 IE 中不起作用。所以使用parents("form") 是完全可以接受的，虽然我不知道它与closest("form") 相比效率如何。

【解决方案5】：

你总是可以JQuery-ize你的form.submit，但它可能只是调用相同的东西：

$("form").submit(); // probably able to affect multiple forms (good or bad)

// or you can address it by ID
$("#yourFormId").submit();

你也可以attach函数来提交事件，但这是一个不同的概念。

【讨论】：

问题说他不想这样做
现在确实如此。那是在我提交答案后的第二天进行的编辑。

【解决方案6】：

您的问题有点令人困惑，因为您没有解释“当前元素”的含义。

如果您在一个页面上有多个表单，其中包含各种输入元素和一个“提交”类型的按钮，那么在填写任何字段时点击“输入”都会触发该表单的提交。那里不需要任何 Javascript。

但是，如果您在表单上有多个“提交”按钮并且没有其他输入（例如表格中的“编辑行”和/或“删除行”按钮），那么您发布的行可能就是这样做的方式。

另一种方法（不需要 Javascript）可能是为所有按钮（属于“提交”类型）赋予不同的值。像这样：

<form action="...">
    <input type="hidden" name="rowId" value="...">
    <button type="submit" name="myaction" value="edit">Edit</button>
    <button type="submit" name="myaction" value="delete">Delete</button>
</form>

当您点击一个按钮时，只会提交包含该按钮的表单，并且只会发送您点击的按钮的值（连同其他输入值）。

然后在服务器上，您只需读取变量“myaction”的值并决定要做什么。

【讨论】：

【解决方案7】：

在 JQuery 中你可以调用

$("form:first").trigger("submit")

不知道这样会不会好很多。我认为 form.submit();很普遍。

【讨论】：

【解决方案8】：

<form method="get">
   <p><label>Field Label
      <select onchange="this.form.submit();">
         <option value="blah">Blah</option>
            ....
     </select>
     </label>
   </p>
    **<!-- <input name="submit" type="submit" /> // name="submit_new_name" -->**
  </form>

<!-- 

   this.form.submit == this.form.elements['submit'];

-->

【讨论】：