使用 JQuery 提交表单答案

【问题标题】：Using JQuery to submit form使用 JQuery 提交表单
【发布时间】：2017-12-23 16:56:52
【问题描述】：

我在一个页面上有以下表单：

<form action="/" method="post">
<select id="SelectedMonth" name="SelectedMonth">
<option>7/1/2017</option>
<option>6/1/2017</option>
</select>
</form>

我正在尝试使用以下 jquery sn-p 提交表单。 jquery 代码位于表单之外，表单是页面上唯一的表单。

 $("#SelectedMonth").change(function () {
         alert(this.value);
         $('form').submit(function (event) {
         alert("Submitted");
         event.preventDefault();
         });
    });

第一个警报被触发并显示选定的值，但从未触发提交。

看起来这很简单，但它不起作用。我错过了什么？

TIA

【问题讨论】：

删除此代码 ** event.preventDefault(); **
@ravi2432 这不是问题（而且，无论如何，该行在 alert() 之后出现）。问题是表单从一开始就永远不会被提交，因此事件永远不会触发。

标签： javascript jquery asp.net-mvc forms

【解决方案1】：

更改操作并将其设为空白并像这样改变功能

$("#SelectedMonth").change(function () {
     $('form').submit();
});

它会起作用的

【讨论】：

【解决方案2】：

这是因为，虽然您可以更改下拉列表中的选定元素（从而导致第一个 alert() 触发），但您没有提交表单的机制，所以第二个没有。

您需要添加一个submit按钮，以便触发form的submit事件。

此外，按照您获取代码的方式，submit 事件处理程序实际上不会触发，除非您首先在下拉列表中更改您的选择。你可能不想要这种行为。这两个事件处理程序应该相互独立设置。

$("#SelectedMonth").change(function () {
   alert(this.value);
});

$('form').submit(function (event) {
  alert("Submitted");
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post">
  <select id="SelectedMonth" name="SelectedMonth">
    <option>7/1/2017</option>
    <option>6/1/2017</option>
  </select>
  <button type="submit">Submit</button>
</form>

【讨论】：

【解决方案3】：

您将提交事件放在更改事件尝试中，并添加一个提交按钮来提交事件

$("#SelectedMonth").change(function () {
         alert(this.value); 
    });

$('form').submit(function (event) { 
         event.preventDefault();
 alert("Submitted");
         });

如果您想在更改日期提交，那么试试这个

 $("#SelectedMonth").change(function () {
          $('form').trigger('submit');
        });

    $('form').submit(function (event) { 
             event.preventDefault();
     alert("Submitted");
             });

【讨论】：

【解决方案4】：

“为什么它不起作用”这个问题的答案是 .submit(function(){}) 实际上并没有提交表单，而是添加了 submit handler - 提交表单时将执行的函数

This method is a shortcut for .on( "submit", handler ) in the first variation, and .trigger( "submit" ) in the third.

Description: Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.

因此，如果您将函数传递给它，它将绑定处理程序。当你在没有参数的情况下触发它时，它实际上会提交表单。

你不需要按钮来提交表单。

所以实际上代码一定是这样的

 $('form').submit(function (event) {
     alert("Submitted");
     event.preventDefault();
 });
 $("#SelectedMonth").change(function () {
     $('form').submit();
});

【讨论】：