0

我想创建一个向我发送电子邮件的表单，但也不加载新页面，而是简单地修改同一页面上的一些 CSS 值。

我一直在搜索这个网站并且一直在玩一些代码。我尝试通过 JavaScript（验证）、PHP（处理和格式化电子邮件）和 jQuery（发送电子邮件和修改 CSS）来做到这一点，但它并不完全正确。我对这些语言还很陌生，所以有点困难。

目前，它通过 JavaScript 正确验证表单，并且除非验证，否则不会提交。完美的。它还发送电子邮件，这很棒！问题是它加载我的 PHP 页面而不是停留在当前页面上。回声“谢谢...”通过 jQuery 放置在 PHP 页面上，而不是放在我的 HTML 中的 div 中。此外，我对 PHP 和 jQuery 代码感到困惑。PHP 当前发送电子邮件，但 jQuery 应该这样做。但是如果我从 PHP 中删除它，它就不会发送电子邮件。

如果你能帮我把所有这些碎片放在一起，我一定会很感激的！

HTML 表单： 

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

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

                    <input type="image" src="..." alt="Submit" name="myFormSubmitted" value="Submit" />        
                </form>
                <div id="formResponse" style="display: none;"></div>

JavaScript（验证）：

<script type="text/javascript">
            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;
}

PHP sendemail.php（处理表单，格式化电子邮件）：

<?php
if(isset($_POST['myFormSubmitted'])) {
//Construct format here.....
// Blank message to start with so we can append to it.
    $message = '';

    // Construct the message
    $message .= <<<TEXT
        Name: {$_POST['name']}
        Email: {$_POST['email']}
        Subject: {$_POST['subject']}
        Comments: {$_POST['comments']}  
        {$checkString}
TEXT;
$to = 'sendToThisEmail@example.com';
$subject = $_POST['subject'];
$from = $_POST['name'];
$fromEmail = $_POST['email'];

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

    //Send the email - shouldn't be here!
    mail($to, $subject, $message, $header);

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

jQuery（发送电子邮件，修改 CSS）：

$("#form").submit(function() {
    $.post('sendemail.php', {name: $('#name').val(), email: $('#email').val(), comments: $('#comments').val(), myFormSubmitted: 'yes'}, function(data) { //I don't understand this line
        $("#formResponse").html(data).fadeIn('100'); //Place echo in original page
        //Add more CSS changes here...
        $('#name, #email, #comments').val(''); // Clear the inputs - what does this do?
    }, 'text');
    return false;
});
            }
4

7 回答 7

2

为了防止表单实际发布并将您带到 PHP 页面，您需要preventDefault()在 jQuerysubmit()函数中执行如下操作：

$("#form").submit(function(event) {
    event.preventDefault();
    if (validateForm) {
        $.post(
            'sendemail.php',
            {
                name: $('#name').val(),
                email: $('#email').val(),
                comments: $('#comments').val(),
                myFormSubmitted: 'yes'
            },
            function(data) { //I don't understand this line
                $("#formResponse").html(data).fadeIn('100'); //Place echo in original page
                //Add more CSS changes here...
                $('#name, #email, #comments').val(''); // Clear the inputs - what does this do?
            },
            'text'
         );
     } else {
         // form is not validated, perhaps do something to notify user here
     }
}

注意我还使用这个 onsubmit 函数添加了表单验证。这将允许您从<form>元素中删除 onsubmit 属性。

这应该允许其他一切工作。

于 2012-12-06T20:09:28.353 回答
1

您的表单被提交是因为您有一个onsubmit调用validateForm(). 如果一切都有效，validateForm() 将返回 true。您应该删除该属性并在 jQuery submitEventHandler 中调用该函数并防止事件冒泡。

$("#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');
                $('#name, #email, #comments').val(''); /* Clear the inputs */
            }, 
            'text'
        );
    }

    // LINES ADDED
    e.preventDefault();
    e.stopPropagation();

    return false;
});
于 2012-12-06T20:07:26.960 回答
0

代替带有提交的表单，绑定您的“提交”按钮以向您的 PHP 发送 Ajax 调用。你的 PHP 会做它需要做的事情，并将控制权和任何数据返回给你的 javascript，它可以采取任何额外的行动来响应这些数据。

谷歌“阿贾克斯”。这是完成所有这些工作的关键。

于 2012-12-06T20:06:37.110 回答
0

我刚刚在另一个论坛上找到了这个问题的答案：

它不涉及JS。

    <?php
    if (isset($_POST['submit'])) {
        print "<div class=\"h1span\">Thank you!</div>\n";
    }
    ?>
于 2015-02-06T10:04:40.267 回答
0

您需要对 php 脚本进行异步 ajax 调用。有关具体细节，请参阅http://api.jquery.com/jQuery.ajax/，但这里是您可以使用的片段（当然有一些修改）

$.ajax({
    url: "sendemail.php",
    type: 'post',
    success: function() {
        $(this).addClass("someclass");
    }
});
于 2012-12-06T20:10:57.950 回答
0

将各个部分连接在一起：

将 jQuery 库添加到头部，在使用它的脚本之前，如<script src="...">

将jQuery部件作为脚本添加到文档中的某处。这<head>是最好的地方。将代码保存在外部文档中也有帮助。

如果脚本包含在表单之前，请将代码包装在$(document).ready(function(){...}). 如果不是，那么您无论如何都可以这样做以防止将来出现错误。

将Javascript部件添加为脚本，最有可能添加到与部件相同的script标签中jQuery。

从表单中删除onsubmit属性，因为现在submit处理程序将调用validateForm.

this在提交处理程序中是指正在提交的表单。你可以利用它来发挥你的优势。

于 2012-12-06T20:18:03.600 回答
0

这不能以这种方式完成：

如果您创建一个表单，提交将仅提交到服务器，如果它已提交。这将重新加载您的页面。

一种解决方案是将表单提交到命名的 iframe 中。

<iframe height="1px" width="1px" name="hiddenSubmit" src="" />
<form id='form' method='post' onsubmit="return validateForm()" action='sendemail.php' target='hiddenSubmit'>[...]
于 2012-12-06T20:35:09.703 回答