Question

点击联系表单页面电子邮件没有点击提交按钮，并且在刷新页面时也来了。我想在点击提交按钮的同时在同一页面

我的HTML代码

<form action="" method="post" id="commentform">
    <fieldset>
        <p class="field"><input type="text" name="author" required value="" placeholder="Name:"/><span class="required"></span></p>
        <p class="field"><input type="text" name="email" required value="" placeholder="email:"/><span class="required"></span></p>
        <p class="field"><input type="text" name="url" required value="" placeholder="Website:"/><span class="required"></span></p>
        <p><textarea name="comment"required value="" placeholder="Your comment:"/>Your comment*</textarea><span class="required"></span></p>
        <p class="comment_submit">
            <input name="send" type="submit" class="btn btn-primary" id="submit" tabindex="5" value="Submit Comment"/>
            <input type='hidden' name='comment_post_ID' value='65' id='comment_post_ID'/>
            <input type='hidden' name='comment_parent' id='comment_parent' value='0'/>
        </p>
    </fieldset>
</form>

php代码

if(isset($_POST['Submit'])) {
    $author = $_POST["author"]; 
    $email= $_POST["email"];
    $url= $_POST["url"];
    $comment =$_POST["comment"]; 
    $message = "Name :".$author."\n"."Email :".$email."\n"."Website :".$url."\n"."Comment :".$comment;
    $subject ="Visitor Enquiry";
    $to = "name@gmail.com";

    if(mail($to, $subject,$message)) {
        echo "We Received Your enquiry, We'll get back to you soon";
    } 
    else { 
       echo "There were some errors sending enquiry, please try again";
    }
}

Answer 1

听起来您希望通过AJAX提交表单。简而言之，这意味着使用JavaScript将表单数据发送到服务器以由PHP脚本处理，而不是让浏览器处理它。

如果你正在使用jQuery，你可以使用an AJAX form plugin来轻松地升级＆＃34;使用AJAX的表单。您还可以使用jQuery的.serialize()（docs）函数将表单元素转换为可以使用jQuery的$.ajax函数发送到服务器的对象（{ {3}}）。还有一个简写函数$.post用于执行POST请求。

后者可能看起来像这样：

var $form = $('#commentform');
$form.on('submit', function (e) {
    e.preventDefault(); // Stops the browser submitting the form

    var data = $form.serialize(), // Convert form to JSON object
        postURL = $form.attr('action') // Get the URL of the form's target;

    // Submit the form via AJAX
    $.post(postURL, data, function (data) {
        // Show the response from the server at the top of the form
        $form.prepend('<p class="message">' + data + '</p>');
    });
});

您可能需要将当前页面网址添加到表单上的action属性。

您的PHP脚本需要知道已经使用了AJAX，因此它只能输出响应消息（用于AJAX请求的成功回调）。 X-HTTP-REUESTED-WITH标题可以帮助您实现这一目标：

<?php
    if(isset($_POST['Submit']))
    {
        $author = $_POST["author"];
        $email= $_POST["email"];
        $url= $_POST["url"];
        $comment =$_POST["comment"]; 
        $message = "Name :".$author."\n"."Email :".$email."\n"."Website :".$url."\n"."Comment :".$comment;
        $subject ="Visitor Enquiry";

        $to = "name@gmail.com";
        if(mail($to, $subject,$message))
        {
            echo "We Received Your enquiry, We'll get back to you soon";
        }
        else
        { 
            echo "There were some errors sending enquiry, please try again";
        }

        $via_ajax = !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';
        // If requested via AJAX, end the request now so we just send one of the above messages, not an entire HTML page. 
        if ($via_ajax)
        {
            die;
        }
    }

?>

（您会注意到我更正了一些打开/关闭的PHP标记。所有PHP代码必须 <?php ?>标记内。

进一步改进的建议

这只是操作的基础。为了创造良好的用户体验，您需要展示某种“加载”＃34;提交表单后的状态，以便在请求进入服务器并进行处理时，您的用户知道发生了什么事情（通常浏览器会通过重新加载页面并显示微调器来处理这个问题）。

您还希望以某种方式验证输入数据 - 您目前根本没有这样做。我会建议一些基本的验证，例如在电子邮件字段中要求一个值。您应该在PHP中执行此操作，此外还应在JavaScript中执行此操作，以便在将表单发送到服务器之前验证用户输入。

您可能还想在输出的消息上设置一个类，具体取决于请求是成功还是失败，以便您可以例如如果成功则将消息设置为绿色，如果失败则显示红色。

如果您在实施这些改进时遇到问题，那么jQuery文档是一个很好的起点，或者在此处查找或发布问题。

Answer 2

您的代码是否在一个页面中？你需要将它分开 - 一个页面是contact.php与表单的html，action属性设置为email.php，你有你的PHP代码发送电子邮件，并最终重定向用户到任何你想要的地方。

如果您希望在没有重新加载页面的情况下进行提交，您可以添加任何类型的javascript，但仍然需要以上内容。

如果您已经在使用jQuery，这是一个很好的教程： https://scotch.io/tutorials/submitting-ajax-forms-with-jquery

无需点击提交按钮即可进入页面或重新加载电子邮件

2 个答案: