Question

我有一位设计师坚持通过点击输入和AJAX发布的帖子以及Fancybox提供的回复提交单个表单字段。

问题是return false没有阻止提交页面。

我在那里做错了什么？

<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(/^\S+@\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;
    }
  });   
  }
});

Answer 1

return false需要直接在submit处理程序中执行，如下所示：

$('#home_stay_informed_form').submit(function() {
  var reg = new RegExp(/^\S+@\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) {

用

替换return false

e.preventDefault();

输入时用于提交的AJAX表单提交

1 个答案: