Blog

Expanding Forms with Ajax

I added a new feature to the Tualatin Chamber of Commerce web site that allows them to schedule events that are repeating, saving time by typing less. To make an event repeated they first click on a checkbox:

Clicking the checkbox calls Ajax to dynamically insert new content into the form without refreshing the page:
They now have three choices for the repeated event: Weekly, Monthly or Yearly. Here’s the Monthly repeated event:
Finally, the yearly repeated event:
I’m using Ajax code from Dynamic Drive, my source is at http://www.tualatinchamber.com/ajax-page.js The Javascript for the Checkbox is: 
function repeatedCheck(form) { // Is this a repeated event?
	if (form.repeated.checked == true) { // This is a repeated event
		ajaxpage('add_event_weekly.php','repeated-events');
	} else { // This is not a repeated event
		ajaxpage('add_event_none.php','repeated-events');
	}
}
Each of the radio buttons has some Javascript too: 
function recurrenceChanged(form) { // Weekly, Monthly, Yearly
	if (form.recurrence[0].checked) { // Weekly
		ajaxpage('add_recur_weekly.php','repeated-weekly');
	} else if (form.recurrence[1].checked) { // Monthly
		ajaxpage('add_recur_monthly.php','repeated-weekly');
	} else if (form.recurrence[2].checked) { // Yearly
		ajaxpage('add_recur_yearly.php','repeated-weekly');
	}
}

My HTML code is style with one DIV statement with id=”repeated-events”

 

Once that DIV gets filled in, each of the three radio buttons writes to another DIV with id=”repeated-weekly.

 

I tend to re-use the same Ajax code on every project where I want my pages to become dynamic and not re-load so much.
Have fun making your forms dynamic and easier for visitors to get their job done in less clicks.

Tags: ,

This Post Has 2 Comments

  1. Anonymous May 25, 2011 Reply

    Do you have a demo page where we can actually see it? Otherwise, no way to figure out how you did it.

Leave a Reply