Question

我正在尝试在选择更改时提交表单。没有页面刷新。

示例1：

<form>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
    <button type="submit">Submit</button>
</form>

$('select').change(function() {
        console.log('changed');
        this.form.submit(function (e) {
                alert('form submitted');
                e.preventDefault();
        });
});

演示：https://jsfiddle.net/ty8Lrdm0/

问题：为什么form仍然在提交页面时刷新页面？

示例2：

<form id="form">
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
    <button type="submit">Submit</button>
</form>

$('select').change(function() {
        console.log('changed');
        $('#form').submit(function (e) {
                alert('form submitted');
                e.preventDefault();
        });
});

演示：https://jsfiddle.net/wsjLx1cs/2/

问题：为什么这个例子不起作用？

Answer 1

在第一种情况下

this.form.submit(function (e) {
          alert('form submitted');
          e.preventDefault();
     });

this是dom对象而不是jQuery对象，因此您在提交表单的表单上调用submit()。

在第二种情况下

$('#form').submit(function (e) {
             alert('form submitted');
            e.preventDefault();
     });

您正在为表单分配一个提交事件处理程序而不会触发它。

Answer 2

我试图在选择更改时提交表单。没有页面刷新。

您应该查看AJAX方法进行部分刷新。

您可以绑定事件处理程序以进行更改，而不是尝试提交表单执行AJAX请求，在服务器中处理请求并将响应传递回客户端。

第二段代码问题

您正在尝试将提交事件处理程序挂钩到表单，因此每次提交表单时都会在此之前调用此事件。

如果您希望提交提交，则应该

$("#formid").submit();

但在这种情况下，整个页面都会刷新。

在 jQuery.ajax()

中详细了解jQuery ajax事件

jQuery submit（），change（）和页面刷新

2 个答案: