FAQ : Frequently Asked Questions
FAQ Table of contents
blue line
19. Q:  Any tips for handling a textarea with a CGI?

A:  This is how I handle textareas. In the following example I assume to have a textarea containing a maximum of 5,000 characters.
  1. In the external html the textarea is coded as follow:
    <form name=myform method=post action="/mypath/mycgi.pgm">
    .........
    <textarea name="mytextarea" rows=20 cols=70 >/%T1%//%T2%//%T3%//%T4%//%T5%/</textarea>
    .........
    <input type=button value="Send" onClick=checkMyForm()>
    </form>
    Figure 1

    The /%T1%/.../%TA%/ variables are set by the CGI: initially to no contents, and subsequently -after receiving the user input- to the user input itself (broken into 5 pieces 1,000 char each) in case the CGI decides that the user should re-enter some data in the form.

  2. There some important things in handling textareas:
    1. maxlength property in not available.
      In other words, the user could fill in more characters than the CGI is prepared to receive (the exceeding characters would be truncated without letting the user know about this)
    2. In the user types in any double quotes charachters ("), this results in HTML corruption as soon as the form is submitted.
    Therefore, it may be useful to add some JavaScript function that alerts the user whenever the maximum length is exceeded and converts any imbedded double quote to its harmless character entity representation. Here comes an example of such a piece of Javascript:
    <head>
    <script language="JavaScript">
    var DQ = /\"/
    function replDQuote(datain) {
        var dataout = datain;
        var i = 0;
        while (i!=-1) {
               i = dataout.search(DQ)
               if (i!=-1) {
                   dataout =dataout.replace(DQ, "&#034;")
                   }
        }
       return dataout
    }
    function chkTextArea(maxlen) {
       var inpTxtA=document.myform.mytextarea.value
       var inpTxtAl=inpTxtA.length
       var inpTxtAex=(inpTxtAl-maxlen)
       if (inpTxtAl<=2) {
        alert("you forgot to input your text in the textarea")
        return false
        }
       else
       if (inpTxtAl>maxlen) {
        alert("your reference text is too long. Please trim off "
               + inpTxtAex + " characters")
        return false
        }
       else
        return true
    }
    function chkMyForm() {
       document.myform.mytextarea.value=replDQuote(document.myform.mytextarea.value)    if (chkTextArea("5000")==true) {
           window.document.myform.submit()
           return true
           }
       else
        return false
    }
    </script>
    </head>

    This Javascript works af follow:

    1. Function chkMyForm() is activated by the form button (see the onClick keyword) when the user press it.
    2. Function chkMyForm()
      1. invokes function replDQuote() to remove double quotes from the textarea
      2. invokes function chkTextArea to make sure the the textarea contents do not exceed 5,000 chars
      3. if this check is OK, it submits the form
      calls function chkTextArea() (it could call several functions, each controlling a given input field of the form).
      Note. For more information about validating a form, please refer to form validation in our JavaScript tutorial.
  3. We have a Textarea example, inclusive of sources, that you may want to check.
  4. About CarriageReturn and LineFeed control chars
    When the user, writing in a text area, forces a new line, indirectcly enters x'0d25' (Carriage Return and Linefeed) in the text. The CGI receiving the text area may choose to convert these characters to blanks or leave them as they are.
    If the data are stored on a database for subsequent display on a web page, I would recommend to store these characters as they are, and to substitute them with a <br> tag at display time. The reason for saving them as they are, is that you may then easily return those data in a text area.
blue line