Ajax Form Submit Example

Author: Simone Rodriguez
Original article (in Italian): Ajax Form Submit
Script source: Dowload here


An easy way to send a form without reloading the page. Build the form tag in the same way the example do.

1. In the head section (<head>) add the reference to the JS script:

    <script src="js/ajaxsbmt.js" type="text/javascript"></script>

2. In the form tag (<form>) add the event onsubmit and the call to xmlhttpPost function:

    <form name="MyForm" action="response_normal.php" method="post" onsubmit="xmlhttpPost('response_ajax.php, 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>'); return false;">

3. Manage the received data like a normal form

Test the script

Source Code (Form sender page):

<script src="js/ajaxsbmt.js" type="text/javascript"></script> <form name="MyForm" action="response_normal.php" method="post" onsubmit="xmlhttpPost('response_ajax.php', 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>'); return false;"> <input name="sample_text" type="text" value="Test Text" /> <br /> <label> <textarea name="textarea" id="textarea" cols="45" rows="5">Test Textarea</textarea> </label> <label> <br /> <input name="checkbox" type="checkbox" id="checkbox" value="True" /> </label> <br /> <input type="radio" name="radio" value="radio1" /> <input type="radio" name="radio" value="radio2" /> <input type="radio" name="radio" value="radio3" /> <br /> <select name="List"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </select> <br /> <input name="send_button" type="submit" value="Send" /> </form> <div id="MyResult"></div>