Optimize ShowIt Forms with Input Scripts

Sharing two scripts I wrote in order to improve input uptake for forms created on ShowIt.

Add these scripts on any page where you have created ShowIt forms (in the Advanced panel, under “Page Loaded Javascript”).

The first script below makes certain the user cannot go to a new line when pressing the return/enter key. This is particularly useful for single-line inputs, like names and emails (otherwise, if the go to a new line, then the first line disappears from the user’s view, potentially creating confusion).

//DISABLES NEW LINE IN TEXT AREA

var textAreas = document.getElementsByTagName('textarea');

for (var i = 0; i < textAreas.length; i++) {
  textAreas[i].addEventListener('keypress', function (e) {
    if (e.keyCode === 13 || e.which === 13) {
      e.preventDefault();
      return false;
    }
  });
}

The second script converts input into title case (lowercases the entire input and then capitalises the first letter). This is helpful for several reasons, including for building a tidy email list where first names are all capitalised.

Note that even if you format the showit textbox in title case, the saved input will have the original name as it was it was typed by the user, unless you use this script (therefore, this converts “aNdreas” to “Andreas”).

// CONVERTS INPUT INTO TITLECASE

var textAreas = document.getElementsByTagName('textarea');

for (var i = 0; i < textAreas.length; i++) {
  textAreas[i].addEventListener("input", function() {
    var inputValue = this.value;
    var lowercaseValue = inputValue.toLowerCase();
    var titleCaseValue = lowercaseValue.charAt(0).toUpperCase() + lowercaseValue.slice(1);

    // Update the textarea value with the title case text
    this.value = titleCaseValue;
  });
}