Submit a Lightbox Form using AJAX By: Erobo Team Member
Hire a Developer for Related Work / Installation | $55 hr
Rating: | Rate It:
Average Votes: (3512)
Favorites:
In this tutorial you will learn how to submit a lightbox form using AJAX.
There are many ways to create a lightbox form using AJAX. One of them is to use the standard libraries prototype and script.aculo.us in conjuction with the lightbox effect toolkit provided in this tutorial. The first step in the assembly process is to include these three libraries and the complement js files for script.aculo.us (drag-drop.js and effects.js). After that we carefully proceed to code the form elements that are going to be submitted using AJAX. Make sure to assign an id to every input item in the form so that we can reference it later on the code. Finally, we declare the javascript code that contains the AJAX updater object. This object will use the server's response page to output the form elements submitted.
<!-- 2: Declare link to start the lighbox form -->
<a href="javascript:openbox('Title of the Form', 1, 400, 400, 400, 24)">
Click Here to Open Lightbox Form.</a>
<br>
<!-- 5: Use javascript to declare ajax updater & parameters -->
<script language="javascript">
function submitToServer(sendToServer)
{
//send result to server using ajax and request response
if(sendToServer) {
//5.1: indicate user that an ajax call have been made
var mySpan = document.getElementById("ajax_status");
mySpan.innerHTML = " <img src=\"" +
"28/images/ajax_loader.gif" +
"\" border=0> ";
//5.2: create the ajax updater object
// parameter 1: id of div to contain results
// parameter 2: the direction of server response
// parameter 3: form method type
// parameter 4: form elements
// parameter 5: evaluate scripts on submittal
// parameter 6,7: success & failure functions
new Ajax.Updater('server_response','/yourscriptsfolder/myresponse.php',{
method:'post',
parameters: $('lightbox_form_test').serialize(true),
evalScripts : true,
onSuccess: function(){
var mySpan1 = document.getElementById("ajax_status");
mySpan1.innerHTML = ""
var mySpan2 = document.getElementById("form_submitted_label");
mySpan2.innerHTML = "<font color=red>Your information" +
" has been sent.<br>" +
"<a href=\"javascript:" +
"closebox_and_reset()\">Click Here</a>" +
" to close this window.";
If your website does not use a DOCTYPE you can click here to use a version of the lightbox form script that does not require DOCTYPES. In either way, installing this script will help you to learn how to communicate with the server using AJAX. Good Luck!!