Thursday, November 20, 2008

Submit form on same page using AJAX

http://www.simonerodriguez.com/ajax-form-submit-example/

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 () add the reference to the JS script:
http://www.simonerodriguez.com/ajax-form-submit-example/js/ajaxsbmt.js

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

* The first parameter (response_ajax.asp) is the page the will receive the data.
* The second parameter (MyForm) is the NAME of the form.
* The third parameter (MyResult) is the ID of the DIV that will display the "wait message" and the form response.
* The forth parameter () is the waiting message (should be also HTML code)

3. Manage the received data like a normal form

Source Code (Form sender page):





Source Code (Form sender page):

<script src="js/ajaxsbmt.js" type="text/javascript"></script> <form name="MyForm" action="response_normal.asp" method="post" onsubmit="xmlhttpPost('response_ajax.asp', '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>

No comments: