Advertisement

There's no such thing as a stupid question, but they're the easiest to answer.
Login
Search

Advertisement

Web Design & Development Web Design & Development
Search Search
Search for:
Tech Support Guy > > >

Solved: <input type="image" and ENTER key


(!)

andynic's Avatar
andynic andynic is offline
Computer Specs
Member with 235 posts.
THREAD STARTER
 
Join Date: May 2007
Location: Amsterdam
Experience: Beginner
19-Jul-2012, 04:19 AM #1
Solved: <input type="image" and ENTER key
Hi,

I have a problem with the <input type = "image"> tag which is a submit button.

When I use "submit" buttons (either type="submit" or type="image") when the user hits the ENTER key, the form does a submit which is not user-friendly in this application.

To get around this, in the case of <input type="submit"> I have changed them to <input type="button" onclick="submit()">

Is their some way to prevent the <input type="image"> from automatically doing a submit?

Thanks for your help.
Andynic
allnodcoms's Avatar
allnodcoms   (Danny) allnodcoms is offline allnodcoms has a Profile Picture
Computer Specs
Member with 610 posts.
 
Join Date: Jun 2007
Location: Hertfordshire - England
Experience: Advanced
19-Jul-2012, 05:21 AM #2
Couple of options:
  • Don't make it a button, just make it an image with an 'onClick' handler.
  • Supply an 'onKeyPress' handler that does nothing...
I wasn't aware that an image button aromatically got submit status. Odd :roll eyes:...

Is it the only "button" type element in a form?

Danny

Last edited by allnodcoms; 19-Jul-2012 at 05:29 AM.. Reason: Added question
andynic's Avatar
andynic andynic is offline
Computer Specs
Member with 235 posts.
THREAD STARTER
 
Join Date: May 2007
Location: Amsterdam
Experience: Beginner
19-Jul-2012, 07:09 AM #3
Hi Danny,
Thanks for your reply.

re. image button and submit:
I also find it odd. Had it functioned as type=" button" there would be no problem in this context at least.
From: http://www.w3schools.com/tags/att_input_type.asp
"image Defines an image as a submit button"

re. onkeypress: This is a data entry form, so to globally disable keypress is not an option..

re. making it an <img> tag:
This is what I did:
<img alt="recensie versturen"
name="recensieVersturen"
id="recensieVersturen"
src="images/recensieVersturenBttn.png"
title="recensie versturen"
style="background-color:lightGray; height:25px;"
onclick="if ( validateSchrijfRecensie('recensieVersturen') )
{
document.getElementById('nextAction').value = 'recensieVersturen';
alert ('xxx');
submit();
}
else
{
return false;
}"
/>
When the user clicks the image, I get to the alert('xxx') but the submit does not function (as it does when it is an <input> tag.
Here is the <form> tag:
<form name="schrijfRecensie" id="schrijfRecensie" method="post" action=""
style="background:none; border:0px; margin-left:0">

The W3 validator does not show any errors.

Thanks for your help.
Andynic
allnodcoms's Avatar
allnodcoms   (Danny) allnodcoms is offline allnodcoms has a Profile Picture
Computer Specs
Member with 610 posts.
 
Join Date: Jun 2007
Location: Hertfordshire - England
Experience: Advanced
19-Jul-2012, 10:40 AM #4
You need to tell the js what to submit():
Code:
document.forms["schrijfRecensie"].submit();
That should do it...

Danny
andynic's Avatar
andynic andynic is offline
Computer Specs
Member with 235 posts.
THREAD STARTER
 
Join Date: May 2007
Location: Amsterdam
Experience: Beginner
19-Jul-2012, 04:04 PM #5
Thanks for the tip, Danny. It indeed solves the problem.

Thanks again for your help.
Andynic
As Seen On

BBC, Reader's Digest, PC Magazine, Today Show, Money Magazine
WELCOME TO TECH SUPPORT GUY!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.


Tags
<input>, submit() method, type="button", type="image"

(clock)
THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools


WELCOME
You Are Using: Server ID
Trusted Website Back to the Top ↑