Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
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,413 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
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 
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

Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Suggested Courses

604 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