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. These include:
- initial unfilled form
- response to first submission which may be:
- display of partially or incorrectly filled form with errors marked
- thank-you message
- response to thank-you message
A modal popup is only a translucent container element (e.g. <div>
) styled to be z-positioned on top of all the other html (except its children) and to cover the entire viewport. It contains a form and anything else you might like. When it is not in use, its display
attribute is set to none
.
So your php form handler might work something like this:
$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. There are lots of javascript libraries around to make this easier. jQuery and jQuery-UI are my two favourites.