View Full Version : JS form- onSubmit- function

12-19-2011, 11:30 PM
I am trying to create a form that writes text to an HTML canvas when submitted. Eventually, the function that writes the text will be more complex. The problem is the text only appears briefly, because the function is only called once when the form is submitted. I want the function to be called continuously after the form is submitted. How do I do this? I have had very little experience with JS.

A lame (failed) attempt...




<canvas id="canvas" width="790" height="605">
Sorry, your browser doesn't support HTML5

<form name="frm1" action=" " onsubmit="greeting()">
<input type="text" name="fname" />


<script type="text/javascript">

function init() {
//use canvas "canvas" and assign to variable canvas

function greeting()
c.fillText("var!!!", 100, 460);
var test = 1;

if (test == 1)




Old Pedant
12-20-2011, 01:17 AM

Once a form is truly submitted, then the browser LOADS A NEW PAGE from the server. What URL is loaded depends on the action= of the <form>. If the action is missing or blank, then the same page is loaded, but it *IS* loaded again. Thus WIPING OUT everything that has been done in the browser up to that point.

So... Are you *SURE* you really WANT to submit the <form>?

I should note that as your code is written, if the onsubmit is ever called, the page *WILL* be submitted, and thus wiped out.

Another weird part here is this:

if (test == 1)

Since the only way that test is set to 1 is to first call greeting, *that* particular call to greeting() will never occur.

I think maybe you need to tell us what it is you are trying to do, because I don't think this code is going to do it.

12-20-2011, 04:10 AM
What I am trying to do...
1. Have a person enter a word into a form
2. have them press enter
3. have an object in a canvas move based on what word they typed in (the object is moved by running a javascript function)

So, basically what you are saying is that submitting a form is not going to work because it erases all the data. So, how can I have a person enter information, and be able to examine this information without having them submit a form?


Old Pedant
12-20-2011, 08:34 AM
Various ways.

(1) Capture the onchange event from the <input> field and use that.
(2) Use the onsubmit of the <form> but always do return false to suppress the actual submit.

The smallest change to your code would be the latter.

<form name="frm1" action="" onsubmit="greeting(); return false;">

But many people are used to hitting TAB after entering data into online <form>s, and that won't trigger the onsubmit. So perhaps doing this would be better:

<form name="neverUsed" action=" " onsubmit="return false;">
<input type="text" name="alsoNeverUsed" onchange="greeting(this.value);"/>

And now you receive the changed value of the text field in your greeting function and do with it as you will:

function greeting( text )
... now you can base your actions here on the variable text ...
... which is of course the changed value of the text field in the <form> ...

The onchange will be triggered by either TAB or ENTER, and the return false in the <form>'s onsubmit ensures that you won't leave the current page.