Okay, so for people who are javascript heroes, what I'm going to write about is ridiculously lame.  But I think it's cool.

Yesterday, I was working on an application for a client.  Part of it needed to use the fancy lightbox feature for images.  But on top of this, the client wanted to be able to not only place captions on the lightbox images, but also make elements of the caption linkable.  

This is not hard, but for those not used to writing HTML, much less nested HTML, this can be a challenge–definitely not user-friendly from a client's perspective.  The easy solution was to provide a "template" that the user could copy, paste and alter as needed.  Unfortunately, this is not a very good solution as slight mistakes can cause terrible problems which are not easily resolved by those who don't know how to fix it, much less what the problem actually is.

So I set out for another solution.  I've always admired WYSIWYG editors in that they allow users to easily add complex bits of code (like <a> tags with multiple attributes) through a form, which itself inserts the complied code into another form.  Always intimidated by javascript, I thought this would be very difficult to do. However, my needs overshadowed my trepedation, and so I set forth on this glorious crusade.

What I found is that the entire process was extremely EASY.  For some reason, I half-expected that this kind of functionality requires a very advanced level of familiarity with Javascript.  To the contrary, however, it only requires 1.) that one know how to access form fields from Javascript, 2.) that one know how to concatenate strings into valid HTML equivalents in Javascript and 3.) that one know how to send this compiled information to another form field.  

Needless to say, these things are not difficult at all, and after only a few minutes, I had custom solution for my client that would handle the compliation of marginally complex HTML without the client needing to touch any code at all.

Here's what I did.

First, to separate out the peices a bit, I loaded the Javascript form and processing into a pop-up window.

Here's the code, in all its glory:

 

<script type="text/javascript">
    function sendToPage() {
        var myForm = document.forms[0];
        var lImage = myForm.largeimage.value;
        var sImage = myForm.smallimage.value;
        var title  = myForm.linktitle.value;
        var titleLink = myForm.titlelink.value;
        var lBox = myForm.lightbox.value;
        var tHeight = myForm.thumbheight.value;
        var tWidth = myForm.thumbwidth.value;
        var imgTitle = myForm.imagetitle.value;
       
        titleString = "<a href='" + titleLink + "'" + ">" + title + "</a>";
        aString = "<a href='" + lImage + "'" + " rel='lightbox[" + lBox + "]'" + " title=\"" + titleString + "\"" + ">";
        bString = "<img src='" + sImage + "'" + " width='" + tWidth + "'" + " height='" + tHeight + "'" + " title='" + imgTitle + "'" + "/>";
        cString = aString + bString + "</a>";
        remoteForm = window.opener.document.frmNewPost;
        remoteForm.postContent.value += cString;
    }
</script>

I'm almost embarrassed at how simple this is.  Basically, I just grab the values of each form field, concatenate them as I need to, and then combine my concatenations into one giant, nasty string.  Then, using the "window.opener.document" value, I first access the name of my destination form (here "frmNewPost") and then point to the form element to which I want to write my fully concantenated string.

And that's it.  Here's an example .