Textarea HTML Forms with Process Nag

Is current?: 
Yes

The textarea-processnag template textarea-processnag.htm is a type of HTML form that is a variant of the textarea.  The nag functionality uses Javascript code to alert the user if he or she has not responded to all items.  For free-form text area input, we define a minimum length that is required of each entry. This nag alerts the user once, and after that, the user is free to proceed to the next task, even without completing the items. In addition, as the user types the input, any character that the user types can be replaced with an alternative character and the maximum length of the textarea can be restricted to any number.

The use of the fake button and the distinction between the fake button and real button is explained in the dropdown-nag entry. The onclick event handler in the fake button on line 78 is the function donag().  When the user clicks on the Continue button, donag() checks if the user had previously clicked this button.  If this is the first click and if the responses are incomplete, then the user is alerted.  If this is the second click, or if the items have been completed, then the form is submitted using document.form1.submit().  The donag()for textarea is below:

<script type="text/javascript">

  var nnag=0;

  function donag() {

    nnag++;               // increment by 1

    var allanswered=true; // assume everything is complete

    var minlen=5;
    if (document.form1.taitem1.value.length<minlen) allanswered=false
;//check length of taitem1

    if (document.form1.taitem2.value.length<minlen) allanswered=false;//check length of taitem2

    if (document.form1.taitem1.value.length==0) document.form1.taitem1.value = "."; //set to .
    if (document.form1.taitem2.value.length==0) document.form1.taitem2.value = "."; //set to .
    if (!allanswered && nnag<=1)
        alert("Please type responses that have "+minlen+" or more characters.\nThis reminder
                    will appear once.");

        else document.form1.submit(); //else submit the form
   }

 </script>

If you would prefer to define unique minlengths for each item, that can be done by defining variables such as minlen1 and minlen2, setting them to different values, and then using them in the corresponding lines that check the lengths of the variables.

What happens if the user fails to type in any input?  In this case, the length of the variable will be zero.   In such cases, we substitute the value of “no input” with a period.  Note that we haven’t included the missing value feature in the standard textarea template. In that file, non-responses are stored as the null string (nothing). We also illustrate dynamic replacement of characters typed in by the user using the textprocess function that is triggered any time the key is pressed during input. In this case, spaces typed in by the user are replaced by underscores.  You don’t need to use this function, but it’s fairly easy to modify if such a feature is required. Here is the code for textprocess, which does two things. Besides replacing spaces with underscores, it also restricts the length of the input to maxlen. In Line 50, maxlen is set at 500 in the template, which means the input will not be allowed to exceed that.

<script type="text/javascript">

  function textprocess(field, maxlen) {

   if (field.value.length > maxlen)

   field.value = field.value.substring(0, maxlen); // truncate the field to maxlen chars

   field.value = field.value.replace(/ /g,"_"); // replace spaces by underscores
}
</script>