使用feedbackbox.js的反馈表单

Question

我正在尝试使用'feedbackbox.js'创建反馈表单，并使用mail.php函数传递发送邮件的凭据。但是同样不起作用。请在我出错的地方提出建议。

; (function ($) {
$.fn.extend({
    feedBackBox: function (options) {

        // default options
        this.defaultOptions = {
            title: 'Enquiry',
            titleMessage: 'Please feel free to leave us feedback.',
            userName: '',
            isUsernameEnabled: true,
            message: '',
            ajaxUrl: 'http://www.example.com/mail.php',
            successMessage: 'Thank your for your feedback.',
            errorMessage: 'Something went wrong!'
        };

        var settings = $.extend(true, {}, this.defaultOptions, options);

        return this.each(function () {
            var $this = $(this);
            var thisSettings = $.extend({}, settings);

            var diableUsername;
            if (!thisSettings.isUsernameEnabled) {
                diableUsername = 'disabled="disabled"';
            }

            // add feedback box
            $this.html('<div id="fpi_feedback"><div id="fpi_title" class="rotate"><h2>'
                + thisSettings.title
                + '</h2></div><div id="fpi_content"><div id="fpi_header_message">'
                + thisSettings.titleMessage
                + '</div><form><div id="fpi_submit_username"><label for="username">Name</label><input type="text" name="username" class="nm" value="Name" '
                + diableUsername
                + ' value="'
                   + thisSettings.titleMessage
               + '</div><form><div id="fpi_submit_username"><label for="username">Email</label><input type="text" name="username" class="nm" value="Email" '
                + diableUsername
                + ' value="'
                   + thisSettings.titleMessage
               + '</div><form><div id="fpi_submit_username"><label for="username">Phone</label><input type="text" name="username" class="nm" value="Phone" '
                + diableUsername
                + ' value="'
                + thisSettings.userName
                + '"></div><div id="fpi_submit_message"><label for="message">Message</label><textarea name="message" placeholder="Messege" class="nm"></textarea></div>'
                + '<div id="fpi_submit_loading"></div><div id="fpi_submit_submit"><input type="submit" value="Submit">'
                + '</div></form><div id="fpi_ajax_message"><h2></h2></div></div></div>');

            // remove error indication on text change
            $('#fpi_submit_username input').change(function () {
                if ($(this).val() != '') {
                    $(this).removeClass('error');
                }
            });
            $('#fpi_submit_message textarea').change(function () {
                if ($(this).val() != '') {
                    $(this).removeClass('error');
                }
            });

            // submit action
            $this.find('form').submit(function () {

                // validate input fields
                var haveErrors = false;
                if ($('#fpi_submit_username input').val() == '' && typeof diableUsername == 'undefined') {
                    haveErrors = true;
                    $('#fpi_submit_username input').addClass('error');
                }
                if ($('#fpi_submit_message textarea').val() == '') {
                    haveErrors = true;
                    $('#fpi_submit_message textarea').addClass('error');
                } 

                // send ajax call
                if (!haveErrors) {
                    // serialize all input fields
                    var disabled = $(this).find(':input:disabled').removeAttr('disabled');
                    var serialized = $(this).serialize();
                    disabled.attr('disabled', 'disabled');

                    // disable submit button
                    $('#fpi_submit_submit input').attr('disabled', 'disabled');

                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        url: thisSettings.ajaxUrl,
                        data: serialized,
                        beforeSend: function () {
                            $('#fpi_submit_loading').show();
                        },
                        error: function (data) {
                            $('#fpi_content form').hide();
                            $('#fpi_content #fpi_ajax_message h2').html(thisSettings.errorMessage);
                        },
                        success: function () {
                            $('#fpi_content form').hide();
                            $('#fpi_content #fpi_ajax_message h2').html(thisSettings.successMessage);
                        }
                    });
                }

                return false;
            });

            // open and close animation
            var isOpen = false;
            $('#fpi_title').click(function () {
                if (isOpen) {
                    $('#fpi_feedback').animate({ "width": "+=5px" }, "fast")
                    .animate({ "width": "55px" }, "slow")
                    .animate({ "width": "60px" }, "fast");
                    isOpen = !isOpen;
                } else {
                    $('#fpi_feedback').animate({ "width": "-=5px" }, "fast")
                    .animate({ "width": "365px" }, "slow")
                    .animate({ "width": "360px" }, "fast");

                    // reset properties
                    $('#fpi_submit_loading').hide();
                    $('#fpi_content form').show()
                    $('#fpi_content form .error').removeClass("error");
                    $('#fpi_submit_submit input').removeAttr('disabled');
                    isOpen = !isOpen;
                }
            });

        });
    }
});

}）（jQuery的）;

Answer 1

删除`dataType：＆＃39; json＆＃39;，`它会期待一个json响应。

或使您的PHP文件返回json响应

(function ($) {
$.fn.extend({
    feedBackBox: function (options) {

        // default options
        this.defaultOptions = {
            title: 'Enquiry',
            titleMessage: 'Please feel free to leave us feedback.',
            userName: '',
            isUsernameEnabled: true,
            message: '',
            ajaxUrl: 'http://www.example.com/mail.php',
            successMessage: 'Thank your for your feedback.',
            errorMessage: 'Something went wrong!'
        };

        var settings = $.extend(true, {}, this.defaultOptions, options);

        return this.each(function () {
            var $this = $(this);
            var thisSettings = $.extend({}, settings);

            var diableUsername;
            if (!thisSettings.isUsernameEnabled) {
                diableUsername = 'disabled="disabled"';
            }

            // add feedback box
            $this.html('<div id="fpi_feedback"><div id="fpi_title" class="rotate"><h2>'
                + thisSettings.title
                + '</h2></div><div id="fpi_content"><div id="fpi_header_message">'
                + thisSettings.titleMessage
                + '</div><form><div id="fpi_submit_username"><label for="username">Name</label><input type="text" name="username" class="nm" value="Name" '
                + diableUsername
                + ' value="'
                   + thisSettings.titleMessage
               + '</div><form><div id="fpi_submit_username"><label for="username">Email</label><input type="text" name="username" class="nm" value="Email" '
                + diableUsername
                + ' value="'
                   + thisSettings.titleMessage
               + '</div><form><div id="fpi_submit_username"><label for="username">Phone</label><input type="text" name="username" class="nm" value="Phone" '
                + diableUsername
                + ' value="'
                + thisSettings.userName
                + '"></div><div id="fpi_submit_message"><label for="message">Message</label><textarea name="message" placeholder="Messege" class="nm"></textarea></div>'
                + '<div id="fpi_submit_loading"></div><div id="fpi_submit_submit"><input type="submit" value="Submit">'
                + '</div></form><div id="fpi_ajax_message"><h2></h2></div></div></div>');

            // remove error indication on text change
            $('#fpi_submit_username input').change(function () {
                if ($(this).val() != '') {
                    $(this).removeClass('error');
                }
            });
            $('#fpi_submit_message textarea').change(function () {
                if ($(this).val() != '') {
                    $(this).removeClass('error');
                }
            });

            // submit action
            $this.find('form').submit(function () {

                // validate input fields
                var haveErrors = false;
                if ($('#fpi_submit_username input').val() == '' && typeof diableUsername == 'undefined') {
                    haveErrors = true;
                    $('#fpi_submit_username input').addClass('error');
                }
                if ($('#fpi_submit_message textarea').val() == '') {
                    haveErrors = true;
                    $('#fpi_submit_message textarea').addClass('error');
                } 

                // send ajax call
                if (!haveErrors) {
                    // serialize all input fields
                    var disabled = $(this).find(':input:disabled').removeAttr('disabled');
                    var serialized = $(this).serialize();
                    disabled.attr('disabled', 'disabled');

                    // disable submit button
                    $('#fpi_submit_submit input').attr('disabled', 'disabled');

                    $.ajax({
                        type: 'POST',                    
                        url: thisSettings.ajaxUrl,
                        data: serialized,
                        beforeSend: function () {
                            $('#fpi_submit_loading').show();
                        },
                        error: function (data) {
                            $('#fpi_content form').hide();
                            $('#fpi_content #fpi_ajax_message h2').html(thisSettings.errorMessage);
                        },
                        success: function () {
                            $('#fpi_content form').hide();
                            $('#fpi_content #fpi_ajax_message h2').html(thisSettings.successMessage);
                        }
                    });
                }

                return false;
            });

            // open and close animation
            var isOpen = false;
            $('#fpi_title').click(function () {
                if (isOpen) {
                    $('#fpi_feedback').animate({ "width": "+=5px" }, "fast")
                    .animate({ "width": "55px" }, "slow")
                    .animate({ "width": "60px" }, "fast");
                    isOpen = !isOpen;
                } else {
                    $('#fpi_feedback').animate({ "width": "-=5px" }, "fast")
                    .animate({ "width": "365px" }, "slow")
                    .animate({ "width": "360px" }, "fast");

                    // reset properties
                    $('#fpi_submit_loading').hide();
                    $('#fpi_content form').show()
                    $('#fpi_content form .error').removeClass("error");
                    $('#fpi_submit_submit input').removeAttr('disabled');
                    isOpen = !isOpen;
                }
            });

        });
    }
});