表单发送电子邮件，但电子邮件中的 $_POST 值为空白

Question

我已经阅读了很多论坛都发布了这个确切的问题，但没有令人满意的答案。有些帖子似乎已经找到了如何让它发挥作用，但答案没有分享或只是部分回答。

我看到最多的答案是（但不知道怎么用）：

var form = $('.contact-form');
form.submit(function () {'use strict',
    $this = $(this);
    $.post("sendemail.php", $(".contact-form").serialize(),function(result){
    if(result.type == 'success'){
        $this.prev().text(result.message).fadeIn().delay(3000).fadeOut();
    }
});
    return false;
});

这个问题是 $_POST 没有被发送。邮件功能正常，但邮件内容为空白

我的邮件信息：

Name: 
Email:  
Subject: 
Message:

当我用数据填写表格并且没有发送任何内容时，这正是在我的邮件中

main.html

<h4>Contact Form</h4>
<div class="status alert alert-success" style="display: none"></div>
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php" role="form">
    <div class="row">
        <div class="col-sm-5">
            <div class="form-group">
                <input type="text" class="form-control" name="subject" required="required" placeholder="Subject">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" name="name" required placeholder="First Name">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" name="email" required placeholder="Email address">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-lg">Send Message</button>
            </div>
        </div>
        <div class="col-sm-7">
            <textarea name="message" id="message" required class="form-control" rows="8" placeholder="Message"></textarea>
        </div>
    </div>
</form>

---

sendemail.php

<?php
    header('Content-type: application/json');
    $status = array(
        'type'=>'success',
        'message'=>'Email sent!'
    );

    $name = @trim(stripslashes($_POST['name'])); 
    $email = @trim(stripslashes($_POST['email'])); 
    $subject = @trim(stripslashes($_POST['subject'])); 
    $message = @trim(stripslashes($_POST['message'])); 

    $email_from = $email;
    $email_to = 'myEmail@gmail.com';

    $body = 'Name: ' . $name . "\n\n" . 'Email: ' . $email . "\n\n" . 'Subject: ' . $subject . "\n\n" . 'Message: ' . $message;

    $success = @mail($email_to, $subject, $body, 'From: <'.$email_from.'>');

    echo json_encode($status);
    die;

Answer 1

您的表单是否可能被提交两次？ （一旦完成然后空白） html 表单已经完全连接到 POST 而不使用提交处理程序，这是多余的。

如果我要通过 AJAX 提交表单，我通常只设置表单的 id（即无操作和无方法属性），并使用常规按钮（非提交）作为提交按钮。这清楚地表明 jQuery 将处理 POST。

<form id="main-contact-form" class="contact-form" role="form">
    ...fields
    <button id="btn_submit" class="btn btn-primary">Submit</button>
</form>

然后在 jQuery 中

'use strict';
var form = $('.contact-form'),
    btn_submit = $('#btn_submit');

btn_submit.on('click', function(e) {
    e.preventDefault(); //prevent default button behavior
    $.post('sendemail.php', form.serialize(),function(result){
    if(result.type == 'success'){
        form.prev().text(result.message).fadeIn().delay(3000).fadeOut();
    }
});

Answer 2

如下所示更改你的“jquery”代码：

$('.contact-form').submit(function (e) {
    e.preventDefault();  // prevent default form 'submit' event
    $this = $(this);
    $.post(
      "sendemail.php",
       $(".contact-form").serialize(),
       function(result){
          if(result.type == 'success'){
              $this.prev().text(result.message).fadeIn().delay(3000).fadeOut();
          }           
       },
       'json'  // expecting a JSON response from server
    );
});

Answer 3

我认为您在同一页面中有多个带有 css 类 .contact-form 的表单。如果你想提交这个表单，那么你可以使用表单 id 选择器。

<script type="text/javascript">
    $(function() {
        $('#main-contact-form').submit(function (e) {
            e.preventDefault();  // prevent default form 'submit' event
            var $this = $(this);
            $.post("sendemail.php", $this.serialize(), function(result) {
                if (result.type == 'success') {
                    $this.prev().text(result.message)
                         .fadeIn().delay(3000).fadeOut();
                }
            }
        }, 'json');
    });
</script>

或者您可以使用 css 选择器编写代码，如下所示：

<script type="text/javascript">
    $(function() {
        $('.contact-form').submit(function (e) {
            e.preventDefault();  // prevent default form 'submit' event
            var $this = $(this);
            $.post("sendemail.php", $this.serialize(), function(result) {
                if (result.type == 'success') {
                    $this.prev().text(result.message)
                         .fadeIn().delay(3000).fadeOut();
                }
            }
        }, 'json');
    });
</script>