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!

score 5 · Accepted Answer · answered Mar 29 '12 at 23:12

5

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.

answered Mar 29 '12 at 23:12

Kristian

21,204
19
101
176

1

Hmm ok that helps, but now I have a small question: The PHP file that the AJAX request goes to only outputs what happened and returns it back to form page to display success/error to the user. Will I have to have a near-duplicate of my code for every form page (so I have 1 to work with AJAX and one to work with normal stuff)? – Jacob Brunson Mar 29 '12 at 23:15
1

thats a very good question. typically I see devs write a wrapper in their PHP that will know if its being called by ajax, and output ajax results instead if so.. that way you don't need two whole endpoints. if you come up with a different / better solution to this, write about it and share it -- "duplicate code" is also a hot issue. – Kristian Mar 29 '12 at 23:17
Well ok, thank you. :D Is there an easy way I can tell if it's being called from AJAX? (i.e. if ($_POST['ajax'])) or something – Jacob Brunson Mar 29 '12 at 23:20
Old post, but as for an easier way, I tack on a variable in the ajax call, and check if the variable is set in the PHP. – Matthew Johnson Dec 03 '13 at 03:25
'then override it with your jquery' how to do this? EDIT: if anyone is looking for answer, you do NOT have to do anything extra to override. If JS is enabled Jquery will work, or else form action will send non ajax to server. – avi Jun 19 '14 at 16:28

score 1 · Answer 2 · answered Mar 29 '12 at 23:13

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.

score 1 · Answer 3 · answered Mar 29 '12 at 23:14

1

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.

answered Mar 29 '12 at 23:14

ianaldo21

679
4
10

gilly3 · Answer 4 · 2012-03-30T23:07:45.883

1

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.

edited Mar 30 '12 at 23:07

answered Mar 29 '12 at 23:19

gilly3

87,962
25
144
176

I'm not familiar with ajaxForm, how url and data ( if i need serialize) will be passed ? – The Alpha Mar 29 '12 at 23:22
@SheikhHeera - Url is specified as the `action` attribute of the `
`. Data is specified with `` controls (and ``. Remember, this will work the same (from the server's perspective) as it would if JavaScript was disabled. So, if you know how to submit a form without JavaScript, there's not much more to do it with JavaScript. Make sure to check out the [plugin's web site](http://jquery.malsup.com/form/) for documentation and advanced functionality.
– gilly3 Mar 29 '12 at 23:32
Oh ! thanks, it's a plugin I thought it's something new in latest version of jQuery but actually it's my fault that I didn't read the whole answer. Thanks again for the answer, I'guess I've killed your precious time. :-) – The Alpha Mar 29 '12 at 23:38

score 1 · Answer 5 · answered Mar 29 '12 at 23:20

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.

score 0 · Answer 6 · edited Sep 28 '12 at 06:59

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);
  }
});

score 0 · Answer 7 · answered Mar 29 '12 at 23:12

0

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.

answered Mar 29 '12 at 23:12

Waynn Lue

11,344
8
51
76

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

7 Answers7

Linked