【发布时间】：2016-12-15 11:27:24
【问题描述】：
我购买了 Web 模板，但没有购买后支持。它是单页 HTML5 设计。菜单按钮链接到 index.html 中的页面锚点（page_ABOUT、page_SERVICES 等）。该站点的设计使链接的页面锚点可以平滑地滑入静态 z 索引图像之间的位置。模板CAN BE SEEN HERE的工作演示。
我的问题涉及 about_CONTACTS 页面锚点。我在其他网站上的其他联系页面运行良好，但这些是 PHP 页面（即contact.php）。为了保持在这个设计的范围内，我需要能够在单个 HTML 页面中创建 about_CONTACTS 页面功能。 （选择创建一个单独的 PHP 联系页面会破坏设计的滑动功能并导致页面重新加载。）about_CONTACTS 页面表单的代码块是：
<form id="ajax-contact-form" action="javascript:alert('success!');">
<div class="clear"></div>
<label>Your full name:</label>
<INPUT class="textbox left " type="text" name="name" value="">
<div class="clear"></div>
<label >E-Mail:</label>
<INPUT class="textbox left" type="text" name="email" value="">
<div class="clear"></div>
<label >Phone Number:</label>
<INPUT class="textbox left" type="text" name="phone" value="">
<div class="clear"></div>
<label >Message:</label>
<TEXTAREA class="textbox left" NAME="content" ROWS="5" COLS="25"></TEXTAREA>
<div class="clear"></div>
<label>Captcha:</label>
<img src="captcha/captcha.php" style="margin:3px 0px; width:100px; height:32px; float:left;">
<INPUT class="textbox" type="text" name="capthca" value="" style=" width:90px; float:left; margin-left:10px; margin-top:2px">
<div class="clear"></div>
<INPUT class="pin" type="submit" name="submit" value="submit">
</form>
head 标签之间的 JavaScript 是：
<script type="text/javascript">
$(document).ready(function()
{
$("#ajax-contact-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contact.php",
data: str,
success: function(msg)
{
if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
{
result = '<div class="notification_ok">Your message has been sent. Thank you!<br> <a href="#" onclick="freset();return false;">send another mail</a></div>'; $("#fields").hide();
}
else {
result = msg;
}
$("#note").html(result);
}
});
return false;
});
});
function freset()
{
$("#note").html('');
document.getElementById('ajax-contact-form').reset();
$("#fields").show();
}
</script>
表单调用contact.php，其内容为CAN BE SEEN HERE。 Contact.php 要求包含contact_config.php（文件内容CAN BE SEEN HERE）和functions.php（内容CAN BE SEEN HERE）。
我在 contact_config.php 中放置了预期的发送/接收电子邮件地址：
<?php
// To
define("WEBMASTER_EMAIL", 'email@companyname.com');
?>
这样：
<?php
// To
define("WEBMASTER_EMAIL", 'me@mydomain.com');
?>
请您告知为什么提交按钮没有响应点击以及为什么没有发送邮件？我以前从未使用过这种类型的表单，虽然我确定我打算编辑其他内容，但我不知道要编辑什么以及在哪里编辑。 （我非常注意确保正确输入验证码。我既没有收到错误消息也没有收到成功消息。尝试通过联系表单提交消息时根本没有任何响应。）
【问题讨论】：
-
“不响应点击”您确定吗？看起来应该。你有没有调用 console.log() 来查看“提交”处理程序是否正在执行？您是否检查过浏览器控制台以查看是否有任何错误？您没有处理 $.ajax() 方法的“错误”回调，因此如果调用中出现任何 HTTP 错误，您将不会在应用程序中看到它们（但您可能会在控制台中看到它们）。
-
@ADyson 我已经清除了控制台日志并再次完成了这些动作，但我得到的只是一个关于 favicon 的问题（这只是在 Firefox 中；Chrome 中什么都没有)。这次我确实尝试过故意输入错误的验证码，但我确实收到了一条错误消息，指出它是错误的。但是，当正确输入所有信息并单击提交时，根本没有任何动作。收件箱中没有任何内容。对不起;我不知道如何调用 console.log()。
-
console.log 只是一个 javascript 命令，它将输出写入浏览器的控制台。所以你可以这样做：
$("#ajax-contact-form").submit(function() { console.log("entered the submit handler"); //etc -
在浏览器的网络标签中呢？你能看看 ajax 调用是否导致 HTTP 200 (OK) 响应或其他一些状态代码？
-
我也刚刚注意到，您的表单没有将数据发送到任何地方
<form id="ajax-contact-form" action="javascript:alert('success!');">- “action”属性完全错误。它应该类似于action="contact.php"。否则它不知道将表单发送到哪里。而且您还需要method="POST"属性，否则它将默认为 GET 并且您的 PHP 不会获取变量
标签： php html contact-form ajaxform