Javascript选择更改时提交表单

Question

我有一个包含选择框和几个文本输入框的表单，我想在选择框改变时提交表单。使用以下代码可以实现这个功能：

onchange="this.form.submit()"

然而，如果表单中还包含一个提交按钮，则在选择更改时表单不会提交。我猜是某种冲突。

在这里，我的选项是什么？

我应该使用类似于 $(this.form).trigger("submit") 的东西吗？

- JonoB

---

请提供一个展示问题的测试用例，这样我们就可以回答您而不需要猜测。 - Lightness Races in Orbit

请确保您的按钮没有名为"submit"的名称或id属性，我曾经见过它会干扰操作。 - GBa

https://dev59.com/VlnUa4cB1Zd3GeqPZlt- - SLaks

从可用性和可访问性的角度来看，当控件更改时自动提交表单通常是一个非常糟糕的想法。参见WCAG-F36：由于在表单中的最后一个字段给定值时自动提交表单并呈现新内容而未事先警告的成功标准3.2.2失败和WCAG-G13：在引起上下文变化的表单控件更改之前描述会发生什么。 - steveax

请检查您的浏览器JavaScript错误日志。this.form.submit()是标准JavaScript代码，应该可以正常工作。 - Matthew Lock

Answer 1

你应该能够使用类似于以下内容的东西：

$('#selectElementId').change(
    function(){
         $(this).closest('form').trigger('submit');
         /* or:
         $('#formElementId').trigger('submit');
            or:
         $('#formElementId').submit();
         */
    });

- David Thomas

Answer 2

我的直觉告诉我你的提交按钮名称是submit。
因此，form.submit指的是按钮而不是方法。
将按钮重命名为其他名称，以便form.submit再次指向方法。

- SLaks

---

@Tomalak：我只是猜测。这个问题之前出现过几次，完全符合他的问题。 - SLaks

好的，也许你的提交按钮被命名为 submit。 - Lightness Races in Orbit

不，@Tomalak，更酷的做法是假设可能的情况 :) 当提问者恍然大悟时，你会看起来像一颗明星 ;) - mplungjan

@mplungjan：它也未能教他们如何在问题中未提供充分信息。 - Lightness Races in Orbit

不完全是。我认为完美的答案应该像SLaks的那样，但最后要加上“但我只是猜测，因为你没有提供任何测试用例或足够的信息来支持你的问题” :) - Lightness Races in Orbit

Answer 3

如果您正在使用jQuery，那么这很简单：

 $('#mySelect').change(function()
 {
     $('#myForm').submit();
 });

- Tejs

Answer 4

这可以通过几种方式完成。

元素知道它们属于哪个表单，因此您不需要在jquery中包装this，只需调用this.form即可返回表单元素。然后您可以在表单元素上调用submit()以提交表单。

  $('select').on('change', function(e){
    this.form.submit()
  });

文档: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

这个链接是关于HTMLInputElement的开发者文档，它提供了有关如何使用此API的详细信息。HTMLInputElement是一个用于表单输入的HTML元素。您可以在此页面上找到有关此元素及其相关属性和方法的详细信息。请注意，此链接将带您离开当前网站，进入Mozilla开发者网络（MDN）的外部网站。

- Blair Anderson

---

这是最好的答案。你不一定要在jQuery中做所有事情 - 你可以根据需要混合使用。 - Dan Diplo

Answer 5

使用jQuery将它们绑定在一起，并让jQuery处理它：http://jsfiddle.net/ZmxpW/。

$('select').change(function() {
    $(this).parents('form').submit();
});

- pimvdb

---

@mplungjan：但他在谈论$().trigger。我猜他已经在使用jQuery了。 - pimvdb

Argh, @mplungjan在我点赞原帖后编辑了他的评论。请不要这样做；如果你要更改评论内容，请写一个新的评论并删除原有评论。 - Lightness Races in Orbit

好的。抱歉。我只是因为提问者实际上确实使用了jQuery才进行了更改...我的更改影响很小——从“不需要jQuery来提交onchange”到“如果已经使用了jQuery :)”。 - mplungjan

Answer 6

使用：

<select onchange="myFunction()">

    function myFunction() {
        document.querySelectorAll("input[type=submit]")[0].click();
    }

- Wasif Shahjahan