Ajax 一页内的联系表 HTML5 设计不起作用

Question

我购买了一个网页模板，但没有 post- 购买支持。这是一页 HTML5 设计。菜单按钮 link 用于在 index.html（page_ABOUT、page_SERVICES 等）内翻页锚点。该站点的设计使 linked 页面锚点可以平滑地滑入静态 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 calls for the inclusions of contact_config.php (contents of file CAN BE SEEN HERE) and functions.php (contents CAN BE SEEN HERE).

我将预期的 send/receive 电子邮件地址放入 contact_config.php:

<?php
// To
define("WEBMASTER_EMAIL", 'email@companyname.com');
?>

这样：

<?php
// To
define("WEBMASTER_EMAIL", 'me@mydomain.com');
?>

请问为什么提交按钮没有响应点击，为什么没有邮件被发送？我以前从未使用过这种类型的表格，虽然我确定我打算编辑其他内容，但我不知道要编辑什么以及在哪里编辑。（我非常小心地确保正确输入了验证码。我既没有收到错误消息也没有收到成功消息。在尝试通过联系表单提交消息时根本没有任何响应。）

Answer 1

根据评论，解决方案如下：

a) 更改您的表单标签

<form id="ajax-contact-form" action="javascript:alert('success!');">

到

<form id="ajax-contact-form" action="contact.php" method="post">

您的版本无效 - 该操作应指定表单将其数据发送到的位置，并且需要该方法才能强制回发（否则它默认使用 GET，而您的 PHP 不是设置处理（您正在阅读 $_POST 个变量）。

b) 检查 $_SESSION['captcha_keystring'] 和 $_POST["capthca"] 的值以确保它们确实包含您认为的内容。例如

例如（仅用于调试目的 - 不要将其留作生产使用！）：

$error .= "Captcha keystring: ".strtolower($_SESSION['captcha_keystring']);
$error .= " User-entered captcha: ".strtolower($_POST['capthca']);

if(isset($_SESSION['captcha_keystring']) && strtolower($_SESSION['captcha_keystring']) != strtolower($_POST['capthca']))
{
  $error .= "Incorect captcha.<br />";
}

还要确保您的 HTML 验证码文本框具有正确的名称属性 (name="capthca") 以匹配您的 PHP $_POST["capthca"].

Ajax 一页内的联系表 HTML5 设计不起作用

Ajax contact form within one-page HTML5 design not functioning

php

html

contact-form

ajaxform