联系表单与Javascript和AJAX无法正常工作

时间:2014-02-19 22:47:51

标签: javascript html ajax

我尝试使用Javascript和Ajax创建联系表单但是当我按下#34;发送"时,我没有收到任何电子邮件。

以下是javascript代码:

jQuery(document).ready(function(){
//  var shake = "Yes";
    var shake = "No";

/* End config */

$('#message').hide();

// Add validation parts
$('#contact input[type=text], #contact input[type=number], #contact input[type=email], #contact input[type=url], #contact input[type=tel], #contact select, #contact textarea').each(function(){
    $(this).after('<mark class="validate"></mark>');
});

// Validate as you type
$('#name, #comments, #subject').focusout(function() {
    if (!$(this).val())
        $(this).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
    else
        $(this).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
});
$('#email').focusout(function() {
    if (!$(this).val() || !isEmail($(this).val()))
        $(this).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
    else
        $(this).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
});
$('#website').focusout(function() {
    var web = $(this).val();
    if (web && web.indexOf("://") == -1) {
        //$(this).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
        $(this).val('http://' + web);
        $(this).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
    } else if (web)
        $(this).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
    else
        $(this).removeClass('error').parent().find('mark').removeClass('error').removeClass('valid');
});

$('#verify').focusout(function() {
    var verify = $(this).val();
    var verify_box = $(this);
    if (!verify)
        $(this).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
    else {

        // Test verification code via ajax
        $.ajax({
            type: 'POST',
            url: 'contact/ajax_check.php',
            data: { verify: verify },
            async: false,
            success: function( data ) {
                if (data=='success') {
                    $(verify_box).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
                } else {
                    $(verify_box).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
                }
            }
        });

    }
});

$('#submit').click(function() {
    $("#message").slideUp(200,function() {
        $('#message').hide();

        // Kick in Validation
        $('#name, #subject, #phone, #comments, #website, #verify, #email').triggerHandler("focusout");

        if ($('#contact mark.error').size()>0) {
            if(shake == "Yes") {
                $('#contact').effect('shake', { times:2 }, 75, function(){
                    $('#contact input.error:first, #contact textarea.error:first').focus();
                });
            } else $('#contact input.error:first, #contact textarea.error:first').focus();

            return false;
        }

    });
});

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

    if ($('#contact mark.error').size()>0) {
        if(shake == "Yes") {
        $('#contact').effect('shake', { times:2 }, 75);
        }
        return false;
    }

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

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

    $.post(action, $('#contactform').serialize(),
        function(data){
            $('#message').html( data );
            $('#message').slideDown();
            $('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});
            $('#contactform #submit').removeAttr('disabled');
            if(data.match('success') != null) $('#contactform').slideUp('slow');

        }
    );

    return false;

});

function isEmail(emailAddress) {

    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);

    return pattern.test(emailAddress);
}

function isNumeric(input) {
    return (input - 0) == input && input.length > 0;
}

});

这是我的HTML:

            

让我们保持联系

                                                                                        您的姓名(必填)                                                                                            电子邮件(必填)                                                                                                                              的主题                                                                                            评论(必填)

1 个答案:

答案 0 :(得分:0)

我的HTML代码:

            

让我们保持联系

                                                                                        您的姓名(必填)                                                                                            电子邮件(必填)                                                                                                                              的主题                                                                                            评论(必填)