DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Kevin has posted 4 posts at DZone. View Full User Profile

Convert All Forms On A Page To Be AJAX Forms Using JQuery

01.27.2009
| 5108 views |
  • submit to reddit
        1) Create the standard forms as desired
2) Include the jQuery and the jQuery Form Plugin script references in your html head tag
3) In the jQuery document ready handler bind a listener to all of the <input type=button> elements' click event
4) The click listener should call the ajaxSubmit() command that comes with the jQuery Form Plugin

--form.html--

<html>
  <head>
	<script type="text/javascript" src="jquery-1.3.1.js"></script>
	<script type="text/javascript" src="jquery.form.js"></script>
	
	<script>
	   	$(document).ready(function(){
		 $('input[type=button]').bind('click',function(event){
		    $(this.form).ajaxSubmit({target: $('#response')});	
		 })
		}); 
	</script>
  </head>
<body>
	<form id="ajaxform" method="POST" action="response.html">
	   <input type="text" id="mytest" name="mytest/">
	   <input type="text" id="mytest2" name="mytest2/">
	
	   <input type="button" id="ajaxsubmit" class="button" value="Ajax Submit"/>
	</form>	
	
	<form id="someRandomform" method="POST" action="response.html">
	   <input type="text" id="mytest" name="mytest/">
	   <input type="text" id="mytest2" name="mytest2/">
	
	   <input type="button" id="ajaxsubmit" class="button" value="Ajax Submit"/>
	</form>
	
	<div id="response"></div>
	
</body>

--response.html--

this is the response!!!