[英]Simple contact form with modal response
Alright, I know there are many questions/answers for a modal contact form, but I would like to know how I can have a normal contact form on the page and when submitted, the PHP action is popped up in a modal, saying "Thanks for contacting us", or something along those lines, and then the ability to close. 好的,我知道模态联系表有很多问题/答案,但是我想知道如何在页面上使用普通的联系表,提交后,PHP操作会以模态弹出,说:“谢谢。以与我们联系”,或者类似的内容,然后关闭。 I've done HTML contact forms and hooked in the PHP action before, just never in a modal... Any simple solutions (without the use of plugins)?
我已经完成了HTML联系人表单,并且之前从未参与过PHP操作,只是从来没有采用过模式操作...任何简单的解决方案(不使用插件)?
If anyone has this question and wants it answered, please be sure to vote up. 如果有人有这个问题并希望得到回答,请务必投票。
If you want to have a javascript-free solution, then your form-handling script will need to be able to present all states of the form. 如果您想要一个无JavaScript的解决方案,那么您的表单处理脚本将需要能够呈现表单的所有状态。 These include:
这些包括:
A modal popup is only a translucent container element (eg <div>
) styled to be z-positioned on top of all the other html (except its children) and to cover the entire viewport. 模态弹出窗口只是一个半透明的容器元素(例如
<div>
),其样式设置为在所有其他html(子元素除外)之上z放置并覆盖整个视口。 It contains a form and anything else you might like. 它包含一个表格以及您可能想要的其他任何内容。 When it is not in use, its
display
attribute is set to none
. 不使用时,其
display
属性设置为none
。
So your php form handler might work something like this: 因此,您的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;
The AJAX method is similar except that a javascript intercepts the submit button actions, submits to a form-handling script asynchronously and presents the results. AJAX方法类似,除了javascript拦截提交按钮动作,异步提交到表单处理脚本并显示结果。 There are lots of javascript libraries around to make this easier.
周围有很多JavaScript库可以简化此过程。 jQuery and jQuery-UI are my two favourites.
jQuery和jQuery-UI是我的两个最爱。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.