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>

表单发送电子邮件但在电子邮件中$ _POST值为空

3 个答案: