bootstrap形式不起作用。收到空白表格

时间:2016-02-11 13:24:24

标签: php jquery forms

我使用了bootstrap表单,但无法从表单请求发送数据可以任何身体帮助我这个我尝试了很多现在我receiving only blank mail喜欢 名称:

电子邮件:

主题:

消息:

使用托管电子邮件ID xxxx@hostmonster.com如何将收据从“更改为发件人ID”更改为我的代码

<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="http://smalldesigncompany.com/client/form-sending/sendemail.php" role="form">
    <div class="form-group">
        <input type="text" name="name" class="form-control" placeholder="Name" required>
    </div>
    <div class="form-group">
        <input type="email" name="email" class="form-control" placeholder="Email" required>
    </div>
    <div class="form-group">
        <input type="text" name="subject" class="form-control" placeholder="Subject" required>
    </div>
    <div class="form-group">
        <textarea name="message" class="form-control" rows="8" placeholder="Message" required></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Send Message</button>
</form> 

我的jquery:

var form = $('#main-contact-form').serialize();
form.submit(function (event) {
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        dataType: "json",
        beforeSend: function () {
            form.prepend(form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn());
        }
    }).done(function (data) {
        form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();

    });
});

我的php:

<?php 
header('Content-type: '); 
$status = array( 
    'type'=>'success', 
    'message'=>'Thank you for contact us. As early as possible  we will contact you ' 
); 

$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 = 'sales.mtc@outlook.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; 
?>

4 个答案:

答案 0 :(得分:0)

尝试添加标头。可能是你的“\ n \ n”创建问题。

<snippet>
    <content>
        <![CDATA[
            <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
        ]]>
    </content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>gf-roboto</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html</scope>
</snippet>

答案 1 :(得分:0)

问题在于你的javascript - 你的jQuery.ajax实际上并不包含任何数据!

根据jQuery docs(http://api.jquery.com/jquery.ajax/):

  

<强> 数据   键入:PlainObject或String或Array   要发送到服务器的数据。如果不是字符串,它将转换为查询字符串。它附加到GET请求的URL。请参阅processData选项以防止此自动处理。对象必须是键/值对。如果value是一个数组,jQuery会根据传统设置的值(如下所述)使用相同的键序列化多个值。

您可以在输入上使用jquery.serialize(https://api.jquery.com/serialize/)来创建要传递的所需数据字符串。

答案 2 :(得分:0)

您需要将data发送为JQuery&amp;&amp; PHP无法了解您发布的值。查看关于数据的Jquery文档(LINK

修改后的代码:

var form = $('#main-contact-form').serialize();
form.submit(function (event) {
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        dataType: "json",
        data: {
            name: $('input[name="name"]').val(),
            email: $('input[name="email"]').val(),
            subject: $('input[name="subject"]').val(),
            message: $('textarea[name="message"]').val(),
        },
        beforeSend: function () {
            form.prepend(form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn());
        }
    }).done(function (data) {
        form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();

    });
});

答案 3 :(得分:0)

你的Js就是这样,

$('#main-contact-form').on('submit', function (event) {
    form = $(this);
    var formData = form.serialize();
    event.preventDefault();
    $.ajax({
        url: form.attr('action'),
        type: 'POST',
        data: formData,
        beforeSend: function () {
            form.prepend(form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn());
        }
    }).done(function (data) {
        form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();

    });
});

它会完美运作。