Question

我已经设置了一个PHP脚本来从HTML表单中收集“ POST”数据，并将包含所收集数据的电子邮件发送到特定帐户（简单的联系表单）。

我已经创建了PHP脚本，当使用表单中的“提交”按钮提交数据时，该脚本可以正常工作，但是希望这将我带到一个新页面（PHP脚本的输出）。

我希望能够将其保留在一页上，一旦正确发送数据，可能会显示一条消息。我知道我需要为此使用AJAX，因此我尝试实现jQuery AJAX方法的尝试很少。

提交表单时，页面会加载很长时间，然后在刷新之前在控制台中快速闪烁一条错误消息（我无法捕获此错误消息进行调试）。我错过了JavaScript中的某些东西吗？任何帮助将不胜感激。

我的JS代码如下：


var submitBtn = $('#submit-form');

submitBtn.click(function(){
    let email = $('#email'), 
    forename = $('#forename'), 
    surname = $('#surname'), 
    subject = $('#subject'), 
    message = $('#message');
    // Send data to PHP script
    $.ajax({
        url: "submit_form.php",
        method: 'POST',
        data: {email: email, forename: forename, surname: surname, subject: subject, message: message}
    });
});

我的PHP脚本：


    $from_add = ; // Removed for security
    $to_add = ; // Removed for security
    $user_email = $_POST['email'];

    $subject = $_POST['subject'];
    $message = "You have received a message from {$_POST['forename']} {$_POST['surname']}:\n{$_POST['message']}";

    $headers = "From: $from_add \r\n";
    $headers .= "Reply-To: $user_email \r\n";
    $headers .= "Return-Path: $from_add\r\n";
    $headers .= "X-Mailer: PHP \r\n";


    if(mail($to_add,$subject,$message,$headers)) 
    {
        echo "Email Sent";
    } 
    else 
    {
       echo "Error sending email!";
    }

我的HTML表单：


<form id="contact-form" class="contact-form">
            <p class="field-label">First Name:</p>
            <input class="input-field" type="text" id="forename" name="forename" placeholder="Please Enter Your First Name..." required>
            <p class="field-label">Last Name:</p>
            <input class="input-field" type="text" id="surname" name="surname" placeholder="Please Enter Your Last Name..." required>
            <p class="field-label">Phone Number (Optional):</p>
            <input class="input-field" type="text" id="phone" name="phone" placeholder="Please Enter Your Phone Number...">
            <p class="field-label">Email Address:</p>
            <input class="input-field" type="text" id="email" name="email" placeholder="Please Enter Your Email Address..." required>
            <p class="field-label">Message Subject:</p>
            <input class="input-field" type="text" id="subject" name="subject" placeholder="Message Subject" required>
            <p class="field-label">Your Message:</p>
            <textarea class="input-field" id="text-area" id="message" name="message" placeholder="Start typing your message here..." required></textarea>
            <button id="submit-form" type="submit">Send Message</button>
        </form>

Answer 1

您误认为价值：

let email = $('#email');
// email will be jQuery instance of DOM element #email

将返回值：

// Get the value from an element directly
$( "select#foo" ).val();

也可以将按钮类型替换为“按钮”，以防止提交：

<button id="submit-form" type="button">Send Message</button>

Answer 2

您正在传递输入元素本身而不是它们的值！要获得其价值，您需要致电.val()。此外，您还需要提供一个回调函数来处理响应。请看一下这段代码：

$('#submit-form').on("click", function(e){
    e.preventDefault();
    var data = {
        email: $('#email').val(),
        forename: $('#forename').val(),
        surname: $('#surname').val(),
        subject: $('#subject').val(),
        message: $('#message').val()
    }

    // Send data to PHP script
    $.post("submit_form.php", data, function(res) {
        // $("#status").html(res);
        console.log(res);
        alert('Done');
    });
});

Answer 3

首先，元素不能设置2个id属性，但是您的textarea却设置了。

要正确获取输入元素的值，您需要选择带有$（'＃elementid'）的元素，然后像这样链接val（）函数：$（'＃elementid'）。val（）。

按下提交按钮将触发表单，因此您需要在表单的“ submit”事件上使用侦听器，在回调函数中您将发出ajax请求。

在不更改页面的情况下运行PHP脚本

3 个答案: