Written: June 26, 2011

Registration Form with a Variable Number of Attendees plus Four Session Choices per Attendee

My client hosts several conferences each year and the registration process for one site had some interesting requirements:

  1. Registrants could attend four sessions and during each session there were two speaker choices.
  2. One person could register up to five additional attendees

One idea was to collect the basic information on page one, then present another form on page two for additional attendees and their session choices. I opted instead to keep a single page to gather registration info to keep it simple. Here’s a video summary of what a web visitor would see when they register for the conference:

Developer Details

In the HEAD section of my page I added a Javascript file with the AJAX function:

1
<script type="text/javascript" src="ajax-page.js"></script>

This file ajax-page.js is provided by Dynamic Drive:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// JavaScript Document
/***********************************************
* 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)
}<br /><br />
if (bustcachevar) //if bust caching of external page<br /><br />
bustcacheparameter=(url.indexOf("?")!=-1)? "&#038;"+new Date().getTime() : "?"+new Date().getTime()<br /><br />
page_request.open('GET', url+bustcacheparameter, true)<br /><br />
page_request.send(null)<br /><br />
}</p>
<p>function loadpage(page_request, containerid){<br /><br />
if (page_request.readyState == 4 &#038;& (page_request.status==200 || window.location.href.indexOf("http")==-1))<br /><br />
document.getElementById(containerid).innerHTML=page_request.responseText<br /><br />
}</p>
<p>function loadobjs(){<br /><br />
if (!document.getElementById)<br /><br />
return<br /><br />
for (i=0; i<arguments.length; i++){<br /><br />
var file=arguments[i]<br /><br />
var fileref=""<br /><br />
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding<br /><br />
if (file.indexOf(".js")!=-1){ //If object is a js file<br /><br />
fileref=document.createElement('script')<br /><br />
fileref.setAttribute("type","text/javascript");<br /><br />
fileref.setAttribute("src", file);<br /><br />
}<br /><br />
else if (file.indexOf(".css")!=-1){ //If object is a css file<br /><br />
fileref=document.createElement("link")<br /><br />
fileref.setAttribute("rel", "stylesheet");<br /><br />
fileref.setAttribute("type", "text/css");<br /><br />
fileref.setAttribute("href", file);<br /><br />
}<br /><br />
}<br /><br />
if (fileref!=""){<br /><br />
document.getElementsByTagName("head").item(0).appendChild(fileref)<br /><br />
loadedobjects+=file+" " //Remember this object as being already added to page<br /><br />
}<br /><br />
}<br /><br />
}<br /><br />

My registration form has radio buttons for the attendee to choose their type of registration and here is where I add some Javascript to take action when the button is clicked:

1
2
3
4
5
6
7
8
<p><strong>Conference Pass</strong></p>
<p><input type="radio" name="conference"  value="Member" onclick="update_price(this.form);my_sessions(this.form);"/> $359 Member<br /><br />
            <em> ($459 less $100 in supporting funds from the Pacific Printing Industries Educational Trust)</em></p>
<p><input type="radio" name="conference"  value="Non-Member" onclick="update_price(this.form);my_sessions(this.form);"/> $599 Non-Member</p>
<p><input type="radio" name="conference"  value="None" onclick="update_price(this.form);my_sessions(this.form);"/> None </p>
<div id='my-sessions'>
                <!-- ajax: my_sessions.php -->
            </div>

Line two is where clicking the radio button calls the Javascript function my_sessions(this.form). This function will find out which radio button was clicked and then dynamically call a PHP page using AJAX. The results of the AJAX call will be to fill up the DIV statement named ‘my-sessions’ with new content.

1
2
3
4
5
6
7
8
9
function my_sessions(f) { // My conference session choices
    choice = 'None';
    for (i=0; i<3; i++) { // Which radiobutton was checked?
        if (f.conference[i].checked) {
            choice = f.conference[i].value;
        }
    }
    ajaxpage('my_sessions.php?conference='+choice,'my-sessions'); // Member, Non-Member, None
}

my_sessions calls a PHP file named my_sessions.php and passes along one variable named ‘conference’ with the value of the checked radio button. The function ajaxpage is defined in the file ajax-page.js which was included above. The second value passed to ajaxpage is ‘my-sessions’ which is the DIV where the new content is sent to.

Tags: , , ,

Leave a Reply

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

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 *

Dynamic Content

My client at Santa Cruz Veterinary Hospital wanted to show several slide images and text inside of an existing page, so I used dynamic content with Javascript to make it work. Visitors just move their mouse over a slide number to see a new photo and read text. See the live results here.

I’m using AJAX techniques more often to display dynamic page content without having to reload pages.

Tags: ,

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