No Javascript Fallback for AJAX Form submission

Question

I am new to AJAX and am in the process of converting some regular HTML forms to AJAX.

My existing implementation is as follows - form (on page1.php) posts to page2.php which does some validation on post data and redirects to an error page if something is missing. If the input is fine, it includes page3.php which processes the request and redirects back to page1.php.

php/page1.php

<form method="post" action="/php/page2.php" >
   <input type="text" name="input1" placeholder="Howdy..." />
   <input type="text" name="input2" placeholder="Howdy..." />

   <input type="submit" value="Submit" />      
</form>

php/page2.php

<?php

  // perform some validation on inputs
  if (empty($_POST['input1']))
  {
     $location ='Location: /php/error.php';
     header($location);
     exit;
  }

  // Inputs are fine
  include('/php/page3.php');

?>

page3.php

<?php

  // do some form processing


  // redirect back to page1.php
  $location = 'Location: /php/page1.php";
  header($location);
  exit;
?>

To convert to AJAX, I am using @SSL's solution on this SO link How to show loading gif when request goes Ajax http://jsfiddle.net/clickthelink/Uwcuz/1/

The error from validation and success page are both displayed back on page1.php via the callback function.

php/page2.php

<?php

  // perform some validation on inputs
  if (empty($_POST['input1']))
  {
     // Echo erorr code isntead of redirect
     echo "Please enter input1";
     return;

     //$location ='Location: /php/error.php';
     //header($location);
     //exit;
  }

  // Inputs are fine
  include('/php/page3.php');

?>

page3.php

<?php

  // do some form processing

  // Echo success instead of redirect
  echo "SUCCESS";

  // redirect back to page1.php
  //$location = 'Location: /php/page1.php";
  //header($location);
  //exit;
?>

This part is working fine.

My question (finally) is how do I handle users who have javascript disabled? I know the form will get submitted appropriately but I wont get the redirect back in case of the error or success. I would like to retain header() redirect type of functionality in this case also. Is this possible? I would appreciate the help.

Answer 1

You want to detect if this is an xhr request, and default to the non-ajax behavior if it is not.

I would look at $_SERVER['HTTP_X_REQUESTED_WITH']

Answer 2

Keep your current form setup as-is, if it is working for you without javascript.

For javascript enabled browsers you can hijack the 'submit' event on the form. Capture the event and post the form, via ajax, to scripts/pages that handle and return the data in a javascript-friendly format for final consumption.

For example, using jquery:

<form method="post" action="/php/page2.php"  id="js-form" >
    <input type="text" name="input1" placeholder="Howdy..." />
    <input type="text" name="input2" placeholder="Howdy..." />
    <input type="submit" value="Submit" />      
</form>

<script>
$(document).ready(function(){
    $('#js-form').on('submit',function(e){

        // logic to submit ajax form and handle response

        // return false to cancel native browser form submission.
        return false;
    }); 
});
</script>

Another idea is to keep the pages you already have, but send a flag with the ajax request to disable the browser redirect headers. For example, add 'src=ajax' when submitting the form via ajax. Then in the script use logic to say:

<?php
    if( !empty($_REQUEST['src'] && $_REQUEST['src'] == 'ajax' ) {
        // add redirect logic here.
    }
?>