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
            }
        )
    });
}