Tag Archives: form

How to allow File Uploads when using jQuery Mobile CodeUnit 16 DEC 2011

With the release of the powerful jQuery Mobile 1.0 framework, it is now becomes possible for pretty much anyone to crank out an uber slick HTML 5 website that looks like a ‘native app’ on just about any mobile device.

However, one of the things that does break on implementation is the trusty old form file upload element, the result of the nifty AJAX-driven page load system that jQuery Mobile uses. (AJAX doesn’t allow file transfers as a security feature).

Luckily for us though, there is a way to re-enable form file uploads with the only sacrifice being the slick page load, which when you think of it, isn’t such a big sacrifice now that you have the ability to launch files up to your web service once more!

In short, what we want to do is instruct the jQuery Mobile framework to not process the form submit event as an AJAX call. To do this, the following “data-ajax” element property needs to be added to your form declaration:

<form method=”POST” enctype=”multipart/form-data” action=”process_update.php” data-ajax=”false”>

Simple as that.

jQuery: How to Post a Form’s data with Ajax CodeUnit 11 FEB 2010

Ajax posts (or gets) using jQuery is a pretty simple affair, and so I’m not really going into that with this particular post.

Rather, I want to highlight just how easily one can post all of a form’s various values (housed in textboxes, text areas, selects or even radio buttons) to a specific jQuery ajax function call.

So let us examine the working  example below:

$.post('form_post_handler_script.php',$('#yourform').find(":input").serializeArray(),function (data, textStatus){

As you can see, we are using the nifty jQuery deprecated $.post() function to handle the actual POST push. The first parameter passed to it is the actual processing page the function needs to push the data to. The last parameter is simply the callback function, which is in this case doing nothing other than alerting the result of the ajax call). That leaves the interesting one, the actual data parameter that currently sits slap bang in the middle of that function call.

We can break down what is happening into three steps. Remember the $.post function expects data to be fed to it in the JSON format, which if you look around at examples on the web, is most often simply scripted by hand. However, this time around we’re going to let jQuery do the work for us!

The first part is the initial location of the form object, this time selected using its unique ID, in other words $(‘#yourform’) where yourform is the id of the form. Then we chain on a find(‘:input’) command that grabs all elements obeying the :input selector found within the initial object result. Finally, these are then converted to JSON format using the nifty serializeArray function, in other words completing the initial task of providing the post function with the data in the format it so craves.

And that’s it. Populating your ajax post push with your form’s values couldn’t get any simpler if it tried! :)