Lightbox Gone Wild – Post/Get Form Submission Issues?

I found a neat little LIGHTBOX system my boss wanted to use, which is called Lightbox Gone Wild, located at: http://particletree.com/features/lightbox-gone-wild/. Overall, this lightbox system is very easy to understand and I did not have a hard time modifying the coding to what was needed for my work. You can see an example of how a lightbox works HERE. This lightbox also uses the ‘Prototype Framework ‘ for javascript.

There was one issue that MANY seem to be having trouble with… This lightbox system does not allows a POST/GET ‘FORM’s to retrieve the data sent after clicking ‘SUBMIT’ in a form within the same lightbox instance. INSTEAD, it uses the whole window for what was sent back, thus ruining the reason to use a lightbox instance in the first place. This is an issue, becuase I wanted it to load the results of the form in the SAME lightbox instance without having the whole window load the results when I click ‘SUBMIT’. I tend to have a hard time explaining things, so if you need an example, look HERE. I made it rather simple to see/understand what I am talking about. So I started to hunt for a quick solution.

The first problem is that you CANNOT use <input type="submit" name="submit" value="Submit" /> to submit the form without having the form use the full window and ignoring the lightbox. The second issue is that when using a link to SUBMIT the data, you cannot use <a href="#" onclick="document['formname'].submit()"> to submit the data, does not work this way either. This was a definite pain!

There were several minor fixes, but none that really pleased me to use POST/GET properly. I managed to find a comment by Richard de Nys stating to use Form.serialize, which was a good idea. However, his example only was based on using one form name, thus you could not use multiple forms or different form names. I began to base my work on what was stated by him, and I came up with a pretty good solution that works dynamically with either POST or GET. It was very simple to add as well!

1. With Lightbox Gone Wild, open up lightbox.js. Find:

insert: function(e){
   link = Event.element(e).parentNode;
   Element.remove($('lbContent'));
 
   var myAjax = new Ajax.Request(
                link.href,
                {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
   );
 
},

and replace with:

insert: function(e){
    var pars = Form.serialize(Event.element(e).parentNode.id);
    link = Event.element(e).parentNode;
    Element.remove($('lbContent'));
 
    var myAjax = new Ajax.Request(
                 link.href,
                 {method: 'post', parameters: pars, onComplete: this.processInfo.bindAsEventListener(this)}
    );
 },

Simple enough so far right? Good. To use this method in your HTML/PHP file, use this as an example:

?View Code HTML4STRICT
<form id="myform" action="submit.php" method="post">
What is your first name?
<input name="first" type="text" />
<a id="myform" class="lbAction" rel="insert" href="submit.php"><button>Submit</button></a>
</form>

Please note a few things here:
1. I am not using a <form name=...>, instead, I am using a <form id=...>. This is because Form.serialize prefers a ID rather then a NAME, and since I am using it that way, using <form name=...> would be useless. For the most case I simply just changed the NAME to ID with no issues.
2. When creating the submit button using a LINK, make sure to include id="yourformname" in the link declares as well. This will link the submit link ID to the form ID. THEY NEED TO BE IDENTICAL! So if the form is: <form id="myform" action="submit.php" method="post"> — my button would be: <a href="yourfile.php" id="myform" rel="insert"><button>Submit</button></a> … If you do not do this, it will simply not be able to determine what form it needs to be grabbing the data from.

An example of this working in action can be found HERE. Please note that my example already has some additional coding such as ESC or clicking out of the lightbox to close the lightbox window as well. This should work perfectly for GET or POST form submissions just fine!

You can download the example above HERE. Hopefully this helps someone out! Please note there MAY be better ways of doing this, I am still new to all of this myself! Please feel free to post any comments below!

Share

Related posts:

  1. PHP: Multiple submit button choices in a single FORM

About the Author

I mainly focus on Javascript/PHP/C++/.NET applications for everyday and work. I also am working on a remake of Stellar Frontier, an old 2D top down space battle game with a few fellow programmers.