如何在Wordpress中使用我的AJAX電子郵件

Question

下午好，

我有一個非常令人沮喪的問題。 我目前正在嘗試使用AJAX功能從我的Wordpress網站的聯系表單中發送電子郵件。 它只會在沒有填寫任何字段時發送電子郵件，但從我嘗試在表單字段中提交數據的那一刻起，電子郵件就不會發送。

另外，由於某些原因，當我從Wordpress環境外部運行它時，它似乎工作，但從我將它包含在wordpress模板文件中的那一刻起，問題就開始發生了。

這是我的代碼如下。 原諒目前沒有任何錯誤或垃圾郵件處理的事實：

這是Javascript：

        $(document).ready(function(){
        $('#emailform').submit(function(){

            window.open('','',"width=500,height=150").document.write("Thank you for contacting us, we will reply you shortly. Thank you!");

            // getting all the stuff from the form
            var form = $(this),
            formData = form.serialize(),
            formUrl = form.attr('action'),
            formMethod = form.attr('method'),
            emailresponse = $('#emailresponse');

            // loading stuff
            emailresponse.fadeOut(200, function(){
                $(this).text("Message sent")
                .fadeIn(200)
            });


            // sending stuff to the server
            $.ajax({
                url: formUrl,
                type: formMethod,
                data: formData,
                success:function(data) {
                    //stuff to do when the ajax call is successful and complete

                    var responseData = $.parseJSON(data),
                        klass = '';

                    emailresponse.fadeOut(200, function(){
                        $(this).text(responseData.message)
                        .fadeIn(200);
                    });

                }
            })


            return false;
        })
    })

這是PHP

    if (isset($_GET['action'])) {

    if($_GET['action'] == 'email') {
        $name = $_POST['name'];
        $email = mysql_real_escape_string($_POST['email']);
        $message = $_POST['message'];

        $m1 = "Name of customer: " . $name . "\n";
        $m2 = "Customer's Email: " . $email . "\n";
        $m3 = "Message: " . $message;
        $emailmessage = $m1 . $m2 . $m3;

        mail('seedorf@me.com', 'Message from LUNASKYMODA.CO.UK contact page', $emailmessage);

        $data = array(  
                'status' => $status,  
                'message' => $message  
            );

        echo json_encode($data);

    exit;
    }
}

有問題的網頁是http://lunaskymoda.co.uk/contact-us/

Ps，如果它說“發送消息”並不一定意味着它發送..仍然在努力。

Answer 1

好的，你有很多不同的東西在繼續。 首先，這是jQuery代碼（一個javascript庫），你的代碼在整個地方缺少分號。 嘗試這個：

$(document).ready(function(){
        $('#emailform').submit(function(){

            window.open('','',"width=500,height=150").document.write("Thank you for contacting us, we will reply you shortly. Thank you!");

            // getting all the stuff from the form
            var form = $(this);
            formData = form.serialize();
            formUrl = form.attr('action');
            formMethod = form.attr('method');
            emailresponse = $('#emailresponse');

            // loading stuff
            emailresponse.fadeOut(200, function(){
                $(this).text("Message sent")
                .fadeIn(200);
            });


            // sending stuff to the server
            $.ajax({
                url: formUrl,
                type: formMethod,
                data: formData,
                success:function(data) {
                    //stuff to do when the ajax call is successful and complete

                    var responseData = $.parseJSON(data);
                    // klass = ''; <--what is this? you don't define 'klass' anywhere

                    emailresponse.fadeOut(200, function(){
                        $(this).text(responseData.message)
                        .fadeIn(200);
                    });

                }
            });


            return false;
        });
    });

其次，只要我拉起你的網站，我就會在控制台中收到此錯誤：

Uncaught TypeError: Object [object Object] has no method 'livequery' wp-e-commerce.js:273

因此，在您提交腳本之前，您的網站會出現javascript錯誤。 嘗試清除所有錯誤，因為如果鏈中存在更高的錯誤，javascript有一種破解方式並且根本不起作用。

第三，當我提交表單時，我收到此錯誤：

POST http://lunaskymoda.co.uk/contact-us/?action=email 404 (Not Found)

這可能是a）因為你的JS從第二個錯誤或b）中斷了，因為當你使用jQuery來處理表單時你仍然有html表單動作。 所以：

第四，從這個改變你的表格標簽：

<form id="emailform" action="?action=email" method="post" accept-charset="utf-8" novalidate="novalidate">

以下內容：

<form id="emailform">

所有這一切都應該讓你走上正軌。 當您在控制台中查找錯誤時，JS的故障排除變得更加容易。 在chrome中右鍵單擊任意位置並單擊“inspect element”，然后單擊“console”。 在FireFox中下載'firebug'添加。 沒有控制台的JS故障排除就像在黑暗中工作。

Answer 2

似乎您的聯系表單的操作參數未正確放置。

檢查這個參考：

http://www.wp-themix.org/wordpress/how-to-add-a-jquery-ajax-contact-form-to-wordpress/