2015-10-16 150 views
1

我想讓我的聯繫表單提交使用ajax保存在WordPress數據庫中。但是,儘管出現成功消息 - 它不保存在數據庫中。在我必須修改我的腳本以進行驗證工作之前,它已經保存到數據庫中,並且只有在所有字段都正確填寫後才提交表單。使用ajax提交表單提交到WordPress數據庫

我已經在下面包含了我的代碼。

感謝您提前提供任何幫助。

<form name="message" id="message" class="contactusform" enctype="multipart/form-data" action="<?=admin_url()?>admin-post.php"> 
 

 
<?php 
 
if(isset($_SESSION["message"])) 
 
{ 
 
echo $_SESSION["message"]; 
 
unset($_SESSION["message"]); 
 
} 
 
?> 
 
    <input type="hidden" name="action" value="add_foobar"> 
 
    <input type="hidden" name="data" value="foobarid"> 
 
    <label>Full Name:</label> 
 
    <input type="text" name="name" value="" required=""> 
 
    <label>Phone Number:</label> 
 
    <input type="text" name="telno" id="telno"> 
 
    <label>Email Address:</label> 
 
    <input type="email" name="email" value="" required=""> 
 
    <label>Town:</label> 
 
    <input type="text" name="town" value="" required=""> 
 
    <label>Device:</label> 
 
    <select name="device" value="" required=""> 
 
     <option selected="selected" value=""></option> 
 
     <option value="Not Sure">Not Sure</option> 
 
     <option selected="selected" value=""></option> 
 
     <option value="iPhone 3G">iPhone 3G</option> 
 
     <option value="iPhone 3GS">iPhone 3GS</option> 
 
     <option value="iPhone 4G">iPhone 4G</option> 
 
     <option value="iPhone 4S">iPhone 4S</option> 
 
     <option value="iPhone 5">iPhone 5</option> 
 
     <option value="iPhone 5C">iPhone 5C</option> 
 
     <option value="iPhone 5S">iPhone 5S</option> 
 
     <option value="iPhone 6">iPhone 6</option> 
 
     <option value="iPhone 6 Plus">iPhone 6 Plus</option> 
 
     <option selected="selected" value=""></option> 
 
     <option value="MacBook">MacBook</option> 
 
     <option value="MacBook Pro">MacBook Pro</option> 
 
     <option value="MacBook Air">MacBook Air</option> 
 
     <option selected="selected" value=""></option> 
 
     <option value="iMac">iMac</option> 
 
     <option selected="selected" value=""></option> 
 
     <option value="iPad 1">iPad 1</option> 
 
     <option value="iPad 2">iPad 2</option> 
 
     <option value="iPad 3">iPad 3</option> 
 
     <option value="iPad 4">iPad 4</option> 
 
     <option value="iPad Air">iPad Air</option> 
 
     <option value="iPad Air 2">iPad Air 2</option> 
 
     <option value="iPad Mini 1">iPad Mini 1</option> 
 
     <option value="iPad Mini 2">iPad Mini 2</option> 
 
     <option value="iPad Mini 3">iPad Mini 3</option> 
 
     <option selected="selected" value=""></option> 
 
     <option value="iPod Classic">iPod Classic</option> 
 
     <option value="iPod Mini">iPod Mini</option> 
 
     <option value="iPod Nano">iPod Nano</option> 
 
     <option value="iPod Shuffle">iPod Shuffle</option> 
 
     <option value="iPod Touch">iPod Touch</option> 
 
    </select> 
 
    <label>Message:</label> 
 
    <textarea name="message" cols="30" rows="4" value="" required=""></textarea> 
 
    <input class="submit2" type='submit' id='submit' value='Send Message' /> 
 
</form> 
 
<div id='simple-msg'></div>

腳本

<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $('.contactusform').validate({ 
 
     rules: { 
 
      name: { 
 
       required: true 
 
      }, 
 
      telno: { 
 
       required: true, 
 
       number: true 
 
      }, 
 
      email: { 
 
       required: true, 
 
       email: true 
 
      }, 
 
      town: { 
 
       required: true 
 
      }, 
 
      device: { 
 
       required: true 
 
      }, 
 
      message: { 
 
       required: true 
 
      }, 
 
     }, 
 
     messages: { 
 
      name: { 
 
       required: "Please enter your full name." 
 
      }, 
 
      telno: { 
 
       required: "Please enter your phone number." 
 
      }, 
 
      email: { 
 
       required: "Please enter your email address." 
 
      }, 
 
      town: { 
 
       required: "Please enter your town." 
 
      }, 
 
      device: { 
 
       required: "Please select your device." 
 
      }, 
 
      message: { 
 
       required: "Please enter your message." 
 
      }, 
 

 
     }, 
 
     
 
     submitHandler: function (form) { 
 
     $("#simple-msg").html("Sending..."); 
 
     var postData = $(this).serializeArray(); 
 
     var formURL = $(this).attr("action"); 
 
     $.ajax({ 
 
       type: "POST", 
 
       url: formURL, 
 
       data: postData, 
 
       success:function(data, textStatus, jqXHR) { 
 
        $("#simple-msg").html('<p>Thanks for your request - we will be in touch soon!</p>'); 
 
       }, 
 
       error: function(jqXHR, textStatus, errorThrown) { 
 
        $("#simple-msg").html('<p>Message failed to send. Please try again!</p>'); 
 
       } 
 
      }); 
 
      
 
     } 
 
    }); 
 
}); 
 
</script>

回答

3

在線,

var postData = $(this).serializeArray(); 
var formURL = $(this).attr("action"); 

thisform代替。

這應該解決問題。