Question

我正在尝试制作HTML联系表单。这是我的代码 “联系我们

                    <p class="success-sending-message">Thank you, your message has been sent!</p>
                    <p class="error-sending-message">There has been an error, please try again.</p>

                    <div id="contact-form">

                        <form action="" id="contactForm" class="styled" method="post">

                            <label for="contact_name">Name</label>
                            <input type="text" tabindex="3" id="contact_name" name="contact_name" value="" class="requiredField textbox" />

                            <label for="contact_email">Email</label>
                            <input type="text" tabindex="4" id="contact_email" name="contact_email" value="" class="requiredField email textbox" />

                            <label for="contact_subject">Subject</label>
                            <input type="text" tabindex="5" id="contact_subject" name="contact_subject" value="" class="requiredField textbox" />

                            <label for="contact_message">Your Message</label>
                            <div class="textarea-wrap">
                                <textarea cols="65" rows="9" tabindex="6" id="contact_message" name="contact_message" class="requiredField"></textarea>
                            </div>

                            <div class="form-section">
                                <button class="button" tabindex="7" type="submit" id="born-submit" name="born-submit">Send Message</button>
                                <input type="hidden" name="submitted" id="submitted" value="true" />
                                <span class="sending-message"><img src="css/images/loading-light.gif" /> Sending...</span>
                            </div>
                        </form>
                    </div>`

这是我的验证脚本

$(window).load(function() {

/* Ajax Contact form validation and submit */
jQuery('form#contactForm').submit(function() {
    jQuery(this).find('.error').remove();
    var hasError = false;
    jQuery(this).find('.requiredField').each(function() {
        if(jQuery.trim(jQuery(this).val()) == '') {
            if (jQuery(this).is('textarea')){
                jQuery(this).parent().addClass('input-error');
            } else {
                jQuery(this).addClass('input-error');
            }
            hasError = true;
        } else if(jQuery(this).hasClass('email')) {
            var emailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
            if(!emailReg.test(jQuery.trim(jQuery(this).val()))) {
                jQuery(this).addClass('input-error');
                hasError = true;
            }
        }
    });
    if(!hasError) {
        jQuery(this).find('#born-submit').fadeOut('normal', function() {
            jQuery(this).parent().parent().find('.sending-message').show('normal');
        });
        var formInput = jQuery(this).serialize();
        var contactForm = jQuery(this);
        jQuery.ajax({
            type: "POST",
            url: jQuery(this).attr('action'),
            data: formInput,
            success: function(data){
                contactForm.parent().fadeOut("normal", function() {
                    jQuery(this).prev().prev().show('normal'); // Show success message
                });
            },
            error: function(data){
                contactForm.parent().fadeOut("normal", function() {
                    jQuery(this).prev().show('normal');  // Show error message
                });
            }
        });
    }

    return false;

});

jQuery('.requiredField').blur(function() {
    if(jQuery.trim(jQuery(this).val()) != '' && !jQuery(this).hasClass('email')) {
        if (jQuery(this).is('textarea')){
            jQuery(this).parent().removeClass('input-error');
        } else {
            jQuery(this).removeClass('input-error');
        }
    } else {
        if (jQuery(this).is('textarea')){
            jQuery(this).parent().addClass('input-error');
        } else {
            jQuery(this).addClass('input-error');
        }
    }
});

jQuery('.email').blur(function() {
    emailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if(emailReg.test(jQuery.trim(jQuery(this).val())) && jQuery(this).val() != '') {
        jQuery(this).removeClass('input-error');
    } else {
        jQuery(this).addClass('input-error');
    } 
});

jQuery('.requiredField, .email').focus(function(){
    if (jQuery(this).is('textarea')){
        jQuery(this).parent().removeClass('input-error');
    } else {
        jQuery(this).removeClass('input-error');
    }
});

});

我的表格工作正常，填写详细信息后显示“谢谢你，你的消息已被发送！”但是这个消息在哪里，我没有任何process.php文件和所有。我希望该电子邮件应该发送到我的电子邮件ID。

Answer 1

Bonjour ...查看firebug或chrome developper工具控制台以查看帖子跟踪。在您的php文件中，您可以放置echos或var_dump以确保它没有问题。

另一件事......表单操作是空的。

Answer 2

目前还没有它的发展方向。在action=""的{{1}}属性中提供所需的位置。此外，在操作的URL中，通常是PHP文件，请提供以下代码：

<form>

此外，您需要在JavaScript AJAX调用中进行小的更正。替换这种方式：

<?php
    if (count($_POST))
    {
        $name = $_POST["contact_name"];
        $email = $_POST["contact_email"];
        $subject = $_POST["contact_subject"];
        $message = $_POST["contact_message"];
        $mail = "Name: $name\nEmail: $email\nSubject: $subject\nMessage: $message";
        if (mail("mymail@domain.com", "New Mail from Contact Form", $mail))
            die ("OK");
        else
            die ("Fail");
    }
?>

测试您的服务器是否支持通过PHP脚本的SMTP

创建一个包含此内容的小文件，例如jQuery.ajax({ type: "POST", url: jQuery(this).attr('action'), data: formInput, success: function(data){ if (data == "OK") contactForm.parent().fadeOut("normal", function() { jQuery(this).prev().prev().show('normal'); // Show success message }); else alert ("Message not sent!"); }, error: function(data){ contactForm.parent().fadeOut("normal", function() { jQuery(this).prev().show('normal'); // Show error message }); } });：

mail.php

尝试访问该文件，看看你得到了什么。请在您的问题中更新相同内容。

Ajax联系表单验证并提交

2 个答案:

测试您的服务器是否支持通过PHP脚本的SMTP