jQuery 提交()、更改() 和页面刷新

Question

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

示例 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

I'm trying to submit form on select change. Without page refreshing.

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

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

你的第二段代码有问题

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

如果你想要提交，应该是

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

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

在 jQuery.ajax()

中阅读有关 jQuery ajax 事件的更多信息

jQuery 提交()、更改() 和页面刷新

jQuery submit(), change() and page refresh

javascript

jquery

onchange

submit