jQuery表单提交答案

【问题标题】：jQuery form submitjQuery表单提交
【发布时间】：2011-04-08 00:20:33
【问题描述】：

我的目标是：何时提交：

对表单进行了验证：OK
调用 ajax 来查看用户名和密码是否匹配：OK
如果不匹配，则显示错误：OK
如果它们匹配，那么请真正提交表单：不行。

实际上问题是，我无法提交表单，因为上面有一个 jquery 提交事件！

function form1Submit() {
var username=$('#username').val();
var password=$('#password').val();
if (username.length<2) {
    return false;
}
if (password.length<2) {
    return false;
}
$.post("check.php", { username: username, password:password }, function(data) {
    if (data=="ko") {
        alert('bad password');
        return false;
    } else {
    //to be done here !
    }
});
    return false;
}
function init() {
   $('#form1').submit(function(){
        return form1Submit();
    })
}
$(document).ready(function(){
    init();
})

【问题讨论】：

标签： javascript jquery forms submit

【解决方案1】：

return false 阻止了默认的表单提交操作。您可以从form1Submit() 函数或者到return true 让默认表单提交操作完成其工作，或在else 内添加另一个$.post()如果您的意图是使用 ajaxical 功能，它会将数据异步提交到表单。

【讨论】：

【解决方案2】：

你可以调用原生的提交事件，这样做：

$('#form1').submit(form1Submit);

然后在您的帖子回调中执行以下操作：

$.post("check.php", { username: username, password:password }, function(data) {
    if (data=="ko") {
        alert('bad password');
    } else {
        this.submit();
    }
});

this.submit() 不是调用 jQuery 的 .submit() 触发函数，而是原生的 <form> .submit() 函数。

【讨论】：

【解决方案3】：

问题是 form1Submit 总是返回 false。

【讨论】：

【解决方案4】：

function form1Submit(ev, ok) {

  ev.stopPropagation();

  ok = (typeof ok != 'undefined') ? ok : false;

  if (ok)
    return true;

  var username=$('#username').val(),
      password=$('#password').val(),
      selfForm = this;

  if (username.length < 2)
    return false;

  if (password.length < 2)
    return false;

  $.post("check.php", { username: username, password:password }, function(data) {
    if (data=="ko") {
      alert('bad password');
    } else {
      $(selfForm).trigger('submit', [true]); // again submit but with ok parameter
    }
  });

  return false;
}

function init() {
   $('#form1').bind('submit', form1Submit);
}

$(document).ready(function(){
    init();
})

【讨论】：

$(selfForm).trigger('submit', [true]); 似乎可以解决问题。只需将 selfform 替换为表单的 ID 即可。例如：$('#frm_test').trigger('submit', [true]);