带有jQuery、Valify和AJAX的模板中的联系人表单

时间:2014-06-04 作者:Owl

我有一个页面联系人。我的模板中的联系人表单的php。我想在表单中添加jquery验证和一些奇特的ajax操作。这已经是一个简单PHP页面中的工作代码,但在wordpress中工作失败。

我的联系方式:

<form id="contact_form" method="POST" action="" enctype="application/x-www-form-urlencoded" novalidate="novalidate">
    <input type="text" name="name" maxlength="30" id="name" placeholder="Your name">
    <input type="text" name="email" maxlength="30" id="email" placeholder="Your email">
    <textarea rows="2" cols="40" name="message" id="message" placeholder="Your message"></textarea>
    <input type="text" id="phone" name="phone" size="15" placeholder="Please do not fill your phone number">
    <input type="submit" id="click" class="button" value="Submit">
    <div id="loading_icon"><img src="/wp-content/themes/owlish/img/loading.gif" alt="loading"></div>
    <div id="response"></div>
</form>
函数中的ajax函数。php

add_action(\'wp_ajax_sendmail\', \'sendmail\');
add_action(\'wp_ajax_nopriv_sendmail\', \'sendmail\');
    function sendmail() {
        if(isset($_POST[\'Submit\'])) {
            echo \'ajax success\';
        } else {
            echo "<p class=\'error\'>nothing submitted</p>";
        }
    die();
    }
和我的javascript操作:

$(document).ready(function(){
    $("#contact_form").validate({
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            },
            message: "required"
        },
        messages: {
            name: "Please enter your name",
            email: {
                required: "Please enter your email adress",
                email: "Please enter your valid email adress"
            },
            message: "Please enter a short message, what your inquiry is about"
        },
        submitHandler: function(form) {
            $(\'#loading_icon\').show();
            $(\'#click\').hide();
            var params = $(form).serialize();
            $.ajax ({
                type: \'POST\',
                url: \'<?php echo admin_url( \'admin-ajax.php\' ); ?>\',
                data: params,
                success: function(response) {
                    $(\'#response\').hide();
                    $(\'#response\').html(response);
                    $(\'#response\').fadeIn(\'slow\');
                    $(\'#loading_icon\').hide();                      
                }
            });
        }

    });
});
正确加载了所需的文件(/1.10.1/jquery.min.js,jquery.validate.js),但是,尽管我wp_ajax_nopriv_sendmail 在函数中。php。控制台不会返回任何错误。我相信我遗漏了一些wp特定的事实,但哪一个?

提前感谢

2 个回复
最合适的回答,由SO网友:Matt Royal 整理而成

WordPress正在noconflict模式下运行Jquery。(WordPress Codex Reference) 或者阅读我不久前发布的这篇简短文章。View it here.

您需要更换:

$(document).ready(function(){
使用此选项:

jQuery(document).ready(function($){
所以,大家一起试试这个:

jQuery(document).ready(function($){
    $("#contact_form").validate({
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            },
            message: "required"
        },
        messages: {
            name: "Please enter your name",
            email: {
                required: "Please enter your email adress",
                email: "Please enter your valid email adress"
            },
            message: "Please enter a short message, what your inquiry is about"
        },
        submitHandler: function(form) {
            $(\'#loading_icon\').show();
            $(\'#click\').hide();
            var params = $(form).serialize();
            $.ajax ({
                type: \'POST\',
                url: \'<?php echo admin_url( \'admin-ajax.php\' ); ?>\',
                data: params + "&action=sendmail",
                success: function(response) {
                    $(\'#response\').hide();
                    $(\'#response\').html(response);
                    $(\'#response\').fadeIn(\'slow\');
                    $(\'#loading_icon\').hide();                      
                }
            });
        }

    });
});

SO网友:Carlo Fontanos

下面的行可能没有正确读取您的操作,这就是它返回0的原因

url: \'<?php echo admin_url( \'admin-ajax.php\' ); ?>\',
data: params + "&action=sendmail",
考虑发出类似以下内容的AJAX请求:

// the value of \'action\' is the key that will be identified by the \'wp_ajax_\' hook 
var data = {
    \'action\': \'my_action\',
    \'message\': 123
};

var ajaxurl = \'<?php echo admin_url(\'admin-ajax.php\'); ?>\';
$.post(ajaxurl, data, function(response) {
    // Output the response which should be \'Hellow World\'
    alert(response);
});
然后在回拨中:

// Check if set and if the received value is 123
if (isset($_POST[\'message\']) && $_POST[\'message\'] == 123 ) {
    echo \'Hello World\';
}
// Always exit to avoid further execution
exit(); 
我在WordPress博客中找到了一个非常简单的教程,它基本上描述了实现AJAX的正确方法:Implementing AJAX in WordPress

结束

相关推荐

使用AJAX批量更新元值

单击后,我想将wp\\u查询中的posts元值更新为其他值。我基本上是在做一个通知气泡(比如stackoverflow)。wp_query 对于元值为“未读”的帖子数量,在登录用户的显示名称上显示计数气泡-工作单击通知时,隐藏气泡并仅使用ajax更改中帖子的元值wp_query 从“未读”到“已读”,这样只有当有一篇新帖子的元值为“未读”时,计数才可见——如何</显示所有具有元值“read”的最新帖子的下拉列表-可能是另一个查询</这是我的计数泡泡代码。add_shortcode(\'noti