Javascript 选择 onchange='this.form.submit()'答案

【问题标题】：Javascript select onchange='this.form.submit()'Javascript 选择 onchange='this.form.submit()'
【发布时间】：2011-11-07 20:17:43
【问题描述】：

我有一个带有选择和一些文本输入的表单。我希望在更改选择时提交表单。使用以下方法可以正常工作：

onchange="this.form.submit()"

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

我有什么选择？

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

【问题讨论】：

提供一个展示问题的测试用例，让我们不用胡乱猜测就能回答你
确保您的按钮没有“提交”的名称或 id 属性，我之前已经看到这是干扰。
stackoverflow.com/questions/6736341/…
作为一般规则，从可用性和可访问性的角度来看，当控件更改时自动提交表单是一个非常糟糕的主意。见WCAG - F36: Failure of Success Criterion 3.2.2 due to automatically submitting a form and presenting new content without prior warning when the last field in the form is given a value 和WCAG - G13: Describing what will happen before a change to a form control that causes a change of context to occur is made
检查浏览器的 javascript 错误日志。 this.form.submit() 是标准的 Javascript，所以它应该可以工作。

标签： javascript jquery select

【解决方案1】：

你应该能够使用类似的东西：

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

【讨论】：

【解决方案2】：

我的心理调试技能告诉我，您的提交按钮名为submit。
所以form.submit指的是按钮而不是方法。

将按钮重命名为其他名称，以便form.submit 再次引用该方法。

【讨论】：

@Tomalak：我只是在猜测。这已经出现过好几次了；完全符合他的问题。
好的；也许你的回答应该是“也许你的提交按钮被命名为submit”。
不，@Tomalak，假设可能的情况要酷得多 :) 当提问者撞到他的额头时，让你看起来像个明星；)
@mplungjan：它也没有教他们如何在问题中没有提供足够的信息。
@mplungjan：一点也不。我认为，完美的答案就像 SLaks 的答案，但最后是“但我只是在猜测，因为您没有在问题中提供任何类型的测试用例或充足的信息”。 :)

【解决方案3】：

如果你使用 jQuery，就这么简单：

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

【讨论】：

【解决方案4】：

有几种方法可以完成。

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

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

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

【讨论】：

这是最好的答案。你不必总是在 jQuery 中做所有的事情——你可以在合适的地方混合'n'match。

【解决方案5】：

使用 jQuery 绑定它们并让 jQuery 处理它：http://jsfiddle.net/ZmxpW/.

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

【讨论】：

@mplungjan：但他说的是$().trigger。我假设他已经在使用 jQuery。
啊，@mplungjan 编辑了他的评论，因为我 +1 了原版。 >.
好的。道歉。我只是更改了它，因为询问者实际上确实使用了 jQuery...我的更改的影响很小 - 从不，不需要 jQuery 来提交 onchange，到是否已经使用了 jQuery :)

【解决方案6】：

使用：

<select onchange="myFunction()">

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

【讨论】：