當輸入用於提交時，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表單提交

回答

相關問題