提交後Ajax表單刷新

Question

我在wordpress網站上添加了一個簡單的Ajax表單。驗證有效，但表單在提交後刷新，而不是發送電子郵件。

我的代碼是：

<script type="text/javascript"> 
jQuery.validator.addMethod('answercheck', function (value, element) { 
     return this.optional(element) || /^\bcat\b$/.test(value); 
    }, "type the correct answer -_-"); 

// validate contact form 
jQuery(function() { 
    jQuery('#contact').validate({ 
     rules: { 
      name: { 
       required: true, 
       minlength: 2 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      message: { 
       required: true 
      }, 
      answer: { 
       required: true, 
       answercheck: true 
      } 
     }, 
     messages: { 
      name: { 
       required: "come on, you have a name don't you?", 
       minlength: "your name must consist of at least 2 characters" 
      }, 
      email: { 
       required: "no email, no message" 
      }, 
      message: { 
       required: "um...yea, you have to write something to send this form.", 
       minlength: "thats all? really?" 
      }, 
      answer: { 
       required: "sorry, wrong answer!" 
      } 
     }, 
     submitHandler: function(form) { 
      jQuery(form).ajaxSubmit({ 
       type:"POST", 
       data: jQuery(form).serialize(), 
       url:"http://testtermil.pl/wordpress/process.php", 
       success: function() { 
        jQuery('#contact :input').attr('disabled', 'disabled'); 
        jQuery('#contact').fadeTo("slow", 0.15, function() { 
         jQuery(this).find(':input').attr('disabled', 'disabled'); 
         jQuery(this).find('label').css('cursor','default'); 
         jQuery('#success').fadeIn(); 
        }); 
       }, 
       error: function() { 
        jQuery('#contact').fadeTo("slow", 0.15, function() { 
         jQuery('#error').fadeIn(); 
        }); 
       } 
      }); 
     } 
    }); 
}); 
</script> 

而且php.process文件：

<?php 


    $to = "myemail@gmail.com"; 
    $from = $_REQUEST['email']; 
    $headers = "From: $from"; 
    $subject = "You have a message."; 

    $fields = array(); 

    $fields{"email"} = "email"; 
    $fields{"message"} = "message"; 

    $body = "Here is what was sent:\n\n"; foreach($fields as $a => $b){ $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); } 

    $send = mail($to, $subject, $body, $headers); 

?> 

而這裏的鏈接生活形式：使用不同的jQuery版本添加 http://testtermil.pl/wordpress/kontakt/

我試着以不同的順序放置代碼，但它沒有幫助。我也檢查了我的託管服務提供商和電子郵件服務。

如果您有任何想法，請讓我知道。該表單如何發送電子郵件。 提前許多感謝， ネ

Answer 1

您必須防止submiting形式通過event.preventDefault()：

$("#contact").submit(function(e) { 
    e.preventDefault(); 
    }).validate({ 
    rules: {...}, 
    submitHandler: function(form) { 
    ... 
    } 
}); 

編輯（完整代碼）

jQuery.validator.addMethod('answercheck', function (value, element) { 
     return this.optional(element) || /^\bcat\b$/.test(value); 
}, "type the correct answer -_-"); 

// validate contact form 
jQuery(function() { 
    jQuery('#contact').submit(function(e) { 
    e.preventDefault(); 
    }).validate({ 
     rules: { 
      name: { 
       required: true, 
       minlength: 2 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      message: { 
       required: true 
      }, 
      answer: { 
       required: true, 
       answercheck: true 
      } 
     }, 
     messages: { 
      name: { 
       required: "come on, you have a name don't you?", 
       minlength: "your name must consist of at least 2 characters" 
      }, 
      email: { 
       required: "no email, no message" 
      }, 
      message: { 
       required: "um...yea, you have to write something to send this form.", 
       minlength: "thats all? really?" 
      }, 
      answer: { 
       required: "sorry, wrong answer!" 
      } 
     }, 
     submitHandler: function(form) { 
      jQuery(form).ajaxSubmit({ 
       type:"POST", 
       data: jQuery(form).serialize(), 
       url:"http://testtermil.pl/wordpress/process.php", 
       success: function() { 
        jQuery('#contact :input').attr('disabled', 'disabled'); 
        jQuery('#contact').fadeTo("slow", 0.15, function() { 
         jQuery(this).find(':input').attr('disabled', 'disabled'); 
         jQuery(this).find('label').css('cursor','default'); 
         jQuery('#success').fadeIn(); 
        }); 
       }, 
       error: function() { 
        jQuery('#contact').fadeTo("slow", 0.15, function() { 
         jQuery('#error').fadeIn(); 
        }); 
       } 
      }); 
     } 
    }); 
}); 

Answer 2

我猜的原因是，在你的HTML代碼，你已經設置了實際刷新表單的輸入類型=「提交」（這是瀏覽器的默認行爲）：

<input style="width:80px;margin-left: 315px;" id="submit" name="submit" 
type="submit" value="Send"> 

既然您想使用ajaxSubmit，請將其更改爲button並嘗試。

<input style="width:80px;margin-left: 315px;" id="submit" name="submit" 
type="button" value="Send">