2016-01-24 79 views
1

我正在將聯繫表單轉換爲AJAX,以便我可以執行成功功能。現在代碼停止在submitHandler部分,表示它是未定義的。我的submitHandler沒有定義?表單在嘗試使用jQuery的submitHandler時未提交

submitHandler(function(form) {

上午我以正確的方式做這個有關係嗎?我想使用我當前的php,因爲我將它構建爲jQuery驗證的後端驗證。

有沒有人看到submitHandler有什麼問題以及任何可能阻止發送的東西?

HTML

<div class="contact-container"> 
    <form id="contactform" method="post" action="" novalidate> 
     <?php 
      if($sent === true) { 
       echo "<h2 class='success'>Thanks, your message has been sent successfully</h2>"; 
      } elseif($hasError === true) { 
       echo '<ul class="errorlist">'; 
       foreach($errorArray as $key => $val) { 
        echo "<li>" . ucfirst($key) . " field error - $val</li>"; 
       } 
       echo '</ul>'; 
      } 
     ?> 
     <div> 
     <input type="text" class="contact_input" name="name" id="name" value="<?php echo (isset($name) ? $name : ""); ?>" placeholder="Name"> 
     </div> 
     <div> 
     <input type="email" class="contact_input" name="email" id="email" value="<?php echo (isset($email) ? $email : ""); ?>" placeholder="Email"> 
     </div> 
     <div> 
     <textarea name="message" class="contact_input" id="message" placeholder="Message"><?php echo (isset($message) ? $message : ""); ?></textarea> 
     </div> 
     <input type="submit" id="submit_contact" class="clear" name="submitform" value="Send"> 
    </form> 
</div> 
<div class="contact-email-success"> 
    <div class="contact-email-success-container"> 
     <div id="contact-email-success-title">THANK YOU FOR CONTACTING OUR AGENCY!</div> 
     <div id="contact-email-success-description">Your submission has been received and one of our team members will contact you shortly.</div> 
    </div> 
</div> 

jQuery的

//Send the project email 
$(document).ready(function(){ 
    $("#submit_contact").on("click", function (event) { 
     //event.preventDefault(); 

     $("#contactform").validate({ 
      rules: { 
       name: { 
        required: true, 
        minlength: 2 
       }, 
       email: { 
        required: true, 
        email: true 
       }, 
       message: { 
        required: true, 
        minlength: 5 
       } 
      }, 
      messages: { 
       name: { 
        required: "Please enter your name", 
        minlength: "Your name seems a bit short, doesn't it?" 
       }, 
       email: { 
        required: "Please enter your email address", 
        email: "Please enter a valid email address" 
       }, 
       message: { 
        required: "Please enter your message", 
        minlength: "Your message seems a bit short. Please enter at least 5 characters" 
       } 
      } 
     }); 

     submitHandler(function(form) { 

      //Variables for the form ids 
      var name = $("#name").val(); 
      var email = $("#email").val(); 
      var message = $("#message").val(); 


       $.ajax({ 
        url: "email-contact.php", 
        type: "POST", 
        data: { 
         "project_name": name, 
         "title_roll": email, 
         "project_email": message 
        }, 
        success: function (data) { 
         //console.log(data); // data object will return the response when status code is 200 
         if (data == "Error!") { 
          alert("Unable to send email!"); 
          alert(data); 
         } else { 
          $(".contact-container").addClass("removeClass"); 
          $(".contact-email-success").show(); 
          $(".announcement_success").fadeIn(); 
          $(".announcement_success").show(); 
          // $('.announcement_success').html('Email Successfully sent!'); 
          //$('.announcement_success').delay(5000).fadeOut(400); 
         } 
        }, 
        error: function (xhr, textStatus, errorThrown) { 
         alert(textStatus + "|" + errorThrown); 
         //console.log("error"); //otherwise error if status code is other than 200. 
        } 
       }); 
     }); 
    }); 
}); 

PHP

$hasError = false; 
$sent = false; 

$name  = $_POST['name']; 
$email  = $_POST['email']; 
$message = $_POST['message']; 

if(isset($_POST['submitform'])) { 
    $name = trim(htmlspecialchars($_POST['name'], ENT_QUOTES)); 
    $email = trim(htmlspecialchars($_POST['email'])); 
    $message = trim(htmlspecialchars($_POST['message'], ENT_QUOTES)); 

    $fieldsArray = array(
     'name' => $name, 
     'email' => $email, 
     'message' => $message 
    ); 

    $errorArray = array(); 

    foreach($fieldsArray as $key => $val) { 
     switch ($key) { 
      case 'name': 
      case 'message': 
      if(empty($val)) { 
       $hasError = true; 
       $errorArray[$key] = ucfirst($key) . " field was left empty."; 
      } 
      break; 
      case 'email': 
       if(!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
        $hasError = true; 
        $errorArray[$key] = "Invalid Email Address entered"; 
       } else { 
        $email = filter_var($email, FILTER_SANITIZE_EMAIL); 
       } 
       break; 
     } 
    } 

    if($hasError !== true) { 
     $to = "gsdfa"; 
     $subject = "Contact Form Submitted"; 
     $msgcontents = "Name: $name<br>Email: $email<br>Message: $message"; 
     $headers = "MIME-Version: 1.0 \r\n"; 
     $headers .= "Content-type: text/html; charset=iso-8859-1 \r\n"; 
     $headers .= "From: $name <$email> \r\n"; 
     $emailsent = mail($to, $subject, $msgcontents,$headers); 
     if($mailsent) { 
      $sent = true; 
      unset($name); 
      unset($email); 
      unset($message); 
     } 
    } 
} 
+0

是否有任何錯誤?在錯誤報告 – devpro

+0

@devpro是的,它是說我的'submitHandler(函數(窗體){'沒有定義。 – Paul

+0

你添加jQuery庫嗎? –

回答

1

您需要定義submitHandlervalidate()函數調用。但你只是想在外面執行它。這樣做 -

$("#contactform").validate({ 
     rules: {...}, 
     messages: {...}, 
     submitHandler: function(form) { 
      //Variables for the form ids 
      var name = $("#name").val(); 
      var email = $("#email").val(); 
      var message = $("#message").val(); 


      $.ajax({ 
       url: "email-contact.php", 
       type: "POST", 
       data: { 
        "project_name": name, 
        "title_roll": email, 
        "project_email": message 
       }, 
       success: function (data) { 
        //console.log(data); // data object will return the response when status code is 200 
        if (data == "Error!") { 
         alert("Unable to send email!"); 
         alert(data); 
        } else { 
         $(".contact-container").addClass("removeClass"); 
         $(".contact-email-success").show(); 
         $(".announcement_success").fadeIn(); 
         $(".announcement_success").show(); 
         // $('.announcement_success').html('Email Successfully sent!'); 
         //$('.announcement_success').delay(5000).fadeOut(400); 
        } 
       }, 
       error: function (xhr, textStatus, errorThrown) { 
        alert(textStatus + "|" + errorThrown); 
        //console.log("error"); //otherwise error if status code is other than 200. 
       } 
      }); 
     } 
}); 

請參閱submitHandler文檔中的示例。

+0

所以,我將所有的我的ajax,成功和錯誤代碼放在submitHander中? – Paul

+0

是的,只需使用與submitHandler函數中相同的代碼即可。 –

+0

它沒有顯示submithandler是一個意外的標識符 – Paul

1

使用本:

JQuery的:

$(document).ready(function(){ 
    $("#submit_contact").click(function(){ 
     event.preventDefault(); 
     var name = $("#name").val(); 
      var email = $("#email").val(); 
      var message = $("#message").val(); 


       $.ajax({ 
        url: "email-contact.php", 
        type: "POST", 
        data: { 
         "project_name": name, 
         "title_roll": email, 
         "project_email": message 
        }, 
        success: function (data) { 
         //console.log(data); // data object will return the response when status code is 200 
         if (data == "Error!") { 
          alert("Unable to send email!"); 
          alert(data); 
         } else { 
          $(".contact-container").addClass("removeClass"); 
          $(".contact-email-success").show(); 
          $(".announcement_success").fadeIn(); 
          $(".announcement_success").show(); 
          // $('.announcement_success').html('Email Successfully sent!'); 
          //$('.announcement_success').delay(5000).fadeOut(400); 
         } 
        }, 
        error: function (xhr, textStatus, errorThrown) { 
         alert(textStatus + "|" + errorThrown); 
         //console.log("error"); //otherwise error if status code is other than 200. 
        } 
       }); 
    }); 
}); 

而在你的PHP文件的變化:

$name  = $_POST['name']; 
$email  = $_POST['email']; 
$message = $_POST['message']; 

$name  = $_POST['project_name']; 
$email  = $_POST['title_roll']; 
$message = $_POST['project_email']; 

希望其幫助

+0

你在jquery代碼中有錯誤。 –

+0

yea missing「;),tnx – 2016-01-24 06:40:12

+0

我修改了這個,並保存在我的驗證中......現在不工作......但是它發送到我的php文件,但它沒有做任何事情 – Paul

相關問題