表單提交後停止頁面刷新

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()。