当输入用于提交时，AJAX表单提交

我有一位设计师坚持通过点击回车和由AJAX提交的帖子和由Fancybox提供的回复提交的单个表单域。问题是return false不能阻止页面的提交。当输入用于提交时，AJAX表单提交

我在那里做错了什么？

<form id="home_stay_informed_form"> 
<input name="informed_email" id="home_informed_email" value="Enter your email address..." /> 
</form> 


$('#home_stay_informed_form').submit(function() { 
    var reg = new RegExp(/^\[email protected]\S+\.\S+$/); 
    var em = $("#home_informed_email").val(); 
    if (!reg.test(em)) { 
    alert('Please correct your email address.'); 
    $("#home_informed_email").focus(); 
    return false; 
    } else { 
    $.ajax({ 
    type: "POST", 
    url: 'listSubscribe.php', 
    data : 'email=' + em, 
    success: function(msg) { 
    $("#home_stay_informed_form_msg").fancybox({ 
    'titlePosition' : 'outside', 
    'transitionIn' : 'none', 
    'transitionOut' : 'none' 
    }); 
    $("#home_informed_email").val('Enter your email address...'); 
    return false; 
    } 
    }); 
    } 
});

来源

2010-11-14 jerrygarciuh

的return false需要在submit处理直接做，是这样的：

$('#home_stay_informed_form').submit(function() { 
    var reg = new RegExp(/^\[email protected]\S+\.\S+$/); 
    var em = $("#home_informed_email").val(); 
    if (!reg.test(em)) { 
    alert('Please correct your email address.'); 
    $("#home_informed_email").focus(); 
    } else { 
    $.ajax({ 
     type: "POST", 
     url: 'listSubscribe.php', 
     data : 'email=' + em, 
     success: function(msg) { 
     $("#home_stay_informed_form_msg").fancybox({ 
      'titlePosition' : 'outside', 
      'transitionIn' : 'none', 
      'transitionOut' : 'none' 
     }); 
     $("#home_informed_email").val('Enter your email address...'); 
     } 
    }); 
    } 
    return false; 
});

你success处理程序不运行，直到服务器响应回来，所以你的函数实际上返回undefined为那else声明......而那return false里面没有任何影响。直接将它放在submit处理程序中，它会执行你想要的操作，从而阻止表单提交。

有点清洁是event.preventDefault()，通过这里添加事件参数：

$('#home_stay_informed_form').submit(function(e) {

而且随着

e.preventDefault();

来源

2010-11-14 22:34:22

更换return false我们可以使用Ajax beforesend也做验证正确的，是在上述情况下有效。 – kobe 2010-11-14 22:46:54

@gov - yup，一些验证框架支持这个...如果它是自定义的，只需在你的'success'处理程序中调用本地form.submit（）...但仍然从主提交中返回false '处理程序。 – 2010-11-14 22:48:09

你有没有做过这种类型的事情，我在这里问一个问题，但没有得到确切的答案http://stackoverflow.com/questions/4006674/jquery-image-animation-from-one-location-to-another – kobe 2010-11-14 23:06:49

当输入用于提交时，AJAX表单提交

回答

相关问题