php - 具有模态响应的简单联系表

Question

好的，我知道模态联系表单有很多问题/答案，但我想知道如何在页面上有一个正常的联系表单，并且在提交时，PHP 操作会以模态形式弹出，说“谢谢联系我们”，或者类似的东西，然后关闭的能力。我以前做过 HTML 联系表单并迷上了 PHP 操作，只是从来没有在模式中......任何简单的解决方案（不使用插件）？

如果有人有这个问题并希望得到答案，请务必投票。

Answer 1

如果您想要一个无 javascript 的解决方案，那么您的表单处理脚本将需要能够呈现表单的所有状态。这些包括：

• 初始未填写表格
• 对第一次提交的回应可能是：
  • 显示部分或错误填写的表格并标记错误
  • 谢谢你的消息
• 回复感谢信息

模态弹出窗口只是一个半透明的容器元素（例如<div>），其样式被设计为在所有其他 html（除了其子项）之上的 z 位置并覆盖整个视口。它包含一个表格和您可能喜欢的任何其他内容。不使用时，其display属性设置为none。

所以你的 php 表单处理程序可能会像这样工作：

$modalclass='modalhide';
$filteredpost=array();

if(isset($_POST['submit1']){ //user submitted form data
    //validate submitted data
    $filteredpost = my_cleanup_function($_POST); 
    if(my_form_is_good($filteredpost){
      $modalclass='modalshow';
      $filteredpost=array();
    } 
} 

echo <<< EOF
<form method='POST' name='mainform' action='myhandler.php'>
   //other form fields
   <input type='submit' name='submit1'>
</form>
<div class='$modalclass'>
   <form name='thanksmodal' method='POST' action='myhandler.php'>
      //content of some sort
      <input type='submit' name='thankssubmit'>
   </form>
</div>
EOF;

AJAX 方法类似，只是 javascript 拦截提交按钮操作，异步提交到表单处理脚本并显示结果。周围有很多 javascript 库可以使这更容易。jQuery和jQuery-UI是我最喜欢的两个。