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!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Submiting a form on ENTER with no submit button.

Status
Not open for further replies.
Dustman

Dustman

Programmer
May 7, 2001
320
US
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
 
Sort by date Sort by votes
how about put in a hidden submit button

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

=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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

News and views of some obscure guy
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
 
Upvote 0 Downvote
Cool, Jeff! I didn't know you could do that.

--Dave
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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!

News and views of some obscure guy
 
Upvote 0 Downvote
...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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
802
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
829
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
237
lmcate
lmcate
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
243
Alt255
Alt255
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top