0

jQuery ポップアップ ボックスに表示されるお問い合わせフォームを作成しています。送信をクリックすると、AJAX と PHP スクリプトを使用してメールが送信されます。私の問題は、うまくいかないことです。先に進み、通常どおりフォームを送信し、電子メールは送信されません。.ajax 関数では、success 関数も error 関数も呼び出されません。これが私のコードです：

これをクリックするとポップアップが開きます: (この部分は動作します)

<a href="mailto:info@visionprintmedia.com" class="email">info@visionprintmedia.com</a>

jQuery スクリプト:

$(function() {
    $('a.email').click(function(event) {
        event.preventDefault();
        $('body').append('<div id="popupshadow"></div><div id="popup"></div>');
        $('#popupshadow').css({opacity:0}).animate({opacity:0.7},1000);
        $('#popup').css({opacity:0}).delay(1200).animate({opacity:1},800);
        $('#popup').html('<form class="contact" action="#" method="none"><table class="contact"><tr><td class="input-name">Name:</td><td><input type="text" name="name" size="25" /></td></tr><tr><td class="input-email">Email:</td><td><input type="email" name="email" size="25" /></td></tr><tr><td class="input-phone">Phone:</td><td><input type="phone" name="phone" size="25" /></td></tr><tr><td class="input-message">Message:</td><td><textarea name="message" cols="20" rows="5"></textarea></td></tr><tr><td></td><td><input type="submit" value="Send" /></td></tr></table><input type="hidden" name="to" value="' + $(this).attr('href').slice(7) + '"/></form><a href="mailto:' + $(this).attr('href').slice(7) + '" class="cancel">Send using your own mail program.</a>');
        $('form.contact').submit(function(event) {
            $('form.contact td').css('color','#000000');

            var name = $('form.contact input[name="name"]').val();
            var email = $('form.contact input[name="email"]').val();
            var phone = $('form.contact input[name="phone"]').val();
            var message = $('form.contact textarea[name="message"]').val();

            var valid = true;
            if(name == "") {
                valid = false;
                $('td.input-name').css('color','#FF0000');
            }
            if(email == "" && phone == "")
                valid = false;
            if(email == "")
                $('td.input-email').css('color','#FF0000');
            if(phone == "")
                $('td.input-phone').css('color','#FF0000');
            if(message == "") {
                valid = false;
                $('td.input-message').css('color','#FF0000');
            }

            if(valid) {
                $.ajax({url : 'http://nickentin.com/design/projects/visionprintmedia/js/contact.php',
                        data : {name : name,
                                email : email,
                                phone : phone,
                                message : message,
                                to : to},
                        type : 'post',
                        success : function(data) {
                            alert("SUCCESS");
                            $('#popup').html('<p style="text-align:center;">Your message has been sent.</p>');
                        },
                        error : function(data) {
                            alert("ERROR");
                        }
                });
            }
            event.preventDefault();
            return false;
        });
        $('#popupshadow, a.cancel').click(function(event) {
            $('#popup, #popupshadow').animate({opacity:0},500).delay(500).queue(function() { $(this).remove(); });
        });
    });
});

PHP スクリプト:

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];

    $to = $_POST['to'];
    $subject = 'Contact Form - http://visionprintmedia.com';

    $message = '<style type="text/css">
                    #wrap {
                        width:400px;
                        margin:30px auto;
                        border:1px #000000 solid;
                    }
                    header {
                        width:100%;
                        height:50px;
                        display:block;
                    }
                    header h1 {
                        font-size:18px;
                        margin:0px;
                        padding-left:5px;
                        padding-top:15px;
                    }
                    table {
                        width:100%;
                    }
                    table td {
                        vertical-align:text-top;
                    }
                    table td:first-child {
                        width:75px;
                    }
                    a {
                        color:#333333;
                        text-decoration:none;
                    }
                    a:hover {
                        text-decoration:underline;
                    }
                </style>
                <div id="wrap">
                    <header>
                        <h1>Contact Form - http://visionprintmedia.com</h1>
                    </header>
                    <table>
                        <tr><td>Name:</td><td>'.$name.'</td></tr>
                        <tr><td>Email:</td><td>'.$email.'</td></tr>
                        <tr><td>Phone:</td><td>'.$phone.'</td></tr>
                        <tr><td>Message:</td><td>'.$message.'</td></tr>
                    </table>
                    <footer>
                        This message was sent to '.$to.' as part of an automated contact form.  If you do not believe that you should have received this email, please forward this message to design@nickentin.com and we will resolve the issue.
                    </footer>
                </div>';

    $headers = 'From: noreply@visionprintmedia.com' . "\r\n" .
               'Reply-To: ' . $email . "\r\n" .
               'MIME-Version: 1.0' . "\r\n" .
               'Content-type: text/html; charset=iso-8859-1' . "\r\n" .
               'X-Mailer: PHP/' . phpversion();

    //mail($to,$subject,$message,$headers);
    mail('design@nickentin.com',$subject,$message,$headers); // FOR TESTING ONLY
?>

http://nickentin.com/design/projects/visionprintmedia/contact.htmlにライブ バージョンがあります。いずれかのメール リンクをクリックするだけです。ありがとう。

4

2 に答える 2

2

ここでいくつか変更する必要があります。

<form class="contact" action="#" method="none">

次のように置き換えます。

<form class="contact" action="" method="post" onsubmit="return false;">

これは、通常のフォームとして送信されないフォームのHTMLです。次に、AJAX 関数が確実に呼び出されるようにするには、次を追加する必要があります。

<form class="contact" action="" method="post" onsubmit="return postAjax(this);">

また、JavaScript 関数 postAjax(form)は次のように定義する必要があります。

function postAjax(form)
{
     var post = form.serialize();
     // Send the `post` to the server using your AJAX function.
}

PHP Scriptで、次のようにします。

if(mail(...))
    die("OK");
else
    die("Error! Unable to send mail!");

JavaScript では、その PHP コードに対して、AJAX Receive 関数内でこれを使用します。

if(response == "OK")
    alert("Mail Sent");
else
    alert(response);

これがお役に立てば幸いです！：） ではごきげんよう！:)

于 2012-06-19T08:24:01.273 に答える
1

ポストのフォームのすべてのフィールドを取得します。しかし、あなたがデータで言及した「to」の値は何ですか。あなたはphpスクリプトでそれを使用しました。フォームに何らかの値を指定するか、php スクリプトでこの「$to = $_POST['to'];」を削除してみてください。

于 2012-06-19T08:23:32.753 に答える