Question

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

我曾尝试使用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：

<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>

Answer 1

的问题：

如果您使用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;

Answer 2

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

注意：如果要发送所有表单数据，请使用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;
}

您的推荐

Answer 3

这是你的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']。

假设您的输入元素包含ID $('#name').val()，$('#email').val()，则调用$('#phone').val()，$('#message').val()，name，email，分别为message和phone。 JS使用id而不是名称。

有关详细信息，请参阅jQuery Ajax documentation。

没有刷新页面的PHP电子邮件表单

3 个答案: