联系表格无法正常工作
Posted
技术标签:
【中文标题】联系表格无法正常工作【英文标题】：Contactform not working as it should 【发布时间】：2016-02-19 22:35:40 【问题描述】：我最近购买了一个模板，其中包含带有 ajax 和验证的联系表单。我试图将我自己的脚本应用到它，但这不起作用。这可能是服务器端的东西（我的脚本）。有人看到我做错了吗？
这是联系页面上的表格：
<form class="contact-form" id="contact-form" method="post" action="contact_form/contact_form.php">
<div class="row">
<fieldset class="column column-1-2">
<input class="text-input" name="name" type="text" placeholder="Naam *">
<input class="text-input" name="email" type="text" placeholder="Email *">
<input class="text-input" name="phone" type="text" placeholder="Telefoonnummer">
<input class="text-input" name="subject" type="text" placeholder="Onderwerp">
</fieldset>
<fieldset class="column column-1-2">
<textarea name="message" placeholder="Bericht *"></textarea>
</fieldset>
</div>
<div class="row margin-top-30">
<div class="column column-1-2">
<p>We nemen zo snel mogelijk contact met je op.</p>
</div>
<div class="column column-1-2 align-right">
<input type="hidden" name="action" value="contact_form" />
<div class="row margin-top-20 padding-bottom-20">
<a class="more submit-contact-form" href="#" title="SEND MESSAGE"><span>VERSTUUR</span></a>
</div>
</div>
</div>
</form>
这是ajax部分：
//contact form
if($(".contact-form").length)
$(".contact-form").each(function()
$(this)[0].reset();
);
$(".submit-contact-form").on("click", function(event)
event.preventDefault();
$("#contact-form").submit();
);
$(".contact-form").submit(function(event)
event.preventDefault();
var data = $(this).serializeArray();
var self = $(this);
//if($(this).find(".total-cost").length)
// data.push(name: 'total-cost', value: $(this).find(".total-cost").val());
self.find(".block").block(
message: false,
overlayCSS:
opacity:'0.3',
"backgroundColor": "#FFF"
);
$.ajax(
url: self.attr("action"),
data: data,
type: "post",
dataType: "json",
success: function(json)
self.find(".submit-contact-form, [name='submit'], [name='name'], [name='email'], [name='message']").qtip('destroy');
if(typeof(json.isOk)!="undefined" && json.isOk)
if(typeof(json.submit_message)!="undefined" && json.submit_message!="")
self.find(".submit-contact-form").qtip(
style:
classes: 'ui-tooltip-success'
,
content:
text: json.submit_message
,
position:
my: "right center",
at: "left center"
).qtip('show');
self[0].reset();
self.find(".cost-slider-input").trigger("change");
self.find(".cost-dropdown").selectmenu("refresh");
self.find("input[type='text'], textarea").trigger("focus").trigger("blur");
else
if(typeof(json.submit_message)!="undefined" && json.submit_message!="")
self.find(".submit-contact-form").qtip(
style:
classes: 'ui-tooltip-error'
,
content:
text: json.submit_message
,
position:
my: "right center",
at: "left center"
).qtip('show');
if(typeof(json.error_name)!="undefined" && json.error_name!="")
self.find("[name='name']").qtip(
style:
classes: 'ui-tooltip-error'
,
content:
text: json.error_name
,
position:
my: "bottom center",
at: "top center"
).qtip('show');
if(typeof(json.error_email)!="undefined" && json.error_email!="")
self.find("[name='email']").qtip(
style:
classes: 'ui-tooltip-error'
,
content:
text: json.error_email
,
position:
my: "bottom center",
at: "top center"
).qtip('show');
if(typeof(json.error_message)!="undefined" && json.error_message!="")
self.find("[name='message']").qtip(
style:
classes: 'ui-tooltip-error'
,
content:
text: json.error_message
,
position:
my: "bottom center",
at: "top center"
).qtip('show');
self.find(".block").unblock();
);
);
邮件脚本：
<?PHP
require '../PHPMailer/PHPMailerAutoload.php';
$isValid = true;
if(isset($_POST['name']) && isset($_POST['subject']) && isset($_POST['email']) && isset($_POST['message']))
$name = $_POST['name'];
$subject = 'Er is een contact aanvraag op website: '.$_POST['subject'];
$email = $_POST['email'];
$message = $_POST['message'];
$phone = $_POST['phone'];
$mail = new PHPMailer;
$mail->From = $email;
$mail->FromName = $name;
$mail->addAddress("info@website.nl"); // Add a recipient
$mail->ishtml(true); // Set email format to HTML
$mail->Subject = $subject;
$texts = 'Er is een aanvraag op de website van website<br /> <br />
<b>Naam:</b> '.$name.'<br />
<b>E-mail adres:</b> '.$email.'<br />
<b>Onderwerp:</b> '.$subject.'<br />
<b>Vragen / Opmerkingen:</b> '.$message.'<br /><br /><br />
';
$handtekening = '
<table border="0" cellspacing="0" cellpadding="0" style="font-family:calibri;color: #5C5C5C; font-size:10pt;line-height:22px;">
<tr>
<td valign="top" style="font-family:calibri;padding-left:10px;padding-top:20px;">
[contents]
</td>
</tr>
<tr>
<td valign="top" style="font-family:calibri;padding-left:10px;padding-top:20px;">
<br><br>Met vriendelijke groet,<br><br>
Helpdesk<br>
<b>Website</b><br>
<p></p>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" style="font-family:calibri;color: #5C5C5C; font-size:10pt;line-height:22px;">
<tr>
<td valign="top" style="font-family:calibri;padding-left:10px;padding-top:20px;border-top: 1px #000000 dotted; border-bottom: 1px #000000 dotted;">
E:
<a href="mailto:info@website.nl" style="font-family:calibri;color: #5C5C5C; text-decoration: none; border-bottom: 1px #5C5C5C dotted;">info@website.nl</a><br>
T:
<a href="tel:0181851859" style="font-family:calibri;color: #5C5C5C; text-decoration: none; border-bottom: 1px #5C5C5C dotted;">(0181) 851 859</a><br>
W:
<a href="http://website.nl" style="font-family:calibri;color: #5C5C5C; text-decoration: none; border-bottom: 1px #5C5C5C dotted;" target="_blank">www.website.nl</a><br>
</td>
<td align="right" style="font-family:calibri;padding-right:10px;padding-top:5px;border-top: 1px #000000 dotted; border-bottom: 1px #000000 dotted;">
<a href="http://website.nl/" target="_blank" title="Ga naar website">
<img src="http://www.website.nl" style="font-family:calibri;text-align:right;margin:0px;padding:10px 0 10px 0;" border="0" >
</a>
</td>
</tr>
<tr>
<td colspan="2" style="font-family:calibri;color:#a3a3a3;font-size:11px;margin-top:6px;line-height:14px;">
<br>Dit e-mailbericht is uitsluitend bestemd voor de geadresseerde. Als dit bericht niet voor u bestemd is, wordt u vriendelijk verzocht dit aan de afzender te melden. website staat door de elektronische verzending van dit bericht niet in voor de juiste en volledige overbrenging van de inhoud, noch voor tijdige ontvangst daarvan. Voor informatie over website raadpleegt u <a href="http://website.nl" style="font-family:calibri;color: #5C5C5C; text-decoration: none; border-bottom: 1px #5C5C5C dotted;" target="_BLANK">website</a>.<br><br>
</td>
</tr>
</table>';
$contents = preg_replace('/\[contents]/',$texts, $handtekening);
$mail->msgHTML($contents);
$mail->AltBody = $texts;
if(!$mail->send())
$isValid = false;
$mail = new PHPMailer;
$mail->From = 'info@website.nl';
$mail->FromName = 'website';
$mail->addAddress($email); // Add a recipient
$mail->isHTML(true); // Set email format to HTML
$mail->Subject = 'Bedankt voor uw aanvraag bij website';
$texts = 'Geachte heer/mevrouw '.$naam.',<br /><br />
Hartelijk dank voor uw aanvraag bij website<br />
Wij reageren zo spoedig mogelijk op uw aanvraag.<br /><br />
Uw gegevens worden nooit aan derden ter hand gesteld.
';
$contents = preg_replace('/\[contents]/',$texts, $handtekening);
$mail->msgHTML($contents);
$mail->AltBody = $texts;
if(!$mail->send())
$isValid = false;
else
$isValid = false;
$array = array(
'isValid' => $isValid
);
echo json_encode($array);
脚本需要发送两封邮件。一个给发送者作为确认，一个给接收者。
验证不起作用。我认为发送脚本缺少一些信息。
【问题讨论】：
我在 javascript 中看到 != 而不是 !==，不确定这是否重要。通常，您不会因此而使用单引号和双引号。我建议不要以您的方式访问 $_POST 变量，最好使用 filter_input() 过滤它们，并使用 filter_has_var() 而不是 isset()。见php.net/manual/en/book.filter.php。 javascript 是模板的一部分，当我只保留他们的脚本时它就可以工作。但是那个脚本不是我想要的，因为它只发送一封电子邮件。并且只发送到硬编码的电子邮件地址，而不是您在表单中输入的地址。 您有超过一种这些表格吗？您正在类的单击函数内的 ID 上设置 submit()。这不合逻辑。 今晚我会去看看，除非有人抢先一步。 @Lexib0y 提交按钮是标准的a href ，使用 javascript 它在单击链接时提交表单，这是您的意思吗？我只有一个表格。
【参考方案1】：
您使用 ID contact-form 提交表单
$("#contact-form").submit();
但是用
处理提交 $(".contact-form").submit(function(event)
尝试将其更改为
$("#contact-form").submit(function(event)
【讨论】：
不幸的是，这仍然不起作用。我认为这不是 JS 方面的问题。但是发送脚本中有一些东西。好像它没有找到验证/发送脚本。 你能在服务器日志中看到吗？ 尝试将完整的网址放在操作字段中。 这是它在服务器日志中显示的内容：i.gyazo.com/8a396d77cb0b0aeff10eef26859f9d98.png 我点击了 3 次，所以我认为它确实找到了发送脚本。也许错误出在其他地方。这是 Firefox 上的服务器日志：i.gyazo.com/bdf0a76332a5956eb8bdcc71d0fdc183.png 所以，ajaxs 似乎有效。请更新您的问题..all ajax stops working 我看不到您要验证的位置。以上是关于联系表格无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章