How to use ajax-forms

A very light jQuery plugin

I needed a way to quickly prototype some Ajax-based form managers, so I built some examples. This as good a starting point as any for building your own. Download Here: ajax-forms-master.zip. Plugin: ajax-forms.js

The Files

Files

This example has 3 files (not including jquery and bootstrap). The first file: index.html is this file. The forms in this page are submitted to dest.html (with the exception of one, below). The final.html file is a 'final' location to be navigated-to after a successful submission

• index.html
• dest.html
• final.html

Setup

In order to setup for examples in this page, I've added the following code to this and dest.html. As you can see, the ID attirbute (for both) is 'data.'

Replacing Page components from form results

Clicking the 'Replace Data' button will replace the #data section above with the contents of the same element from dest.html page. Obviously, this is a static page, but your server may return customized. I'm using the data-replace to trigger this effect.

<form action="dest.html" method="POST" data-replace="#data">
	<input type="submit" value="Replace Data">
</form>
				

Clicking the 'Reset Data' button will replace the #data section above with the contents of the same element from index.html page. Since this is index.html, this essentially resets the value of the element. I'm using the data-replace attribute to trigger this effect

<form action="index.html" method="POST" data-replace="#data">
	<input type="submit" value="Reset Data">
</form>
				

Replacing other page components from form results

Clicking the 'Replace Other Data' button will replace the #data-modified section to the right with the contents of the same element from dest.html page. I'm using the data-append-from and data-append-to options to make this work.

				<div id="data-modified">
					(Other Data)
				</div>
				<form action="dest.html" method="POST" data-append-from="#data" data-append-to="#data-modified">
					<input type="submit" value="Replace Other Data">
				</form>
				

Clicking the 'Reset Other Data' button will reload from this page's unmodified source. I'm using the data-replace atttribute to trigger this effect.

<form action="index.html" method="POST" data-replace="#data-modified">
	<input type="submit" value="Reset Other Data">
</form>
				

Navigating on Redirect

Sometimes, its important to load a different page after a request. In such a case, using the data-navigate-to option will trigger navigation on successful completion. Apparently, there's no way to detect if the ajax-retrieved page is, itself a redirect, so some server-side support may be required to respond in a useful way. This is probably the lease useful option

<form action="dest.html" method="POST" data-navigate-to="final.html">
	<input type="submit" value="Post &amp; Navigate">
</form>