Make jQuery AJAX have a non-javascript (non-ajax) fallback?

Question

I've gotten a fair amount of work done on my latest project, but I've realized there's a bit of a problem: If you don't have a Javascript-enabled browser, you can't submit any forms because every form uses AJAX to submit it.

My question to you all: How can I implement some sort of "fallback" so that if they don't have Javascript enabled, they can still submit the form.

Currently I have a banner along the header that says "For the optimal (and by "optimal," we mean "actually working") experience, please enable Javascript in your browser." but that seems like less than the optimal solution.

Thanks!

Answer 1

For a form, you need to supply method and action attributes to the form tag that contains your inputs. Then actually make it submit there via a submit button. Once that works, then override it with your jquery. Et voila.

This is the big thing about progressive web, you can develop pages that work without javascript. One practical way to solve any problem is to figure out what you'd have needed to do if you never used JS in the first place.

Many developers out there don't believe you should even have a fallback though... its seems to be a hot ideological debate.

Answer 2

Of course. Clearly you have something on the back end processing the data sent via AJAX. It shouldn't be a huge hassle to setup your forms such that they send data (generally via a POST) to the same place. Your form would look something like:

<form action="yourscript" method="POST">
    <input ... />
</form>

Then a user without javascript submits the form via a direct HTTP request and a user with javascript has the action intercepted by jQuery.

Answer 3

Write the HTML first (this is your fallback) and make sure that works with form submission, then add the jQuery on top, that way, if your user doesn't have javascript enabled, the form will still work.

Answer 4

HTML

<form action="yourscript" method="POST">
    <input ... />
</form>

JS

$('form').submit(function(e){    
    var form=$(this);
    var form_url=form.attr('action');
    $.ajax({
        url: form_url,
        success: function(data){}
    });
});

If javascript is enabled it'll be submitted through ajax, otherwise will be normally.

Answer 5

One of my favorite plugins is the jQuery Form Plugin. This allows for elegently simple graceful degredation. Just set up your form as if you were writing a non-JavaScript site. (Set up your server to support it as well.) Then, use the form plugin to override the default behavior, without duplicating code or logic to set it up. If JavaScript is enabled, you get the AJAX functionality, otherwise the default functionality remains in place:

<form name="search" action="/search/" method="GET">
    <input name="responseFormat" value="fullHTML" />
    <input name="q" />
    <input type="submit" value="Search" />
</form>

document.search.responseFormat.value = "json";
$(document.search).ajaxForm({
    dataType: "json",
    success: function (data, status, xhr) {
        ...
    },
    error: function (xhr, status, message) {
        ...
    }
});

The url, method, and values to submit are all retrieved by the form plugin from the HTML automatically. The server knows to return just JSON instead of the full HTML page because you modified the responseFormat hidden field value to json with JavaScript.

Answer 6

The easiest way is to have a submit button in a form, then trigger the Javascript when the button is pushed. If Javascript isn't enabled, it'll just submit regularly. If it is, it'll run the Javascript.

Answer 7

I like to use an iframe, rather than sending non javascript users into the depths of my theme files. That way they can stay on the page they were on too. You just add the "target" attribute to your form. You can also easily distinguish if you are using AJAX by just adding another parameter to the data that you pass in your JS...

var data = form.serialize()+'&ajax=true';
$.ajax({
  type: 'POST',
  url: 'email.php',
  data: data,
  success: function(response){
  alert(response);
  }
});