As I was finishing up the initial release of the blog, I decided that I wanted to do something different with the “add a comment” function. While it was clear enough that you selected the “no” button to keep from saving your personal information, the information was removed just by the clicking of that button!
I didn’t find this intuitive, as a radio button is typically something you do before submitting the form – not something you do in place of submitting the form. If you filled in the form and clicked “no” before submitting your data, you would lose your information and have to start over.
In my quest for alternatives, I stumbled across mezzoblue by Dave Shea.
Dave used a table for his “add comment” function, and it looks sweet. (In actuality, the whole site is sweet.) Even though XHTML 1.1 supports tables, I didn’t want to do it with a table. I wanted to stick with CSS, and more importantly, I didn’t want to blatantly rip off Dave’s design. One thing I really liked is where Dave had changed the “remember” to use a checkbox and the “forget” to use a link. I liked that idea as it seemed more in line with my own thinking.
My only problem was that I couldn’t get the blasted thing to work!
I finally figured out that the problem was because I changed the “forget” function to a link from a radio button that was a part of the form. Because the link isn’t a form element, sending “this.form” when clicking wasn’t going to work. Not being in a form means that the value was empty – and while the function removed the cookies, it didn’t do a thing to the form fields.
So I had to change that to the form name. Unfortunately, standard form name values seem to be based on the NAME tag, and since I’m trying to keep valid XHTML 1.1 here, I don’t have a NAME tag! Luckily the document.forms collection worked – I just referenced document.forms[0] (the appropriate form in this case) and it works fine.
The default MovableType template uses: forgetMe(this.form)
I changed this to: forgetMe(document.forms[0])
If you have more than one form on the page, and if any of those forms are processed before this form, you’ll need to increase that index value (the [0] in the line above). The index starts at 0 and increases by 1 for each form processed. So document.forms[1] references the second form on the page, document.forms[2] references the third form, and so on.
If you notice that your cookies are being deleted, but your forms are not, this may be your problem. Make sure that you are passing a valid form reference to the function, or else it won’t know what it’s supposed to clear!
You may also remember my prior use of the getElementById method. After doing a bit of research, I found that it’s easy enough to just reference the fields by their ID (and of course the newly found form reference) and eliminate the use of the method altogether.
Instead of: document.getElementById(‘author’).value = getCookie(“mtcmtauth”);
I now use: document.forms[0].author.value = getCookie(“mtcmtauth”);
Hopefully this ought to keep the site XHTML 1.1-compliant without the loss of functionality. I will need to keep up with the contents of my form collection, and if ever the “add comments” form moves from the first spot on the page, I’ll have to remember to update it here – but that shouldn’t be all that bad.