How to create nested forms.

Update: December 6, 2015 – Fixed several bugs in the code.

Even though I write this article with the perspective on a plugin for WordPress the solution can used anywhere. The example I’ll use to explain how to create a form within a form, aka nested forms, will have no direct links to WordPress but will merely show how to create a form within a form.

For my AVH Amazon plugin I wanted to add a metabox with a form on the Post and Page pages. The purpose of the metabox was to give the user the ability to create the shortcode without having to remember, and type for that matter, all the options.

I wanted users to have the ability to look up their wishlist, show them a the items on their wishlist and give them the option to select one. The problem with this is not so much the form itself, that is pretty straight forward, but the Post and Page pages are almost completely wrapped in a form. The metabox resides with in that form and by design you can’t have a form inside a form in HTML.
It was jQuery, the awesome javascript framework, that bailed me out.

Read the rest of this entry »

Dynamically enable/disable checkboxes in a form.

For a project I’m working on I need a way to disable/enable checkboxes in a form based on which option the user selects from a dropdown list. The easy way would have been to split it up in two forms, the user selects the option from the dropdown list, submits the form and the page reloads and shows the appropriate checkboxes but that’s not what I wanted, it should be dynamic. I knew I had to look at javascript to get this done.

For this example I’ll do everything inline and not use separate files.

Read the rest of this entry »

Lightbox implementation, first steps into AJAX.

I try to help with the website getdeb.net and part of it was getting rid of a popup we show for showing an image.
I knew what it was what I wanted but didn’t know what it was called, well after some searching I found out it’s called a lightbox (DUH). So called for the resemblance of the real lightbox used in photography.

As my programming skills in javascript aren’t that good I have to rely on some already made ones. And so I entered the world of javascript frameworks, there are several out there and everybody claims the one they use is the best, of course. As I won’t be doing programming myself I could care less which framework my to be implemented lightbox was using. Now that’s not entirely true because I’m sure as we start using the lightbox we’ll probably want to add different features in AJAX as well. I settled on using protoype.js and scriptaculous.js as the framework. It seems to highly popular and so I’ll probably be able to find some nice scripts that utilizes this framework.

It isn’t an easy task as there are more lightbox implementations as there are ways to design one and I’m still checking some of them out. I started with something called beatbox which looked great but as we use dynamic graphics I had to hack the script a bit. At the moment I’m using Lightwindow 2.0 and it seems to be very powerful, maybe to much for our needs at this time. Another one I will try out is Lightbox 2.0

I have to admit, the more I’m looking into AJAX the more I’m beginning to like it but I should stop myself from over using AJAX, which is very easily done.

download