Flashcards

Click on a tag to jump to its section:
<form> | <textarea> | Writing into the <textarea> from JavaScript

For this lesson, we took an existing bit of JavaScript an modified it to meet our needs. In my case, I fixed some errors in the programming, moved the JavaScript coding to an external .js file, and more. In fact, I did so much that I created a change log file that can be viewed from the original project.

The things in the less that I wish to discuss here are the <form> and <textarea> and who data is written into the <textarea> from JavaScript.

The <form> tag

The <form> tag is what is used to (generally) create an HTML form that will accept user input. In this lesson, however, the <form> tag was used to set up an area that defines where a JavaScipt function was to write output. Strangely, between this assignment and the next, I did not use the <form> tag to accept any user input -- I just used it as a definition that was ultimately used with <textarea>.

Here is an example of its usage taken from W3Schools (notice the [now] incorrect useage of the <br /> tag -- also, I have disabled the "Submit" button, since I am not calling an ASP page from this lesson):

Notice that they're using ASP (Active Server Pages). That's another scripting language, kind of like JavaScript. More on ASP can be read here.

Because of the way that I used it, I will combine the my example of the <form> tag with <textarea> by using the name="" attribute with the form tag.

Click here for more information on the <form> tag and its attributes.

The <textarea> tag

The <textarea> tag defines an area where a user can input multiple lines of information. In HTML 4.01, it generally would accept any number of characters; in HTML5, an attribute can be set to limit the users input. The size of the text area can be controll via the cols="" and rows="" attributes. Here's a couple of examples using the cols="" and rows="" (the text areas below have also been set with the disabled attribute, so no, you can't enter any text):

The controlling CSS for this:

The <textarea> tag can also be given a name="" attribute. By using the name of the text area with the name of the form, you can direct input into the text area using JavaScript. See next sextion.

Click here for more information on the <textarea> tag and its attributes.

Writing into the <textarea> from JavaScript

First, a bit of fun: Won't you please add your favorite quote and your name (as many as you'd like, just fill out each field and click the button each time) so you'll be added to my list of celebrities' quotes? I'm going to use these in the next subsection.

Quote:

Name:

First, the HTML code to "get" both fields of text, and send them on to the JavaScript function to be processed:

Now for the JavaScript function: I first check to see if data has been entered into both fields. If not, then it simply exits the function. If so, I "glue" the data together in the format I want and then add it into the array (to be used in the next subsection):

Now it is time to put together what we've done up to now: How to write something into a defined text area. To do so, I'll define a form and text area using the name="" attributes for both. I will then place a button that, when pressed, will cause text to be placed into the text area.

Try pressing the button multiple times as the quotations are randomized. See if your quotation pops up in the text area -- if you entered one!

HTML code:

JavaScript code:

This code does a lot of things: It displays the pre-loaded and user submitted quotations randomly, and keeps any repeats from being displayed untill all have been used.

So, in the HTML code I defined a form called named "FPform". I then defined a text area, within the form, named "FPtextarea". After all that was done, I placed a button on the screen which, when pressed, called a JavaScript function (in my external fp_java.js file) called pressedButton() via the onClick event handler. When the function executes, it uses the document.{form name}.{text area name}.value "command" [not document.write()] to place the text I want into the appropriate area, as opposed to having it simply display as the next line of text on the page. Ta-dah!

Click on a tag to jump to its section:
<form> | <textarea> | Writing into the <textarea> from JavaScript

NAUTILUS:
For this lesson, I really modified the original project file that was given me to make it do what I wanted. Along the way, I learned to manipulate <textarea> and <form> tags so that information displayed where I wanted it to. I also learned how to use the modulus operator (%) in JavaScript.