<?php
/***
This example requires Floatbox version 7 or later.
Both the client side form presentation and
the server-side form processing are handled by this php script.
Presentation is done in response to a GET request in the top section.
Submit processing is done in response to a POST request at the bottom.
***/
if ( $_SERVER['REQUEST_METHOD'] == 'GET' ) {
// Serve the form.
?>
<style>
#ajax_form {
margin: 28px;
}
#ajax_form .button_wrapper {
margin-top: 24px;
}
#ajax_form .button_spacer {
display: inline-block;
width: 20px;
}
</style>
<form id="ajax_form">
<p id="notice">
Hint: 'Puce' will fail client-side validation<br/>
and 'Pink' will fail server-side validation.
</p>
<p>
Gender<br />
<input type="radio" name="gender" value="male"/> Male
<input type="radio" name="gender" value="female"/> Female
</p>
<p>
Favourite Colour<br/>
<select id="color" name="color">
<option value=""><select></option>
<option value="blue">Blue</option>
<option value="puce">Puce</option>
<option value="red">Red</option>
<option value="pink">Pink</option>
<option value="green">Green</option>
</select>
</p>
<p class="button_wrapper">
<button type="button" name="submit" onclick="ajaxSubmit()">Submit</button>
<span class="button_spacer"> </span>
<button type="button" name="cancel" onclick="fb.end()">Cancel</button>
</p>
</form>
<script>
function ajaxSubmit () {
// Check form selection validity and
// do an AJAX POST submit back to this page.
if ( validateForm() ) {
fb.ajax( {
source: '<?php echo $_SERVER["REQUEST_URI"]; ?>',
postData: 'ajax_form',
finish: ajaxFinish
} );
}
}
function validateForm () {
// Check form selection validity prior to POSTing.
var formValues = fb.getFormValues( 'ajax_form' ); // an object
if ( !formValues.gender || !formValues.color || formValues.color == '<select>' ) {
fb.setInnerHTML( 'notice',
'All fields are mandatory.<br/>Please make a selection.'
);
fb.setStyle( 'notice', 'color', 'red' );
}
else if ( formValues.color == 'puce' ) {
// Show a new floatbox.
fb.start(
// direct html
'<div style="background-color:#A95C68; color:white; padding:16px;">' +
'<p>Puce??? Nobody\'s favourite colour is puce!<br/>' +
'I don\'t think you\'re taking this survey very seriously.</p>' +
'<p>Please try again.' +
'<button type="button" onclick="fb.end()" ' +
'style="margin-left:33px; background-color:#A95C68;">OK</button></p>' +
'</div>',
// options
'className:naked modal:false doAnimations:false showOuterClose:false'
);
}
else {
// Passed validation, proceed.
return true;
}
}
function ajaxFinish ( result ) {
// Handle the JSON server response generated by the POST action.
var json = result.responseJSON;
if ( json.status == 'out of stock' ) {
// Handle the response within the existing form.
fb.setInnerHTML( 'notice',
'Sorry, we\'re all out of ' + json.color + ' for ' +
( json.gender == 'male' ? 'men.' : 'women.' ) +
'<br/>Please select a different colour'
);
fb.setStyle( 'notice', 'color', 'red' );
}
else if ( json.status == 'ok' ) {
// Update the underlying main page and close this floatbox.
fb.setInnerHTML( 'ajaxGender', json.gender == 'male' ? 'masculine' : 'feminine' );
fb.setInnerHTML( 'ajaxColor', json.color );
fb.setStyle( 'ajaxFormResults', {
color: json.color,
display: 'block'
} );
fb.end();
}
}
</script>
<?php
}
else if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
// Process the POST submit of the form.
// DB activity would be done here.
$gender = isset( $_POST['gender'] ) ? $_POST['gender'] : null;
$color = isset( $_POST['color'] ) ? $_POST['color'] : null;
if ( $gender && $color ) {
if ( $color == 'pink' ) {
$status = 'out of stock';
}
else {
$status = 'ok';
}
// Send back JSON results.
echo json_encode( array(
'status' => $status,
'gender' => $gender,
'color' => $color
) );
}
}
?>