使用enter提交时提交AJAX表单

I have a designer insisting on a single form field submitted by hitting enter and the post made by AJAX and the response presented by Fancybox.

我有一个设计师坚持要通过点击enter和AJAX制作的post以及Fancybox提供的响应提交一个表单字段。

Problem is the the return false is not preventing the submission of the page.

问题是返回false并没有阻止页面的提交。

What am I doing wrong there?

我哪里做错了?

<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;
    }
  });   
  }
});

1 个解决方案

#1

The return false needs to do in the submit handler directly, like this:

return false需要直接在提交处理程序中执行，如下所示:

$('#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;
});

Your success handler doesn't run until the server response comes back, so your function is actually returning undefined for that else statement...and that return false inside doesn't have any effect. Putting it in the submit handler directly like is it above will do what you want, preventing the form submit.

您的成功处理程序在服务器响应返回之前不会运行，因此您的函数实际上返回的是else语句的未定义……里面的返回false没有任何影响。将它直接放在提交处理程序中，如上面所示，将执行所需的操作，防止表单提交。

A bit cleaner would be event.preventDefault(), by adding the event parameter here:

通过在这里添加事件参数，一个位清理器将是event. preventdefault ():

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

And replacing return false with

将返回false替换为

e.preventDefault();

#1