<?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="">&lt;select&gt;</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">&nbsp;</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
    ) );
  }
}
?>