Question

我在页面上有以下表格：

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

我正在尝试使用以下jquery代码段来提交表单。 jquery代码驻留在表单之外，表单是页面上唯一的表单。

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

触发第一个警报并显示所选值，但永远不会触发提交。

看起来这很简单，但是没有用。我错过了什么？

TIA

Answer 1

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

您需要添加submit按钮，以便触发submit的{{1}}事件。

此外，您拥有代码的方式，form事件处理程序实际上无法触发，除非您先在下拉列表中更改选择。你可能不想要那种行为。两个事件处理程序应相互独立设置。

＆＃13;

submit

＆＃13;

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

＆＃13;

Answer 2

您将提交事件置于更改事件内，并添加提交按钮以提交事件

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

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

如果你想提交日期chaneg然后尝试这个

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

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

Answer 3

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

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

它会起作用

Answer 4

问题的答案＆＃34;为什么它不起作用＆＃34;是.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.

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

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

所以实际上代码必须是这样的

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

使用JQuery提交表单

4 个答案: