聯系表格不會提交數據

Question

我的Bootstrap 3聯系人表單的sendemail.php文件中有一個JSON代碼。 該表格能夠將電子郵件發送到指定的電子郵件地址，但是沒有數據被提交。 我收到帶有標簽和標題“未知發件人”的空白電子郵件。 請幫助解決此問題。

這是bootsrap表單代碼塊

<div class="col-sm-6">
                    <h1>Contact Form</h1>
                    <p>Please contact us using the form or our contact details are available here if you'd like to contact us via Email or Phone.</p>
                    <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-6">
                                <div class="form-group">
                                    <input type="text" name="Name" class="form-control" required placeholder="Name">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <input type="text" name="Email" class="form-control" required placeholder="Email address">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <textarea name="Message" id="message" required class="form-control" rows="8" placeholder="Message"></textarea>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-danger btn-lg">Send Message</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div><!--/.col-sm-6-->

這是main.js代碼，其中包含用於聯系人表單的AJAX

jQuery(function($) {

$(function(){
    $('#main-slider.carousel').carousel({
        interval: 5000,
        pause: false
    });
});

//Ajax contact
var form = $('.contact-form');
form.submit(function () {
    $this = $(this);
    $.post($(this).attr('action'), function(data) {
        $this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
    },'json');
    return false;
});

//smooth scroll
$('.navbar-nav > li').click(function(event) {
    if(!$( this ).attr( 'href' ).match(/^#/)) return; 
    event.preventDefault();
    var target = $(this).find('>a').prop('hash');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 500);
});

//scrollspy
$('[data-spy="scroll"]').each(function () {
    var $spy = $(this).scrollspy('refresh')
})

//PrettyPhoto
$("a.preview").prettyPhoto({
    social_tools: false
});

//Isotope
$(window).load(function(){
    $portfolio = $('.portfolio-items');
    $portfolio.isotope({
        itemSelector : 'li',
        layoutMode : 'fitRows'
    });
    $portfolio_selectors = $('.portfolio-filter >li>a');
    $portfolio_selectors.on('click', function(){
        $portfolio_selectors.removeClass('active');
        $(this).addClass('active');
        var selector = $(this).attr('data-filter');
        $portfolio.isotope({ filter: selector });
        return false;
    });
});
});

這是sendemail.php代碼

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

$name = $_POST['Name']; 
$email = $_POST['Email']; 
$subject = $_POST['Subject']; 
$message = $_POST['Message']; 

$email_from = $email;
$email_to = 'myemail@domain.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輸入標簽中缺少name屬性

對於服務器端變量，這是必需的，例如：

$name = $_POST['Name'];

從中獲得價值

<input type="text" name="Name" class="form-control" required placeholder="Name">

---

<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-6">
            <div class="form-group">
                <input name="Name" type="text" class="form-control" required placeholder="Name">
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <input name="Email" type="text" class="form-control" required placeholder="Email address">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <textarea  name="Message" id="message" required class="form-control" rows="8" placeholder="Message"></textarea>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-danger btn-lg" value="Send Message">
            </div>
        </div>
    </div>
</form>

---

<?php    
if(isset($_POST['submit'],$_POST['Name'],$_POST['Email'],$_POST['Subject'],$_POST['Message'])){
    $name = $_POST['Name']; 
    $email = $_POST['Email']; 
    $subject = $_POST['Subject']; 
    $message = $_POST['Message']; 

    $email_from = $email;
    $email_to = 'myemail@domain.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.'>');

    $response = array();

    if($success){
        $response['success'] = true;
        $response['message'] = 'Email sent!';
    }else{
        $response['success'] = false;
        $response['message'] = 'Email sent!';
    }
}else{
    $response['success'] = false;
    $response['message'] = 'post variables are not set';
}

echo json_encode($response);
//die;

Answer 2

在main.js中更改此行：

$.post($(this).attr('action'), function(data) {

至：

$.post($(this).attr('action'), $(this).serialize(), function(data) {

現在它將提交數據。