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

More from About.com

  1. Home
  2. Computing & Technology
  3. JavaScript
  4. Controls and Widgets
  5. Form Controls
  6. Accumulating Data Before Submitting

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

All rights reserved.