Written: December 16, 2010

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:
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.

Tags: ,

2 responses to “Expanding Forms with Ajax”

  1. Anonymous says:

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

  2. Daniel Payne says:

    Sure, check out the demo at: http://tualatinchamber.com/repeated.html

Leave a Reply

Your email address will not be published. Required fields are marked *

Changing Page Content without Reloading the Full Page

My client Santa Cruz Veterinary Hospital wanted to show several pages worth of information and I decided to use links on the right hand side that would dynamically load content into the center column:

Normally when you click a web page link then your browser blinks and you wait while new content is loaded. Using Ajax I was able to have only the center part of the page update when a link is clicked. Here’s the HTML for the link code:

I’m calling a javascript function named “ajaxpage” and passing it two fields:

This javascript is defined in my file ajax-page.js which you can read and re-use. I got it initally from www.dynamicdrive.com , a great resource.

In the center of my page I have a DIV statement where new content gets loaded into:

You may have noticed that this page uses Tables and are asking yourselves, “Why is Daniel still using tables in the era of CSS?”
Simple answer, I took over this site from another web developer and didn’t want to re-factor it and remove all tabels. Tables work, CSS works, use them both as needed.

Tags: ,

2 responses to “Changing Page Content without Reloading the Full Page”

  1. Les says:

    Hi
    I tried to view your file ajax-page.js but it comes up as page not found when you click it. Can’t seem to find it on dynamicdrive either. Would you be able to email me a copy of this so I can try and adapt for my own situ?

    Thanks.

  2. Daniel Payne says:

    Here’s the code:

    [code]
    /***********************************************
    * Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
    var loadedobjects=””
    var rootdomain=”http://”+window.location.hostname
    var bustcacheparameter=””

    function ajaxpage(url, containerid){
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
    try {
    page_request = new ActiveXObject(“Msxml2.XMLHTTP”)
    }
    catch (e){
    try{
    page_request = new ActiveXObject(“Microsoft.XMLHTTP”)
    }
    catch (e){}
    }
    }
    else
    return false
    page_request.onreadystatechange=function(){
    loadpage(page_request, containerid)
    }
    if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf(“?”)!=-1)? “&”+new Date().getTime() : “?”+new Date().getTime()
    page_request.open(‘GET’, url+bustcacheparameter, true)
    page_request.send(null)
    }

    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf(“http”)==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }

    function loadobjs(){
    if (!document.getElementById)
    return
    for (i=0; i

Leave a Reply

Your email address will not be published. Required fields are marked *

Blog Tags

Recent Posts

Blog Directory & Business Pages at OnToplist.com