jQuery AJAX Forms: Make a form be submitted via AJAX using jQuery

Recommend this page to a friend!
  Info   View files Example   View files View files (5)   DownloadInstall with Composer Download .zip   Reputation   Support forum (1)   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 114 All time: 393 This week: 3Up
Version License JavaScript version Categories
mariana-ajax 2GNU Free Document...1.0jQuery, Forms
Collaborate with this project Author

mariana-ajax-forms - github.com

Description

This is a simple object that can make form be submitted via AJAX using jQuery.

It adds an event handler to all form elements on a page to handle the submit event so the form values are submitted using AJAX requests.

The forms can define additional attributes to specify the code to be executed when the before the form is submitted, after is submitted and the response is retrieved.

Other attributes are retrieved from the form element to use during the AJAX request like the action URL and encoding type.

Picture of Filipe Sá
Name: Filipe Sá <contact>
Classes: 1 package by
Country: Portugal Portugal
Age: ???
All time rank: 1552 in Portugal Portugal
Week rank: 6 Up1 in Portugal Portugal Up

Details

auto-ajax-form

Form that is submited via ajax call without the programmer having to code the entire ajax request.

Example:

<form id='ajax-form' ajax="true" action="ajax-call.php" type="POST" success="callback(data)" complete="callback2(data)">

<input name="input1" type="text" />
<input name="file1" type="file" />
<button type="submit" >Submit</button>

</form>

<script>

var callback = function(data){
	console.log(data);
}

var callback2 = function(data){
	console.log('second callback');
}

</script>

Code explained:

  • Each form has to have an individual id ( currently working on removing this feature ).
  • If ajax="true" it will send the request via ajax
  • Code injections: Currently you can inject success="function(data)" (runs a function with the data of the ajax call ), complete="function(data)"

Sugestions and improvements:

  • Feel free to talk to me in pihh.rocks@gmail.com for any sugestion or improvement.
  Files folder image Files  
File Role Description
Files folder imagejs (1 file)
Accessible without login Plain text file ajax.php Data example php file
Accessible without login Plain text file index.html Example example html
Accessible without login Plain text file LICENSE Lic. License
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  js  
File Role Description
  Plain text file marianaAjax.js Class script file

 Version Control Unique User Downloads Download Rankings  
 100%
Total:114
This week:0
All time:393
This week:3Up
User Comments (1)
This is a very good and useful class ;-)
6 years ago (José Filipe Lopes Santos)
80%StarStarStarStarStar