1. Home
  2. Computing & Technology
  3. JavaScript

Accumulating Data Before Submitting

clr gif

Sometimes you want to be able to accumulate information within a form before submitting the form for server side processing. You can easily accumulate values entered in a text input field into a text area through the use of a button field with an onclick event handler attached so that Javascript can be used to accumulate the entries for you.

Here is an example form that does just that.

Input:
Output

The above form consists of the following code:

<form name="myform" action="#">
<table align="center"><tr><td
align="right">Input:</td><td><input
type="text" name="inp" size="40" /></td></tr>
<tr><td colspan="2" align="center"><input
type="button" onclick="accum();"
value="Add" /></td></tr>
<tr><td align="right">Output</td>
<td><textarea name="outp" cols="40"
rows="4"></textarea></td></tr>
</table>
</form>

The onclick calls a function placed in the head section of the web page. This function (which I called accum()) contains three statements to accumulate the entered values, clear the original input, and give the focus back to the input field. The function code is as follows:

function accum() {
document.myform.outp.value +=
document.myform.inp.value + '\r\n';
document.myform.inp.value='';
document.myform.inp.focus();
}

You can change the fields shown in bold to use your own form, field, and function names as long as you change all of the references to those names shown in bold throughout the form and Javascript code.

Note that refreshing or reloading the page will delete all of the accumulated content of the textarea. You may want to advise your visitors of this on the page containing the form.

Explore JavaScript
About.com Special Features

The Best Web Trends of the Decade

A look back at the best innovations, ideas and technologies over the last 10 years, More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. JavaScript

©2009 About.com, a part of The New York Times Company.

All rights reserved.