The Easy jQuery Forms API Changes The Form-Posting Landscape

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

The Easy jQuery Forms API Changes The Form-Posting Landscape

Post by jack_indigo »

I tell you, now that I'm using jQuery Forms API, it's changing the landscape on forms processing. I mean, let's look at the evolution here of web server forms processing:

1. Fill out a form and post it to the server. There was a mix of people who did it by posting to a new page for processing, showing errors, and giving a link to go back and start the form again, and then the other developers were posting recursively to the same page so that you could have sort of inline error messages on each field.

2. Everyone seemed to switch to forms posting back recursively to the page that displayed them in the first place. It made the most sense.

3. And now with jQuery Forms API, it uses AJAX in a painless way. It makes form posting almost as easy as using a regular FORM post. There's no JSON parsing or anything. I just trap the submit button and tell it to do $('#myform').ajaxSubmit() and then trap the result back. So, if I have a login.php, I can use AJAX to post to a login2.php, and login2.php can be very simple. It just authenticates the user and then sends back either die('SUCCESS') or die('ERROR: ' + $sErr). My receiving page then parses for this and displays the error result, or uses location.href to switch the page. (Of course, login2.php would drop an encrypted cookie, and the main.php of the site (the main page after login) would check this encrypted cookie -- that prevents hacking URLs to end up on parts of the site without authenticating.)

So, for instance:

Code: Select all

 
<!-- I assume you included jQuery and jQuery Forms libraries -->
<script>
function AjaxSubmit(sName) {
 $('#result').html('');
 $('#' + sName).ajaxSubmit({
   success: function(data) {
      if (data.indexOf('ERROR: ') != -1) {
        data = data.split('ERROR: ').join('');
        data = '<div id="errorbox">ERROR:<br /><br />' + data + '</div>';
        $('#result').html(data);
      } else {
        if (data.indexOf('SUCCESS') != -1) {
           location.href='main.php';
        }
      } // end error or success check
   } // end success response check
 }); // end AJAX call
}
</script>
 
<form id="login" action="login2.php" method="POST" accept-charset="iso-8559-1">
  <div id="result"></div>
  User<br />
  <input type="text" name="user" id="user" size="30" maxlength="60" /><br /><br />
  Password<br />
  <input type="password" name="user" id="user" size="30" maxlength="60" /><br /><br />
  <img class="button" src="images/login.png" border="0" alt="" onClick="AjaxSubmit('login');" />
</form>
Hope you enjoy.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: The Easy jQuery Forms API Changes The Form-Posting Landscape

Post by Christopher »

Nice. Thanks for the example.
(#10850)
Post Reply