how AJAX application should behave when Javascript is disabled - common practice?

Question

I’m in the process of developing pretty basic web application, that is mostly so I could learn jQuery/ajax/php on the way (and have some fun). I want to make it as accessible to users as possible so it should work with Javascript disabled, validate to AAA and all that. With JS disabled would be of course without all the bells and whistles, but nevertheless should do the job.

I would like to make good use of Ajax, but I don’t fully understand how should I cope when JS is off.

So let’s say JS is on, user submits the form, clicks submit button and thru ajax, data is submitted to register.php (register.php is specified in forms action attribute). register.php returns data and jQuery displays appropriate message. All without reloading the page.

Now, if JS is disabled, submitting form to register.php won’t do much good.

The way I understand it, solution would be to create one php script for JS enabled, other for JS disabled. So by default form would have action attribute with nonjs_register.php, and if JS would be enabled, it would force the form to be submitted to js_register.php rather than default nonjs_register.php. I can imagine that would be quite tedious to create two scripts pages for each user interaction with the application but that’s the only way I can think of at the moment.

I hope all that makes sense but please let me know if my explanation is not quite clear. Now if anyone could explain to me what is the common practice to deal with that kind of problem that would be great.

Answer 1

Take a look at the Hijax technique, it's a way of using AJAX as a progressive enhancement.

Answer 2

The way I would deal with this sort of thing is to use an event with javascript that cancels the default action of the form. The default action of the form is to submit to a different url:

html

<form id="AjaxForm" action="/nonJS_register.php" method="POST">
   <!-- form input elements -->
</form>

js

document.getElementById("AjaxForm").onsubmit = function ()
{
     //- do ajax posting...
     ajaxPostForm();

     //- Cancel the default action of the form
     event.preventDefault();
     return false;
}

The ajax function could submit to nonJS_register or you could even just add a parameter that tells the script to return the data in a different format and not encapsulated by HTML.