PHP联系表单有效,但无法正确配置AJAX

时间:2012-09-20 23:23:10

标签: php ajax jquery contact-form

我一直使用此代码将电子邮件从网站的联系表单发送到指定的电子邮件地址:

<?php
$contact_name = $_POST['name'];
$contact_email = $_POST['email'];
$contact_subject = $_POST['subject'];
$contact_message = $_POST['message'];

if( $contact_name == true )
{
    $sender = $contact_email;
    $receiver = "siteadminaddress@myaddress.com";
    $client_ip = $_SERVER['REMOTE_ADDR'];
    $email_body = "Nome: $contact_name \nEmail: $sender \n\nOggetto: $contact_subject \n\nMessaggio: \n\n$contact_message \n\nIP: $client_ip \n\n Contact Form Of Website MyWebsite";       
    $extra = "From: $sender\r\n" . "Reply-To: $sender \r\n" . "X-Mailer: PHP/" . phpversion();

    if( mail( $receiver, "My Site Name - $contact_subject", $email_body, $extra ) ) 
    {
        echo "success=yes";
    }
    else
    {
        echo "success=no";
    }
}
?>

现在我必须使用一个使用文件jquery.jigowatt.js处理联系表单消息的模板,我必须以与php相同的方式配置它,但我不知道这样。< / p>

文件jquery.jigowatt.js

jQuery(document).ready(function(){


    $('#contactform').submit(function(){

        var action = $(this).attr('action');

        $('#submit').attr('disabled','disabled').after('<img src="contact-form/assets/ajax-loader.gif" class="loader" />');

        $("#message").slideUp(750,function() {
        $('#message').hide();

        $.post(action, {
            name: $('#name').val(),
            email: $('#email').val(),
            phone: $('#phone').val(),
            comments: $('#comments').val(),
            verify: $('#verify').val()
        },
            function(data){
                document.getElementById('message').innerHTML = data;
                $('#message').slideDown('slow');
                $('#contactform img.loader').fadeOut('fast',function(){$(this).remove()});
                $('#submit').removeAttr('disabled');
                if(data.match('success') != null) $('#contactform').slideUp('slow');

                // 2 functions added by Themes
                if(data.match('success') != null) $("html,body").animate({
                    scrollTop: $("#message").offset().top
                    }, 1000, function(){
                        //scroll complete function
                    });
                if(data.match('success') == null) $("html,body").animate({
                    scrollTop: $("#message").offset().top
                    }, 1000, function(){
                        //scroll complete function
                    });



            }
        );

        });

        return false;

    });

});

2 个答案:

答案 0 :(得分:0)

您可以保留您的php文件,并通过jquery.jigowatt.js中的Ajax将数据发送给它。我没有测试这个,但它应该给你的想法。您只需要在url:AJAX提交的一部分中添加php文件的路径。

jQuery(document).ready(function(){
    $('#contactform').submit(function(){
    var action = $(this).attr('action');
    $('#submit').attr('disabled','disabled').after('<img src="contact-form/assets/ajax-loader.gif" class="loader" />');
    $("#message").slideUp(750,function() {
    $('#message').hide();      
    $.ajax({
        type:"POST",
        url: "yourPhpFileURL.php",   //put the url of your php file here
        data: $('#contactform').serialize(),
        success: function(data){
            document.getElementById('message').innerHTML = data;
            $('#message').slideDown('slow');
            $('#contactform img.loader').fadeOut('fast',function(){$(this).remove()});
            $('#submit').removeAttr('disabled');
            if(data.match('success') != null) $('#contactform').slideUp('slow');

            // 2 functions added by TrueThemes
            if(data.match('success') != null) $("html,body").animate({
                scrollTop: $("#message").offset().top
                }, 1000, function(){
                    //scroll complete function
                });
            if(data.match('success') == null) $("html,body").animate({
                scrollTop: $("#message").offset().top
                }, 1000, function(){
                    //scroll complete function
                });                     
        }
        });

    });

    return false;

});

});

答案 1 :(得分:0)

您可以使用jQuery Ajax表单插件:

http://www.malsup.com/jquery/form/

$('#myForm').ajaxForm(function() { 
    alert("Thank you for your comment!"); 
}); 

它可以为你节省很多工作。