Introduction

One source of duplicate comments for Movable Type is users hitting the “POST” button multiple times, either through a key bounce or because of slow response. One amelorative option is to arrange for the “POST” button to be disabled before the comment data is submitted. This not only avoids duplicates in most situations but is useful feedback to the user that, yes, they did in fact push the button.

Solution

This turns out to be a bit trickier than it seems, because some browsers won’t send data from disabled objects. This is a problem because the “POST” button contains critical information needed to process the comment request. It is not sufficient to simply move that to a hidden object, because that will cause problems for “PREVIEW”. My solution is to have a hidden object and engage in a bit of object renaming during the disable process. I have tested this on IE 6, IE 7, FireFox 1.5, FireFox 2, Opera 8 and Opera 9, and it seems to work.

This is the JavaScript enhanced “POST” button and hidden object. It replaces the existing “POST” button.

<input type="hidden" name="mode" value="mode" />
<input type="submit" name="post_comment" id="post_comment" value="&nbsp;POST&nbsp;"
  onclick="document.comments_form.post_comment.disabled=true;
           document.comments_form.mode.name = 'post';
           document.comments_form.onsubmit();
           document.comments_form.submit();"
/>

The Javascript disables the button, renames the “mode” object to “post” to put that as data in the submit, executes any other JavaScript expected to run on submit, and finally submits the form.

Installation

You will need to modify every template that accepts user comments. This will generally be the individual archive template and the preview comment template. It may also be the comment error tempate and the comment popup template.

You will need to modify the name of the FORM tag for comment submission. By default it is named “form” and this can cause hard to diagnose name collision problems. The actual name doesn’t matter, it is just important that it is unique. Use all lower case letters and underscores, nothing else. As you can see above, I renamed mine “comments_form”. I recommend doing the same unless you have a specific reason to use something else. When changing the name, change both the name and id tag and give them the same value¹.

Once you’ve renamed the form, replace the current “POST” button with the lines quoted above. Change any instances of “comments_form” with the name you used for the FORM tag if that is different.

Notes

• The name attribute for the “POST” button must not be “post” as it is in the default template.
• The id attribute value for the “POST” button should be the same as the name attribute value.
• The id attribute value and the name attribute value for the FORM tag should be identical. This must also match the name following “document” in the JavaScript.
• You can set the value attribute of the “POST” button to whatever you like — it has no effect on submitting comments, it is used only as the displayed text in the button.

¹ This is because some browsers like the name attribute and some like the id attribute. There’s no good reason to not do both except for the extra typing.