My client hosts several conferences each year and the registration process for one site had some interesting requirements:
- Registrants could attend four sessions and during each session there were two speaker choices.
- 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)? "&"+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 && (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.
