Neil Ang

Bersonal Plog

A stunning likeness of Neil Ang
Super Nerd

Outsmarting comment spam

Posted on .

Before I started using Disqus, this blog had it's own comment form.

To counter-act annoying comment spam without implementing a captcha, I re-wrote the comment form to be inserted dynamically through JavaScript. This method worked very well.

Here's what the JS looked like:

function insertCommentForm(){ 
  var parent = document.getElementById('myCommentForm'); 
  
  var form = document.createElement('form'); 
  form.setAttribute('action', ''); 
  form.setAttribute('method', 'post'); 
   
  var fieldset = document.createElement('fieldset'); 
   
  // Input: Name 
  var nameLabel = document.createElement('label'); 
  var nameText = document.createTextNode('Name '); 
  var nameInput = document.createElement('input'); 
  nameInput.setAttribute('name', 'name'); 
  nameInput.setAttribute('value', document.getElementById('myComment-name').value); 
  nameLabel.appendChild(nameText); 
  nameLabel.appendChild(nameInput); 
   
  //Input: Email 
  var emailLabel = document.createElement('label'); 
  var emailText = document.createTextNode('Email '); 
  var emailNote = document.createElement('small'); 
  emailNote.innerHTML = 'Required but never displayed'; 
  var emailInput = document.createElement('input'); 
  emailInput.setAttribute('name', 'email'); 
  emailInput.setAttribute('value', document.getElementById('myComment-email').value); 
  emailLabel.appendChild(emailText); 
  emailLabel.appendChild(emailNote); 
  emailLabel.appendChild(emailInput); 
         
         
  //Input: Website         
  var websiteLabel = document.createElement('label'); 
  var websiteText = document.createTextNode('Website '); 
  var websiteNote = document.createElement('small'); 
  websiteNote.innerHTML = 'http://'; 
  var websiteInput = document.createElement('input'); 
  websiteInput.setAttribute('name', 'website'); 
  websiteInput.setAttribute('value', document.getElementById('myComment-url').value); 
  websiteLabel.appendChild(websiteText); 
  websiteLabel.appendChild(websiteNote); 
  websiteLabel.appendChild(websiteInput); 
   
  //Input: Comment 
  var commentLabel = document.createElement('label'); 
  var commentText = document.createTextNode('Comment '); 
  var commentTextarea = document.createElement('textarea'); 
  commentTextarea.setAttribute('name', 'comment'); 
  commentTextarea.setAttribute('rows', '12'); 
  commentTextarea.setAttribute('cols', '24'); 
  commentLabel.appendChild(commentText); 
  commentLabel.appendChild(commentTextarea); 
       
  //Hidden: Section         
  var sectionHiddenInput = document.createElement('input'); 
  sectionHiddenInput.setAttribute('type', 'hidden'); 
  sectionHiddenInput.setAttribute('name', 'section'); 
  sectionHiddenInput.setAttribute('value', 'entries'); 
   
  //Hidden: Remember 
  var rememberHiddenInput = document.createElement('input'); 
  rememberHiddenInput.setAttribute('type', 'hidden'); 
  rememberHiddenInput.setAttribute('name', 'remember'); 
  rememberHiddenInput.setAttribute('value', 'on'); 
   
  //Hidden: Entry Handle 
  var rememberHiddenInput = document.createElement('input'); 
  rememberHiddenInput.setAttribute('type', 'hidden'); 
  rememberHiddenInput.setAttribute('name', 'entry-handle'); 
  rememberHiddenInput.setAttribute('value', document.getElementById('myComment-entry').value); 
   
  //Hidden: Submit 
  var submitInput = document.createElement('input'); 
  submitInput.setAttribute('type', 'submit'); 
  submitInput.setAttribute('id', 'submit'); 
  submitInput.setAttribute('value', 'Post Comment'); 
  submitInput.setAttribute('name', 'action[comment]'); 
   
  fieldset.appendChild(nameLabel); 
  fieldset.appendChild(emailLabel); 
  fieldset.appendChild(websiteLabel); 
  fieldset.appendChild(commentLabel); 
  fieldset.appendChild(sectionHiddenInput); 
  fieldset.appendChild(rememberHiddenInput); 
  fieldset.appendChild(submitInput); 
   
  form.appendChild(fieldset); 
   
  document.getElementById('myCommentWarning').style.display='none'; 
   
  parent.appendChild(form); 
}