Solved

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

Posted on 2004-04-13
6
1,394 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
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Problem to be resolved in this article Currently, development of website and web application can be done without writing thousands of lines of programming code by hand. Description This can be done through by using a open source framework such …
Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

758 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now