是什么让我的联系表格无法正常工作?

时间:2015-10-21 22:52:01

标签: javascript php html forms contact

我一直试图让我的联系表格正常工作,但我不能。没有错误信息或任何可以让我领先的信息。以下是我的三个部分:

<div class="contact-form">
<h3>Contact Info</h3>

<address>
<strong>MY WEBSITE</strong>
</address>

<form id="main-contact-form" name="contact-form" method="post" action="sendemail.php">
<div class="form-group">
<input type="text" name="contactname" 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="phone" name="phone" class="form-control" placeholder="Phone#" required>
</div>

<div class="form-group">


<select name="interest">
<option value="choose" selected="selected" data-skip="1">Choose your interest</option>
<option value="help">Help</option>
<option value="naturalproducts">Natural Products</option>
<option value="other">Other</option>

</select>

</div>
<div class="form-group">
<textarea name="message" class="form-control" rows="5" placeholder="Brief Message" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>

我的sendemail.php是这样的:

<?php
$contactname       = @trim(stripslashes($_POST['contactname'])); 
$from              = @trim(stripslashes($_POST['email'])); 
$phone             = @trim(stripslashes($_POST['phone'])); 
$selected          = @trim(stripslashes($_POST['selected'])); 
$message    = @trim(stripslashes($_POST['message'])); 
$to         = 'info@mywebsite.com';//replace with your email

$headers   = array();
$headers[] = "MIME-Version: 1.0";
$headers[] = "Content-type: text/plain; charset=iso-8859-1";
$headers[] = "From: {$name} <{$from}>";
$headers[] = "Reply-To: <{$from}>";
$headers[] = "Subject: {$subject}";
$headers[] = "X-Mailer: PHP/".phpversion();

mail($to, $subject, $message, $headers);

die;

最后,带有消息的javascript如下:

// Contact form
var form = $('#main-contact-form');
form.submit(function(event){
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        url: $(this).attr('action'),
        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">Thank you for contacting us.</p>').delay(3000).fadeOut();
    });
});

3 个答案:

答案 0 :(得分:0)

默认$.ajax执行GET请求,您必须实际告诉它执行POST请求,并且您正在侦听$_POST[]值,这样可能是什么你想做什么。

您可以从表单method属性中获取请求类型,并且您还必须发送表单数据。

$.ajax({
    url  : $(this).attr('action'),
    type : $(this).attr('method'),
    data : $(this).serialize(),
    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">Thank you for contacting us.</p>').delay(3000).fadeOut();
});

答案 1 :(得分:0)

您没有发送任何表单数据,并且您没有使用POST HTTP方法,但是您正在查看$_POST变量。

$.ajax({
        url: $(this).attr('action'),
        data: form.serialize(), // send data
        method: "POST", // send post method
        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">Thank you for contacting us.</p>').delay(3000).fadeOut();
    });

您还必须将标题设为字符串。试试@andrewsi提到的implode("\n", $headers)

答案 2 :(得分:0)

试试这个

&#13;
&#13;
	var form = $('#main-contact-form');
	form.submit(function(event){
	    event.preventDefault();
	    var form_status = $('<div class="form_status"></div>');
	    $.ajax({
	        type: "POST",
	        url: $(this).attr('action'),
	        data: form.serialize(),
	        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">Thank you for contact us. As early as possible  we will contact you</p>')
	            .delay(3000)
	            .fadeOut();
	    });
	});
&#13;
&#13;
&#13;