爲什麼提交此表單？

Question

我有一個問題，我想通過AJAX郵件，我的問題是，我的表單不斷提交。 由於某種原因，它會刷新URL中的所有表單，但是我還沒有發送任何GET內容？

HTML：

<form onsubmit="ajaxEmail(); 
     return false;" > 
    <input type="text" name="name" id="name" value="Name" maxlength="1000" onfocus="this.value = this.value == 'Name' ? '' : this.value;" onblur="this.value = this.value == '' ? 'Name' : this.value;" /> 
    <input type="email" name="email" id="email" value="Email" maxlength="1000" onfocus="this.value = this.value == 'Email' ? '' : this.value;" onblur="this.value = this.value == '' ? 'Email' : this.value;" /> 
    <input type="text" id="subject" value="Subject" maxlength="2000" onfocus="this.value = this.value == 'Subject' ? '' : this.value;" onblur="this.value = this.value == '' ? 'Subject' : this.value;" /> 
    <textarea name="Message" id="body" maxlength="40000" onfocus="this.value = this.value == 'Message' ? '' : this.value;" onblur="this.value = this.value == '' ? 'Message' : this.value;">Message</textarea> 
    <input type="submit" value="send" class="submit-button"/> 
</form> 

JS：

$(function ajaxEmail() { 
    $('#emailMsgResp').hide(); 
    $('#emailMsgBody').hide(); 

    var name = $('#name').val(); 
    var emailForm = $('#email').val(); 
    var subject = $('#subject').val(); 
    var message = $('#body').val(); 

    $.ajax({ 
     type: "POST", // Can be "GET" 
     url: "../ajaxMail.php", 
     data: { 
     name: name, 
     emailFrom: emailFrom, 
     subject: subject, 
     message: message 
    }, 
    dataType: "json", 
    success: function (data) { 

     if (data['response'] == 1) { 

      $('#emailMsgResp').show(); 
      $('#emailMsgResp').append('<div class="skill3" id="emailMsgBody" style="width:325px; height: 38px; margin: 0px auto;"><p>Thank you for contacting me' + data['response'] + '</p></div>'); 
      return false; 

     } else if (data['response'] == 0) { 

      $('#emailMsgResp').show(); 
      $('#emailMsgResp').append('<div class="skill3" id="emailMsgBody" style="width:325px; height: 38px; margin: 0px auto;"><p>Error: Please use your own client and write to contact@ivan-ristic.com</p></div>'); 
      return false; 
     } 
    } 
    }); 
    return false; 
}); 

ajaxMail.php

$email_it_to = 'mymail@mymail.com'; 

$name = $_POST['name']; 
$email_from = $_POST['emailFrom']; 
$subject = $_POST['subject']; 
$body = $_POST['message']; 

if(!isset($name) || !isset($email_from) || !isset($subject) || !isset($body)) { 
    $response = 0; 

} else { 

    $email_from = $email; 
    $email_subject = "Contact Form: ".stripslashes($subject); 
    $email_message = "Below is a message submitted by '".stripslashes($name); 
    $email_message .="' on ".date("d/m/Y")." at ".date("H:i")."\n\n"; 
    $email_message .= stripslashes($body); 

    $headers = 'From: '.$email_from."\r\n" . 

    'Reply-To: '.$email_from."\r\n" . 
    'X-Mailer: PHP/' . phpversion(); 

    if (mail($email_it_to, $email_subject, $email_message, $headers)) { 

     $response = 1; 
    } else { 

     $response = 0; 
    } 
} 

echo json_encode($response); 

Answer 1

要分配的功能，爲文檔準備好處理程序，所以它得到儘快叫該頁面已準備就緒。您有：

...這相當於：

$(document).ready(function ajaxEmail() { 
    /* your code */ 
}); 

你應該有哪些：

function ajaxEmail() { 
    /* your code */ 
} 

這將使你的函數全局函數，可以是從內聯事件屬性調用。

或者，因爲你無論如何使用jQuery，從表單中刪除內嵌onsubmit=...處理程序，並與jQuery分配給它，而不是：

$(function() { 
    $("form").submit(function(e) { 
     e.preventDefault(); 

     /* your other function contents here */ 
    }); 
}); 

當然，這將是更好的給您形式的id屬性和使用$("#yourFormId").submit(...)而不是使用$("form").submit(...)（將相同的處理程序分配給頁面上的所有表單）。