Icontem

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    
Last Updated Ratings Unique User Downloads Download Rankings
2016-03-24 (7 months ago) RSS 2.0 feedNot enough user ratingsTotal: 94 All time: 389 This week: 46Up
Version License JavaScript version Categories
mariana-ajax 1GNU 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

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:94
This week:0
All time:389
This week:46Up
User Comments (1)
This is a very good and useful class ;-)
7 months ago (José Filipe Lopes Santos)
80%StarStarStarStarStar