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:
1 2 3 4 5 6 7 | 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:
1 2 3 4 5 6 7 8 9 | 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.
Do you have a demo page where we can actually see it? Otherwise, no way to figure out how you did it.
Sure, check out the demo at: http://tualatinchamber.com/repeated.html