Accumulating Data Before Submitting |
|
|
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. 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. |

