没有刷新页面的 PHP 电子邮件表单 - PHP email form without Refreshing Page

我正在尝试设置我的页面，以便在提交表单时，它会发送电子邮件并显示消息而不刷新页面。

我尝试使用jQuery/Ajax执行此操作，但是我现在无法收到任何电子邮件

如果没有Ajax/jQuery，PHP工作得很好，但不包括刷新功能。

任何帮助将不胜感激

PHP （submitForm.php）：

<?php
    $name = isset($_POST['name']);
    $email = isset($_POST['email']);
    $phone = isset($_POST['phone']);
    $message = isset($_POST['message']);
    $feedback = '';
if($name && $email && $phone && $message) {
    $name = ($_POST['name']);
    $email = ($_POST['email']);
    $phone = ($_POST['phone']);
    $message = ($_POST['message']);
}
    $to = "arshdsoni@gmail.com";
    $subject = 'Soni Repairs - Support Request';
    $body = <<<EMAIL
Hi There!
My name is $name.
Message: $message.
My email is: $email
Phone Number: $phone
Kind Regards
EMAIL;
$header = "From: $email";
if($_POST) {
    if($name == '' || $email == '' || $phone == '' || $message == '') {
        $feedback = "Nothing received!";
    }
    else {
        mail($to, $subject, $body, $header);
        $feedback = '*Message Received! You will receive a reply shortly!';
    }
} 
?>

jQuery/Ajax：

function submitForm() {
                var name=document.getElementById('name').value;
                var dataString = 'name'+ name;
                $.ajax({
                    type:"post",
                    url:"submitForm.php",
                    cache:false,
                    success: function(html) {
                        $('#feedback').html(html);
                    }
                });
                return false;
            }

形式：

<form id="contact" action="#">
                            <h3>Get in Touch:</h3>
                            <h4><span id="star" class="glyphicon glyphicon-asterisk"></span>We aim to reply within 24 hours!</h4>
                            <fieldset>
                              <input name="name" placeholder="Your Name" type="text" tabindex="1" required>
                            </fieldset>
                            <fieldset>
                              <input name="email" placeholder="Your Email Address" type="email" tabindex="2" required>
                            </fieldset>
                            <fieldset>
                              <input name="phone" placeholder="Your Phone Number" type="tel" tabindex="3" required>
                            </fieldset>
                            <fieldset>
                              <textarea id="textarea" name="message" placeholder="Describe your problem...." tabindex="5" required></textarea>
                            </fieldset>
                            <fieldset>
                              <button name="submit" type="submit" id="contact-submit submitBtn" data-submit="...Sending" "return submitForm();">Submit</button>
                            </fieldset>
                        </form>

问题：

如果使用document.getElementById则必须在元素上使用 id
将数据添加到 ajax 请求中

.HTML：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
    $( "#submitBtn" ).click(function( event ) {
    alert('pressed');
        //values
        var name=document.getElementById('name').value;
        var email=document.getElementById('email').value;
        var phone=document.getElementById('phone').value;
        var message=document.getElementById('message').value;
        var dataString = {"name": name, "email":email, "phone": phone, "message":message}
        $.ajax({
            type:"post",
            url:"submitForm.php",
            data: dataString,
            success: function(html) {
                $('#feedback').html(html);
            }
        });
      event.preventDefault();
    });
});
</script>
</head>
<body>
<form id="contact" method="POST">
    <h3>Get in Touch:</h3>
    <h4><span id="star" class="glyphicon glyphicon-asterisk"></span>We aim to reply within 24 hours!</h4>
    <fieldset>
      <input id="name" placeholder="Your Name" type="text" tabindex="1" required>
    </fieldset>
    <fieldset>
      <input id="email" placeholder="Your Email Address" type="email" tabindex="2" required>
    </fieldset>
    <fieldset>
      <input id="phone" placeholder="Your Phone Number" type="tel" tabindex="3" required>
    </fieldset>
    <fieldset>
      <textarea id="message" placeholder="Describe your problem...." tabindex="5" required></textarea>
    </fieldset>
    <fieldset>
      <button name="submit" id="submitBtn">Submit</button>
    </fieldset>
</form>
<div id="feedback"></div>
</body>
</html>

.PHP

<?php
if(isset($_POST['name'], $_POST['email'], $_POST['phone'], $_POST['message'])){
    //Post data
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];
    //mail settings
    $to = "arshdsoni@gmail.com";
    $subject = 'Soni Repairs - Support Request';
    $body = <<<EMAIL
Hi There!
My name is $name.
Message: $message.
My email is: $email
Phone Number: $phone
Kind Regards
EMAIL;
    if(mail($to, $subject, $body, $header)){
        $feedback = '*Message sent! You will receive a reply shortly!';
    }else{
        $feedback = '*Message failed to send';
    }
}else{
    $feedback = 'Missing Params';
}
echo $feedback;

这是你的ajax，你出错的地方

$.ajax({
    type:"post",
    url:"submitForm.php",
    cache:false,
    success: function(html) {
        $('#feedback').html(html);
    }
});

您忘记包含要发布的数据

$.ajax({
    type:"post",
    url:"submitForm.php",
    cache:false,
    data {
        name: $('#name').val(),
        email: $('#email').val(),
        phone: $('#phone').val(),
        message: $('#msg').val()
    }
    success: function(html) {
        $('#feedback').html(html);
    }
});

键name、email、message和phone应该保持原样;因为你使用了$_POST['name']、$_POST['email']、$_POST['message']和$_POST['phone']。

调用$('#name').val()、$('#email').val()、$('#phone').val()、$('#message').val()是假设输入元素分别具有 name、email、message 和 phone 的 id。JS使用ID而不是名称。

有关更多详细信息，请参阅 jQuery Ajax 文档。

我没有看到您将数据发送到AJAX代码中任何位置PHP文件

注意：如果要发送所有表单数据，请使用serialize()函数。否则单独发送，例如

var formDatas = {name:"name",email:"emailID"};

function submitForm() {
      var name=document.getElementById('name').value;
      var dataString = 'name'+ name;
      var formDatas = $('#formID').serialize();   // Send form data
         $.ajax({
            type:"post",
            url:"submitForm.php",
            data : {datas : formDatas }
            cache:false,
            success: function(html) {
              $('#feedback').html(html);
             }
          });
     return false;
}

您的参考资料

jQuery Serialize（）
jQuery ajax（）