使用 PHP 发送电子邮件表单内容而不加载新页面？答案

【问题标题】：Email form content using PHP without loading a new page?使用 PHP 发送电子邮件表单内容而不加载新页面？
【发布时间】：2012-11-25 00:41:56
【问题描述】：

我正在创建一个向我发送电子邮件但不加载新页面的表单，它只是修改了同一页面上的一些 HTML 和 CSS 值。

我已经尝试实现它，它接近完成，它只是无法正常工作。单击提交后，它不会验证表单，它会加载 PHP 页面并说“谢谢...”，然后我收到一封电子邮件。如果您能帮助我理解和调试它，我将不胜感激。谢谢！

我可以确认 jQuery 已正确链接。我按以下顺序设置：

<html>
<head>
 <script> (link for jquery)
 <style>
 <script>
   validateForm() JavaScript
   jQuery
<body> (no loading functions via onload)

HTML 表单：

<form  id='form' method='post' action='sendemail.php'>
                    Name: <br />
                    <input type="text" id="name" name="name" />
                    <br /><br />
                    Email: <br />
                    <input type="email" id="email" name="email" />
                    <br /><br />
                    Subject: <br />
                    <input type="text" id="subject" name="subject" />
                    <br /><br />

                    Comments: <br />
                    <textarea id="comments" name="comments" rows="10" cols="60"></textarea>
                    <br /><br />

                    <input type="image" src="..." name="myFormSubmitted" value="Submit" />        
                </form>
                <div id="formResponse"></div>

PHP - sendmail.php：

<?php
if(isset($_POST['myFormSubmitted'])) {
    $message = '';

    // Construct the message
    $message .= <<<TEXT
        Name: {$_POST['name']}
        Email: {$_POST['email']}
    Subject: {$_POST['subject']}
    Comments: {$_POST['comments']}  
        {$checkString}
TEXT;

    $to = 'sendMeHere@example.com';
    $subject = $_POST['subject'];
    $from = $_POST['name'];
    $fromEmail = $_POST['email'];

    $header = 'From: ' . $from . '<' . $fromEmail . '>';

    // Send the email
    mail($to, $subject, $message, $header);

    echo 'Thank you for your Email. We will get in touch with you very soon.';
}
?>

jQuery:

//On form submit, call validateForm, then post to PHP if validated
            $("#form").submit(function(e) {
                if (validateForm()) {
                    $.post( 
                        'sendemail.php', 
                        {
                            name: $('#name').val(), 
                            email: $('#email').val(), 
                            comments: $('#comments').val(), 
                            myFormSubmitted: 'yes'
                        }, 
                        function(data) {
                            $("#formResponse").html(data).fadeIn('100'); //Place echo in div
                            //Modify HTML & CSS here
                            $('#name, #email, #comments').val(''); //Clear the inputs - I don't understand this line
                        }, 
                        'text'
                    );
                }

                //Prevent event from bubbling
                e.preventDefault();
                e.stopPropagation();

                return false;
            });

JavaScript 验证函数：

            $(document).ready(function() {
            function validateForm() {
                var validName = false;
                var validEmail = false;
                var validSubject = false;
                var validComments = false;

                //Perform validation here...

if (validName && validEmail && validSubject && validComments) {
return true;
} else {
return false;
}
});

【问题讨论】：

您的 jQuery 代码是否正在等待文档准备就绪？
“只是无法正常工作”是什么意思？您是否遇到任何错误（PHP 或 JS）？
在 $.post() 之后的评论中回答您嵌入的问题：JQuery 不会发送电子邮件，而是将数据与异步（ajax）http 帖子一起发送到指定的 php 脚本，该脚本应该是发送您的电子邮件...
PHP 发送邮件，jQuery 用于将数据发送给 PHP，无需重新加载页面
对不起，我没有解释为什么它不起作用。请参阅我对本杰明回复的评论。 :)

标签： php jquery ajax forms submit

【解决方案1】：

您应该将您的 javascript 包装在一个准备好的事件处理程序中，如下所示：

$(document).ready(function() {
    // Your javascript here...
});

【讨论】：

谢谢本杰明！我补充说。现在我仍然看到相同的行为，即：我单击提交，它没有验证表单，它加载了声明“谢谢...”的 PHP 页面，然后我收到了一封电子邮件。

【解决方案2】：

删除 html 表单标签上的“action='sendemail.php'”属性。

【讨论】：

不应该改变任何事情。 Jquery sumbmit() 函数运行之前

【解决方案3】：

只是一种替代解决方案。您可以在 input[type=image] 的点击事件中提交触发表单提交。我还没有检查它，但希望它有效！

$('input[type=image]').click(function(e){
           e.preventDefault();
           $('#form').submit();
 });

【讨论】：