javascript - AJAX PHP 邮件表单

Question

我正在尝试制作一个 PHP 邮件表单。我的工作方式如下:

<form method="post" action="PHP/index.php" autocomplete="off">
    <fieldset class="singleLine">
        <input id="name" type="text" name="name" required>
        <label for="name">Full Name</label>
        <div class="after"></div>
    </fieldset>
    <fieldset class="singleLine">
        <input id="email" type="text" name="email" required>
        <label for="email">Email</label>
        <div class="after"></div>
    </fieldset>
    <fieldset class="multiLine">
        <textarea onkeydown="textAreaAdjust(this)" id="message" type="textarea" name="message" required></textarea>
        <label for="message" id="messageTop">Message</label>
        <div class="after"></div>
    </fieldset>
    <fieldset>
        <input id="submit" name="submit" type="submit" value="Submit">
        </fielset>
</form>

这是我的 PHP 文件

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'From: '; 
    $to = ''; 
    $subject = 'Contact Form';

    $body = "From: $name\n E-Mail: $email\n Message:\n $message";


    if ($_POST['submit']) {
        if (mail ($to, $subject, $body, $from)) { 
            echo '<p>Your message has been sent!</p>';
        } else { 
            echo '<p>Something went wrong, go back and try again!</p>'; 
        }
    }
?>

我不喜欢这种方法的是，它会将您发送到一个新页面，其中显示文本消息已发送或出现问题。 我真的很想用弹出窗口/模式来实现。模态不是问题。

Ajax 调用给我带来了一些问题。 我可能需要更改我的 PHP 代码，但不知道如何更改。有人可以帮我吗。我不熟悉 PHP。

这是我的ajax调用和修改后的表单的JS代码

function sendMail() {
    $("#submit").click(function() {
        var name = $("#name").val();
        var email = $("#email").val();
        var text = $("#message").val();
        var dataString = 'name='+ name + '&email=' + email + '&text=' + text;


    $.ajax({
        url: 'PHP/index.php',
        type: 'post',
        data: dataString
    })
        .promise()
        .done(function (data) {
            alert("done");
        });
    });
}

形式:

<form autocomplete="off">
    <fieldset class="singleLine">
        <input id="name" type="text" name="name" required>
        <label for="name">Full Name</label>
        <div class="after"></div>
    </fieldset>
    <fieldset class="singleLine">
        <input id="email" type="text" name="email" required>
        <label for="email">Email</label>
        <div class="after"></div>
    </fieldset>
    <fieldset class="multiLine">
        <textarea onkeydown="textAreaAdjust(this)" id="message" type="textarea" name="message" required></textarea>
        <label for="message" id="messageTop">Message</label>
        <div class="after"></div>
    </fieldset>
    <fieldset>
        <div id="submit" name="submit">Submit</div>
        <!--<input id="submit" name="submit" type="submit" value="Submit">-->
        </fielset>
</form>

Answer 1

为您的表单提供一个类或 ID。

function sendMail() {
    //bind on the submit of the form
    $(".myForm").on('submit', function(e) {
        e.preventDefault(); //cancel the normal form submission

        $.ajax({
            url: 'PHP/index.php',
            method: 'post',
            data: $(this).serialize(), //serialize all the inputs of the form for the ajax request
        }).then(
            function success() {
                console.log(arguments);
                //do stuff
            },
            function error() {
                console.log(arguments);
                //do stuff
            }
        )
    });
}