Solved

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

Posted on 2004-04-13
6
1,401 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 120 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 30 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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
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…

749 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