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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Blog Tags

Recent Posts

Blog Directory & Business Pages at OnToplist.com