Manipulating the Value of a Text Field

Mouse over the links below the text field and see what happens.

Yes, and I know it.     No!

This magic is performed by changing the value of the text field. The form looks like the one in the last example:

    <FORM NAME="form1">
         <INPUT TYPE="text" NAME="text1" VALUE="Are you happy?">
    </FORM>

The links that change the text field are:

    NOTE: javascript:void(null) or javascript:void("") or javascript:void('') or javascript:void(0)
    are used to "deaden" a link

    <A HREF="javascript:void(null)"
      onMouseOver="document.form1.text1.value='Clap clap!';">Yes, and I know it.
    </A>

    <A HREF="javascript:void(null)"
      onMouseOver="document.form1.text1.value='Sour puss!';">No!
    </A>

These are normal mouseovers; the important part is: document.form1.text1.value='Clap clap!'. This says, "find the form called form1 in the document, find the form element called text1, and set its value to 'Clap clap!'." The second line works similarly. This is very much like changing the src of an image. Instead of having a src, text fields have values.

Other types of form elements can be affected by messing with their values - for example, TextAreas:
Part 1 Part 2

The forms and links here are very similar to those above. The form is:

    <FORM NAME="form2">
         <TEXTAREA NAME="theTextarea" ROWS="10" COLS="60">
               Mouse over below to see the first verse of
               The Webmonkey song, adapted from
               "I Wanna Be Like You" (The Monkey Song)
               from Walt Disney's The Jungle Book
               written by Richard M. Sherman and Robert B. Sherman
         </TEXTAREA>
    </FORM>

Notice that the form has a name, form2, and the textarea has a name as well, theTextarea.

The links are basically the same as what you saw in the text field example:

    <A HREF="javascript:void(null)"
      onMouseOver="document.form2.theTextarea.value=Part1;">Part 1
    </A>

    <A HREF="javascript:void(null)"
      onMouseOver="document.form2.theTextarea.value=Part2;">Part 2
    </A>

The only difference is that instead of assigning a string to the value of the <TEXTAREA>s, I assigned variables that I defined in the header. View Source to see that they're there. I only did this for the sake of neatness, to get those long strings out of the HTML. Here's one of the strings:

    var Part1 = "Now I'm the king of the swingers\n
    Oh, the jungle VIP\nI've reached the top and had to stop\n
    And that's what botherin' me";

Notice the "\n". In general, because you're working with HTML, the new line isn't important. But if you're writing something in a <PRE> tag, or you're writing into a textarea, the "\n" comes in handy.

In addition to changing the values of form elements, JavaScript allows you to detect events that go on inside of them. Here's an example of detecting events inside a text field.