?
Solved

Form Image Submit Button - Need to have form submit when return key is pressed in IE!

Posted on 2004-04-13
6
Medium Priority
?
1,410 Views
Last Modified: 2007-12-19
Clicking my image submit button submits my form - however I need to allow my users to simply press the Return key to acheive this.  Pressing return results in no action using IE!

I have pasted my code below - it's a simple table structure w/ 2 input fields and the image submit button.  Perhaps using 2 input fields or the cellstructure of the nested table is throwing it off?


<!-----------CODE START-------------------->
<form name="login" action="login.php" method="post">
<table>
<tr>
      <td>User</td>
      <td><input type="text" name="username" size="14" tabindex="1" /></td>
      <td rowspan="2" valign="bottom" align="center"><input type="image" name="submit" src="images/go_button.gif" value="Login" tabindex="3" />
</td>
</tr>
</tr>
<tr>
      <td>Pass</td>
      <td><input type="password" name="password" size="14" tabindex="2" /></td>
</tr>
</table>
</form>
<!-----------------------CODE END------------------>


If any of you have any experience or insight into image submit buttons, I would appreciate it!


PS - using a button tag will highlight the submit button when the input fields are in focus, which is the behavior I want.  This just superimposes my button image ontop of a submit button though, which is unsightly.  Replicating the behavior w/out adding the border is solution I'm looking for.

 <button name="submit" value="submit" type="submit"><img src="images/go_button.gif" /></button>


Thanks for your time and thoughts.
0
Comment
Question by:minnirok
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 9

Accepted Solution

by:
pepsichris earned 360 total points
ID: 10814971
Li'l bit o' JavaScript in the head:

<script type="text/javascript" language="JavaScript">

function submitEnter() {
  if (window.event.keyCode == 13)
   {    
    document.forms(0).submit();
    return false;
   }
 }

</script>


And call it thus:
<body onkeypress = "enterSubmit()">
0
 
LVL 7

Author Comment

by:minnirok
ID: 10815907
This is a step in the right direction - but IE now makes a system error sound when return is pressed.

NS was giving me repeated alerts to window.event not being set, so I modified the JS to:

<script type="text/javascript" language="JavaScript">

function submitEnter() {
  if ( window.event && window.event.keyCode == 13)
   {    
    document.forms(0).submit();
    return false;
   }
 }

</script>

<body onkeypress="submitEnter()">

-----------------------------

I'm still hoping there's some control mechanism that will highlight the image button when the form is brought into focus, 'cause this would essentially allow it to imitate typical submit button behavior without using JS for keystroke monitoring.
0
 
LVL 1

Expert Comment

by:bkiahg
ID: 10816403
What version of IE are you using?  Both 5.5 and 6 submit the form on my tests.
0
Linux Academy Android App Now Supports Chromecast

We have some fantastic news for our Android fans. We’re so excited to announce that the Linux Academy Android app is now available with Chromecast support. That’s right – simply download the latest update of the Linux Academy App and start casting your favorite course videos!

 
LVL 7

Author Comment

by:minnirok
ID: 10817691
I'm using IE 6; running the code strictly as above, it does submit properly...   Somehow when combined w/ includes I'm using that contain other javascript functions, there's some sort of conflict coming up.

I needed to change the code from document.forms(0).submit(); to read:

document.forms(1).submit();

before it would submit the login form in the contexts of my page - It's reading in some other form as form(0)..  There's gotta be some conflict that is causing the system alert noise - any ideas as to what could be causing this?!
0
 
LVL 10

Assisted Solution

by:D_M_D
D_M_D earned 90 total points
ID: 10819183
How about using the form name like this...

<html><head>
<script type="text/javascript" language="JavaScript">

function submitEnter(formObj) {
  if ( window.event && window.event.keyCode == 13) {    
    formObj.submit();
  }
}
</script>
</head>

<body onkeypress="submitEnter(document.frm1)">
<form name="frm1" method="post" action="blank.asp">
</body></html>

--------
D_M_D

0
 
LVL 9

Expert Comment

by:pepsichris
ID: 10834869
Have you got a link to the page so we can have a look?
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question