Award-winning web development since 1995
Written: June 26, 2011
My client hosts several conferences each year and the registration process for one site had some interesting requirements:
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.
Tags: AJAX, conference, form, registration
©2018 Tualatin Web LLC. All rights reserved. |
Payment |
Web Hosting |
