Question

我正在尝试使用ajax将我的联系表单提交保存到WordPress数据库中。但是，虽然会显示成功消息 - 但它不会保存在数据库中。在我必须修改我的脚本以使验证工作之前保存到数据库，并且只在正确填写所有字段时才提交表单。

我在下面提供了我的代码。

提前感谢您的帮助。

表格

＆＃13;

<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>

＆＃13;

脚本

＆＃13;

<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>

＆＃13;

Answer 1

在行中，

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

this应替换为form。

这应该解决问题。

使用ajax将表单提交提交到WordPress数据库

1 个答案: