表单提交后停止页面刷新

Question

我已经搜索了很多关于这个的其他线程，我看不到我做错了什么，我试图发送表单值到一个PHP文件作为电子邮件发送，但是页面始终刷新。我已经尝试使用event.preventDefault并在我的ajax调用之前和之后都返回false，但似乎没有任何工作。我在这里错过的是我的代码。

HTML

<form method="post" name="registerForm" class="form"> 
    <label for="fullName" class="form__fullname form__label">Full Name</label> 

    <input type="text" name="fullName" placeholder="Richard Thomson" maxlength="40" tabindex="1" pattern="^[a-zA-Z\s]*$" class="form__input" id="name" required> 

    <label for="email" class="form__email form__label">Email</label> 

    <input type="email" name="email" placeholder="richard.thomson45@gmail.com" tabindex="2" class="form__input" id="email" required> 

    <label for="telephone" class="form__tel form__label">Phone</label> 

    <input type="tel" name="telephone" placeholder="07915834998" tabindex="3" pattern="[0-9]{11}" maxlength="11" class="form__input" id="telephone" required> 

    <input type="submit" value="Submit" name="submit" class="form__submit" id="submit"> 
</form> 

JS

var fullName, 
    telephone, 
    email, 
    submitButton = $("#submit"),   
    formData; 

submitButton.submit(function (event) { 
    // event.preventDefault(); 

    fullName = $("#name").val(); 
    telephone = $("#telephone").val(); 
    email = $("#email").val(); 
    formData = { 
     'name': fullName, 
     'email': email, 
     'telephone': telephone 
    }; 

    $.ajax({ 
      type: 'POST', 
      url: 'email.php', 
      data: formData, 
      dataType: 'json' 
     }) 
     .done(function (data) { 
      console.log(data); 
     }) 
     .fail(function() { 
      console.log("not working"); 
     }); 

    return false; 
}); 

PHP

<?php 
    if($_SERVER['REQUEST_METHOD'] == 'POST') { 
     if (isset($_POST['name']) && isset($_POST['email']) && isset($_POST['telephone'])) { 

      if (filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) { 
       $email = $_POST['email']; 
      } 

      if (preg_match("/^[a-zA-Z\s]*$/", $_POST['fullName'])) { 
       $fullName = $_POST['fullName']; 
      } 

      if (preg_match("/[0-9]{11}/", $_POST['telephone'])) { 
       $telephone = $_POST['telephone']; 
      } 

      $telephone = substr_replace(substr_replace($telephone," ",3,0)," ",8,0); 

      $emailTo = "test@hotmail.co.uk"; 
      $emailFrom = "contact@test.co.uk"; 
      $subject = "I would like to know more about test"; 
      $message = "Name:" . " " . $fullName . "\r\n\r\n"; 
      $message .= "Email:" . " " . $email . "\r\n\r\n"; 
      $message .= "Telephone:" . " " . $telephone; 

      $headers = "From: $emailFrom \r\n"; 
      $headers .= 'Content-Type: text/plain; charset=utf-8'; 
      $headers .= "Reply-To: $email \r\n"; 

      $success = mail($emailTo, $subject, $message, $headers); 

     } else { 
      echo("Please fill all necessary fields"); 
     } 
    } 
?> 

Answer 1

防止在提交按钮的默认理论上应该停止表单提交—但：

1. 没有输入按钮的submit事件。如果您聆听click，那么这将起作用，但部分原因是因为...
2. 可能存在其他混淆因素干扰此操作，即导致表单提交的其他击键或用户交互。

您应该正在倾听从表单中触发的onsubmit事件，而不是从提交按钮发出的事件。表单的提交事件是提交表单时触发的明确事件：是由<button>,<input type="submit">或甚至以编程方式触发的，如$form.trigger('submit')。你可以给你的形式的ID，即：

​​

，然后只需在onsubmit回调执行完全一样的逻辑：

$('#registrationForm').on('submit', function(e) { 
    // Prevent form submission by the browser 
    e.preventDefault(); 

    // Rest of the logic 
}); 

如果您不能修改DOM，这样你可以识别在<form>元素，使用jQuery的DOM遍历方法也将工作，即：

var $form = submitButton.closest('form'); 
$form.on('submit', function(e) { 
    // Prevent form submission by the browser 
    e.preventDefault(); 

    // Rest of the logic 
}); 

为了说明我的声明，即表单提交事件作为一个“U mbrella”捕获所有提交的事件，不管它们是如何被触发，参考的例子，我附上如下：

$(function() { 
 
    $('#form').on('submit', function(e) { 
 
    console.log('Form submission captured. It is triggered by: ', document.activeElement); 
 
    //e.preventDefault(); 
 
    }); 
 
    
 
    $('#submitInput').on('submit', function(e) { 
 
    console.log('Triggering submit event from <input>'); 
 
    }); 
 
    
 
    $('#submitButton').on('click', function() { 
 
    console.log('Triggering submit event from <button type="submit" />'); 
 
    }); 
 

 
    $('#submitProgramatically').on('click', function() { 
 
    console.log('Triggering submit event using JS only'); 
 
    $('#form').trigger('submit'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form" action="#"> 
 
    <input type="text" placeholder="Just another text field" /> 
 
    <br /> 
 
    <input type="submit" value="Submit using an <input>" id="submitInput" /> 
 
    <br /> 
 
    <button id="submitButton">Submit using a &lt;button&gt;</button> 
 
    <br /> 
 
    <a href="#" id="submitProgramatically">Submit programatically using JS</a> 
 
</form>

注意：您可以绕过jQuery的onsubmit事件处理程序，如果调用直接在DOM节点上使用submit()方法：$('form')[0].submit()。