Solved

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

Posted on 2004-04-13
6
1,406 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
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

Turn Insights Into Action

You’ve already invested in ITSM tools, chat applications, automation utilities, and more. Fortify these solutions with intelligent communications so you can drive business processes forward.

With xMatters, you'll never miss a beat.

Question has a verified solution.

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

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
This video teaches users how to migrate an existing Wordpress website to a new domain.
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.

717 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