2015-10-16 109 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代替。

这应该解决问题。