联系表格不会提交数据 [英] Contact form won't submit data
本文介绍了联系表格不会提交数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的Bootstrap 3联系表单的sendemail.php文件中有一个JSON代码。该表格能够发送电子邮件到指定的电子邮件地址，但没有提交数据。我收到带有标签和标题未知发件人的空白电子邮件。请帮忙解决这个问题。
这是靴子的表单代码块
< div class =col-sm-6>
< h1>联络表单< / h1>
< p>如果您想通过电子邮件或电话与我们联系，请使用表单与我们联系，或者我们的联系方式可在此处查看。< / p>
< div class =status alert alert-successstyle =display：none>< / div>
< div class =row>
< div class =col-sm-6>
< div class =form-group>
< input type =textname =Nameclass =form-controlrequired placeholder =Name>
< / div>
< / div>
< div class =col-sm-6>
< div class =form-group>
< input type =textname =Emailclass =form-controlrequired placeholder =Email address>
< / div>
< / div>
< / div>
< div class =row>
< div class =col-sm-12>
< div class =form-group>
< / div>
< div class =form-group>
< button type =submitclass =btn btn-danger btn-lg>发送消息< / 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;
}）;
//平滑滚动
$（'。navbar-nav> li'）。点击（函数（事件）{
if（！$（this）.attr（'href'）.match（/ ^＃/））return;
event.preventDefault（）;
var target = $（this）.find（'> a'）。prop（'hash'）;
$（'html，body'）。animate（{
scrollTop：$（target） .offset（）。top
}，500）;
}）;
//滚动spy
'（'[data-spy =scroll]'）。each（function（）{
var $ spy = $（this）.scrollspy（'refresh'）
} ）
// PrettyPhoto
$（a.preview）。prettyPhoto（{
social_tools：false
}）;
$ b $ //同位素
$（窗口）.load（函数（）{
$ portfolio = $（'。portfolio-items'）;
$ portfolio。同位素（{
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：'。 $名称。 \\\
\\\
。 '电子邮件：'。 $电子邮件。 \\\
\\\
。 '学科： ' 。 $主题。 \\\
\\\
。 '信息： ' 。 $消息;
$ success = @mail（$ email_to，$ subject，$ body，'From：<'。$ email_from。'>'）;
echo json_encode（$ status）;
死亡;
？>
解决方案< （$（this）.attr（'/ $>）。更改main.js中的这一行：
$ b （$（this）.attr（'action'），$（this）.serialize（），function（data）{
行动'），功能（数据）{
到：
$ b （$（this）.attr（'action'），$（this）.serialize（），function（data）{
它现在会提交数据。
I have a JSON code in a sendemail.php file for my Bootstrap 3 contact form. The form is able to send an email to the specified email address but there is no data being submitted. I get blank emails with labels and the header 'unknown sender'. Please help solve this.
This is the bootsrap form code chunk
<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-->
This is the main.js code where the AJAX for contact form is present
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;
});
});
});
This is the sendemail.php code
<?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;
?>
解决方案 Change this line in main.js:
$.post($(this).attr('action'), function(data) {
to:
$.post($(this).attr('action'), $(this).serialize(), function(data) {
It will now submit the data.
这篇关于联系表格不会提交数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
