JS Submit Form Data: Submit forms using AJAX requests

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 69 All time: 474 This week: 2Up
Version License JavaScript version Categories
submit-form-data 1.0.0GNU General Publi...1.0HTML, AJAX, Forms
Description 

Author

Everton da Rosa

This object can submit forms using AJAX requests.

It can take a form object in the current page and sends an AJAX request to submit the form with its current values.

An optional progress variable may be passed so it gets update with how much of the form data was submitted.

Picture of Everton da Rosa
  Performance   Level  
Name: Everton da Rosa <contact>
Classes: 7 packages by
Country: Brazil Brazil
Age: 43
All time rank: 506 in Brazil Brazil
Week rank: 6 Up1 in Brazil Brazil Up

Level 2 StarStar

 Innovation award
Innovation award
Nominee: 3x

Winner: 3x

Example

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>FormDataSender :: envie dados de formulário com AJAX, inclusive arquivos.</title>
        
        <script type="text/javascript" src="formdatasender.js"></script>
        
        <script type="text/javascript">
        window.addEventListener('load', function(evt){
            document.getElementById('test').addEventListener('submit', function(evt){
                evt.preventDefault();
                var sender = new FormDataSender(document.getElementById('test'), document.getElementById('progress'));
            });
        });
        </script>
    </head>
    <body>
        <form id="test" action="process.php" method="post" enctype="multipart/form-data">
            
            <div>
                <progress id="progress" value="0" min="0" max="100"></progress>
            </div>
            
            <div>
                <label>Text field</label>
                <input type="text" name="textfield" value="Sample text">
            </div>
            
            <div>
                <label>Number field</label>
                <input type="number" name="numberfield" value="10">
            </div>
            
            <div>
                <label>File field</label>
                <input type="file" name="filefield">
            </div>
            
            <div>
                <button type="submit">Send</button>
                <button type="reset">Clear</button>
            </div>
        </form>
    </body>
</html>

  Files folder image Files (3)  
File Role Description
Plain text file formdatasender.js Class Main class file
Accessible without login Plain text file index.php Example Example of use
Accessible without login Plain text file process.php Data Auxiliary file

Downloadsubmit-form-data-2015-05-19.zip 1KB
Downloadsubmit-form-data-2015-05-19.tar.gz 1KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:69
This week:0
All time:474
This week:2Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.