Submiting a form on ENTER with no submit button.

Dustman · Apr 15, 2004

Okay, this is probably simple but my brain is too fried to figure it out. I've got my form and I'm using an image to submit the form using href="javascript:myform.submit();" onClick="return validateForm();"

How do I get the form to submit (and still run validateForm()) when the enter key is pressed now without having to put code in all the onKeyDown events for the form elements?

-Dustin
Rom 8:28

jemminger · Apr 15, 2004

how about put in a hidden submit button

<input type="submit" style="display:none;" />

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

LFI · Apr 15, 2004

There's a possibility that this might be a bit inelegant, but this worked for me:

Code:

<html>
<head>
<script>
function checkEnter()
{
 if(event.keyCode == 13)
  if(validateForm()) 
   formName.submit();
}
</script>
</head>
<body>
<form name='formName' [b]onsubmit='return false;'[/b] [b]onkeyup='checkEnter();'[/b]> 
Example:  <input name='textName' type='text' size='30'>
</form>
</body>
</html>

Good luck!

--Dave

petey · Apr 18, 2004

The validate function should be called from the form tag's onsubmit handler. It will then be called regardless of whether the user hits the submit button or presses enter from within a text field. This should hopefully simplify the code.

Code:

<form onsubmit="return validateForm()">

petey

http://www.drpeterjones.com/

News and views of some obscure guy

LFI · Apr 19, 2004

petey,

the only problem with your suggestion is that if someone wants to manually call:

Code:

formName.submit();

...somewhere in the javascript, the form's onsubmit event does not fire.

Of course, this is where Jeff's hidden submit button could come in handy. It would have to be named, but the user could code this instead:

Code:

formName.submitButton.click();

...and this WOULD fire the form's onsubmit event.

Consider this short example:

Code:

<html>
<head>
</head>
<body>
<form name='formName' onsubmit='return confirm("submit?");'> 

<input type='submit' name='submitButton' /><br />
hitting enter in this field submits form:<input type='text' size='30' /><br />

<input type='button' value='manual submit' onclick='formName.submit();' /><br />

<input type='button' value='send click() to submit button' onclick='formName.submitButton.click()' />

</form>
</body>
</html>

Hitting the first button:
type='submit'
...triggers the onsubmit event.

Hitting the 'enter' key with focus in the text field triggers the onsubmit event.

Pressing the next button
type='button' onclick='formName.submit()'
...does NOT trigger the onsubmit event.

Pressing the last button
type='button' onclick='formName.submitButton.click()'
...once again DOES trigger the onsubmit event.

So it just depends on how one wants to go about it.

--Dave

jemminger · Apr 19, 2004

sounds to me if you want an image as a submit button you'd be better off using the proper element: an image submit button!

<input type="image" src="foo.jpg" name="whatever" />

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

LFI · Apr 19, 2004

Cool, Jeff! I didn't know you could do that.

--Dave

Dustman · Apr 19, 2004

Thanks everybody.. I'd played around with all these solutions already and figured I was just missing something. They all seem a little sloppy but hey, thats javascript for ya. I'm just really curious why the onSubmit isn't called when you submit a form via javascript.. thats why I originally posted this question. Anybody know if this is just a IE thing?

By the way, I know about the image type input tag but IE doensn't like to style it very well. Looks great in safari and other browsers that were built from the ground up ready for css but until more people make the change.. i'll have to stick with normal images.

-Dustin
Rom 8:28

petey · Apr 19, 2004

You could call the submit function like this:

Code:

if (validateForm()) { formName.submit(); }

...or...

Code:

function submitFormName() {
   if (validateForm()) { formName.submit(); }
}
...
submitFormName();

I think the reasonong behind JavaScript's behavior in this case is that calling submit() is an explicit, low-level, "I hope you know what you're doing" type of function.

Hope it helps!

http://www.drpeterjones.com/

News and views of some obscure guy

LFI · Apr 19, 2004

...although, interestingly, if you use javascript to click a button (even non-submit buttons), the button's onclick event is fired.

'seems like IE's handling of using javascript to submit a form simply includes an oversight.

OR...

Here's a little click() example that, on first glance, appears to set up an infinite loop:

Code:

<html>
<head>
<script>
function showMessage()
{
 alert('hey');
 clickButton.click();
}
</script>
</head>
<body onload='[b]clickButton.click()[/b]'>
<input type='button' name='clickButton' value='click me' onClick='showMessage()' />
</body>

Interestingly, however, it does NOT set up an infinite loop. The javascript seems to recognize what would happen if it tried to execute the clickButton.click() a second time.

You could fool it A LITTLE with this minor change:

Code:

<html>
<head>
<script>
function showMessage()
{
 alert('hey');
 clickButton.click();
}
</script>
</head>
<body onload='[b]showMessage();[/b]'>
<input type='button' name='clickButton' value='click me' onClick='showMessage()' />
</body>

In this case, you get the alert message twice, but then it stops.

Now, there are only two ways to click a button (click it or call the click() method), but there are several ways to submit a form. Perhaps coding javascript to prevent the potential infinite loop for the case of submit() was too complicated and the programmers merely opted to make sure submit() didn't trigger the onsubmit action.

'just a thought.

--Dave

Dustman · Apr 19, 2004

Well, I understand the point you are getting at.. but its my belief that a compiler shouldn't have to worry about issues like that. It is the programmers job to write good code and avoid endless loops.. not the compilers.

It is almost like making a car with blinkers but leaving off the blinker switch to avoid somebody forgetting turn it off after turning....

-Dustin
Rom 8:28

LFI · Apr 19, 2004

I agree that javascript should let us make our own mistakes. I'm just pointing out that it seems like "they've" taken steps to prevent some based on the click()/onclick example.

--Dave

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Submiting a form on ENTER with no submit button.

Dustman

Programmer

jemminger

Programmer

LFI

Programmer

petey

Programmer

LFI

Programmer

jemminger

Programmer

LFI

Programmer

Dustman

Programmer

petey

Programmer

LFI

Programmer

Dustman

Programmer

LFI

Programmer

Similar threads

Part and Inventory Search

Sponsor