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

Question

I am trying to set up my page so that when I a form is submitted it emails and a message is displayed without refreshing the page. 我正在尝试设置我的页面，以便在提交表单时通过电子邮件发送并显示一条消息，而无需刷新页面。

I have tried to do this using jQuery/Ajax however I cannot get any emails sent now 我尝试使用jQuery / Ajax来执行此操作，但是现在无法收到任何电子邮件

Without the Ajax/jQuery, the PHP works just fine but just doesnt include the refresh feature 没有Ajax / jQuery，PHP可以正常工作，但是不包含刷新功能

Any help would be appreciated 任何帮助，将不胜感激

PHP (submitForm.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: 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

Issues: 问题：

if you use document.getElementById you must use id on your elements 如果使用document.getElementById ，则必须在元素上使用id
Add the data to your ajax request 将数据添加到您的ajax请求中

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

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

I do not see you sending the data to PHP file anywhere in your AJAX code 我看不到您将数据发送到AJAX代码中任何位置的PHP文件中

NOTE: Use serialize() function if you want to send all the form data. 注意：如果要发送所有表单数据，请使用serialize()函数。 Else send it separately like 其他分开发送像

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

Your references 您的参考

jQuery Serialize() jQuery Serialize（）
jQuery ajax() jQuery ajax（）

Answer 3

This is your ajax, where you went wrong 这是您的Ajax，您在哪里出错

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

You forgot to include the data to be posted 您忘记包含要发布的数据

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

The keys name , email , message and phone should be as is; 密钥name ， email ， message和phone应保持原样； because you used $_POST['name'] , $_POST['email'] , $_POST['message'] and $_POST['phone'] . 因为您使用了$_POST['name'] ， $_POST['email'] ， $_POST['message']和$_POST['phone'] 。

The calls $('#name').val() , $('#email').val() , $('#phone').val() , $('#message').val() have been made assuming that your input elements have ids name , email , message and phone respectively. $('#name').val() ， $('#email').val() ， $('#phone').val() ， $('#message').val()假设您的输入元素分别具有ids name ， email ， message和phone 。 JS uses ids rather than names. JS使用id而不是名称。

Refer to jQuery Ajax documentation for more details. 有关更多详细信息，请参考jQuery Ajax文档。

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-06-14 14:01:34

解决方案2
0 2015-06-14 13:54:33

解决方案3
0

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-06-14 14:01:34

解决方案2 0 2015-06-14 13:54:33

解决方案3 0

解决方案1
1 已采纳 2015-06-14 14:01:34

解决方案2
0 2015-06-14 13:54:33

解决方案3
0