Products
Services
Contact Us

Scripts: Javascript :: Ajax functions :: Library Article #28

Developer's Section

Submit a Lightbox Form using AJAX
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (2429)
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.

Example:

Click Here to Open Lightbox Form.

See your Ajax Form Results Below:



Now, let's take a look at the code:

 Code Snippet 1

<!-- 1: Include ajax libraries and lightbox form effects js & css --> 
<link type="text/css" rel="stylesheet" 
href="/yourscriptsfolder/lightbox-form.css">

<script type="text/javascript" 
src="/yourscriptsfolder/lightbox-form.js" ></script>
<script type="text/javascript" 
src="/yourscriptsfolder/prototype.js"></script> 
<script type="text/javascript" 
src="/yourscriptsfolder/scriptaculous.js"></script> 

<!-- 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>

<!-- 3: Declare lighbox form html properties --> 
<div id="boxcontainer" style="display:none;width:400px">
  <span id="boxtitle"></span>
  <form method="POST" ID="lightbox_form_test" name="lightbox_form_test">
    <br><br> 
    <span id="form_submitted_label"></span>
    <p>Your home address: 
      <input type="text" name="residency_address" value="" 
      maxlength="45" size="45" onclick="this.focus()" id="l_f_1">
    </p>
      
    <p>House
      <input type="radio" name="residency_type" value="House"
      checked  id="l_f_2">

      Apartment 
      <input type="radio" name="residency_type" value="Apartment"  id="l_f_3">
    </p>
      
    <p> Your Favorite House Room
      <select name="residency_favorite"  id="l_f_4" >
        <option selected>Kitchen</option>
        <option>Rest Room</option>
        <option>Tv Room</option>

        <option>Living Room</option>
        <option>Drawing Room</option>
      </select>
    </p>
    <p><span id="ajax_status"></span>
      <input type="button" name="submit" value="Submit" 
       onclick="submitToServer(true)" ID="Button1">
      <input type="button" name="cancel" value="Cancel" 
       onClick="closebox()" ID="Button2">
    </p>

  </form>
</div>
 
<!-- 4: Declare a div to contain the results from the server's response --> 
<p> See your Ajax Form Results Below:</p>

<div id="server_response" name="server_response"></div> 

<!-- 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.";
      
    },  
    onFailure : function(){   
      alert("Something went wrong...");  
    }  
    });      
  } 
}       

function closebox_and_reset(){
   //reset form status
   document.getElementById("form_submitted_label").innerHTML = ""; 
   document.getElementById("l_f_1").value = "";
   document.getElementById("l_f_2").checked = false;
   document.getElementById("l_f_3").checked = false;
   document.getElementById("l_f_4").selectedIndex = -1;
   closebox(); //close box after resetting.

}

</script>


Next, we create the server's response page (myserverresponse.php):

 Code Snippet 2

<body>

<div id="frm_results" style="border:1px solid red">
<?php
  echo "<b><font color=red>Answers to questions";
  echo " submitted to the Server:";
  echo "</font></b><br>";
  echo "<b>1-</b> Residency Address: ";
  echo $_POST["residency_address"] . "<br>";
  echo "<b>2-</b> Residency Type: ";
  echo $_POST["residency_type"] . "<br>";
  echo "<b>3-</b> Favorite House Room: ";
  echo $_POST["residency_favorite"] ."<br>";
?>
</div>

</body>



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!!

Downloads
lightbox-form.js1 KB
lightbox-form.css0.7 KB
prototype.js121.1 KB
scriptaculous.js2.6 KB
dragdrop.js31.8 KB
effects.js39.2 KB
result_form.php0.1 KB
ajax_loader.gif3.6 KB
 

See other Scripts in Ajax functions

 

Submit Your Scripts:


System Message:
  • Your Javascript script has been sent. Please allow 48 hours for processing.


If you would like to have your Javascripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Email:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]