Archives for Sunday, January 20th, 2008
You are currently browsing 2 article(s) published on Sunday, January 20th, 2008, please try the search if you can't fint what you're looking for.
Submit form using ajax jQuery plug-in
Sunday, January 20, 2008
This plug-in will prevent your form's default action on submission and instead submit all data using XHR. Use it like this:
// submit the '#contact form'-form using XHR, then update the #contact-element with the response
$('#contact form').ajaxSubmit('#contact');
It will submit to the form's action using the form's method unless specified differently when calling the plug-in.
The plug-in will submit any element in the form that has a name-attribute to the URL specified in action.
The ajaxSubmit plug-in takes two arguments, the first is either a string containing a CSS-selector pointing to the element that should be updated with the response, or a custom callback-function that will run after ajax-response is ready. The response will be passed to the callback function.
The second argument is a config-object where you can set action, method and loading. They default to form's action, form's method and 'Loading...'. The loading-var is used to replace the text in the submit-button. You may wanna change to 'Sending...' or something similar if that is more appropriate.
You can get the latest version of the jQuery ajaxSubmit plug-in here.
Ok, enjoy.
- Comments are off
- Filed under Ajax, jQuery, Progressive Enhancement
Live form-validation jQuery plug-in
Sunday, January 20, 2008
This plug-in adds valid/invalid icons next to form-controls and validates them as user types.
It requires PHP for the validation so your server needs to have PHP installed.
An easy way to check if PHP is installed is to create a file (foo.php), put:
<?php
phpinfo();
?>
in it, upload it to your server and then go to the file in your browser and see what it says.
There should be a load of information if you have PHP installed.
The form-validator requires you use some common names for your form-inputs.
There's only three fields specified at the moment; 'name', 'email' and 'message'. But if you're not completely unfamiliar with PHP you should have no problem adding more of your own.
Also, if you prefer 'content' or 'comment' or something instead of 'message', simply open the FormValidator PHP-class, find the line that defines the message-validation and rename to whatever you like.
Anything passed to the FormValidator that isn't defined in the class will always return true.
Now, to validate a form using jQuery you will obviously need your HTML form (the plug-in looks for input[type="text"] and textarea) set-up, and a .js-file that initiates the plug-in:
$(document).ready(function() {
$('#contact form').liveValidation({
validIco: 'gfx/validIco.gif', // url to valid icon
invalidIco: 'gfx/invalidIco.gif', // url to invalid icon
action: 'AjaxFormValidator.php' // url to php-file
});
});
You can download a zip with the 2 required PHP-files, a couple of valid/invalid icons, an example PHP-file as well as jQuery and the live validation plug-in here. Or you can always get the latest version of the plug-in here together with the two needed PHP-files: FormValidator and AjaxFormValidator.
Have fun!
- Comments are off
- Filed under Ajax, jQuery, PHP, Progressive Enhancement
