onSubmit not working for forms with multiple INPUT fields

[inview]

Pretty new to JS so I imagine this is pretty easy...

have multiple forms where just pressing the Enter key submits the form. the easiest example is a login form with just a username and password.

I can get the onSubmit to work when there's just one INPUT field but adding another causes the system to 'Ding' at me and never executes the onSubmit.

<FORM name="login" method="POST" action="hlogin.asp" onSubmit="Submit();">

<TABLE>
<TR>
<TD>Username:</TD>
<TD><INPUT type="text" name="Username"></TD>
</TR>
<TR>
<TD>Password:</TD>
<TD><INPUT type="password" name="Password"></TD>
</TR>
</TABLE>

</FORM>

[Philip M]

<TD><INPUT type="text" NAME="Username"></TD>

[inview]

I was cleaning up the code when posting and deleted it.

However, that's not the reason for the form not submitting

[requestcode]

What error are you getting and can you show the script your performing?

[inview]

This example is a small form embedded on an ASP page called 'hlogin.asp'. When the form is submitted, it reloads itself and then does some server-side scripting to validate the user.

When the user is finished entering their Username and Password, they can press Enter to actually do the submit.

Works fine when just one INPUT field is used, but adding a second field such as Password, causes the system to 'Ding'. There's no error, the form just doesn't submit and forces me to press an actual Submit button.

Hope that answers your question.
Thx!

[Tommi]

In my experience you also need a submit button which belongs to the form to have the onSubmit-event via enter key

[inview]

yea, it's weird. I'm finding that having an actual Submit button on the form allows you to hit the Enter key at any time - even without the onSubmit

However, having an image with an onClick to submit the form:

( <A href="javascript:document.login.submit();"><IMG src="img/icon_login.gif"></A> )

doesn't have an effect.

[brothercake]

Tommi is right - pressing enter to submit a form only works reliably if the form contains a real submit button - I'm quite surprised that your original example worked at all.

The ding is a Windows sound which effectively means "pressing enter isn't a valid action from the currently focused dialog" - in other words, you can't "submit" a form that doesn't have a submit button (although JS still allows this, via its submit() function - so you could in fact make a form which still goes ding when you press enter, but nevertheless submits the form, by trapping the keypress event. But that's a horrendous hack; and a usability nightmare.)

If you use <input type="image" /> it will be a submit button :)

[inview]

Genius!
I'll be darned. I had the Submit button as an IMG and an onClick event - which didn't work.

I've never used TYPE="image" and it works perfectly - either submitting the form using this button or pressing the Enter key.

Thanks a bunch - I'm going to use this in all my forms where I'm using custom images for Submits.

[Tommi]

I figured a workaround for this annoying thing, because I also created a form which is processed by a script and did not want to have a submit button there.

I created the submit button with no label on it, put it into a <div>-layer and made that layer invisible... I think with style:z-index positioning.
I dunno, I believe style:visibility:hidden disables the button for some reason, but z-index works on IE and Mozilla. Don't forget to put the form into a <div> layer with a higher z-index than the submit button... heck, gonna try to give you a sample code:


<form onSubmit="whatever">
<div style="position:absolute; z-index:1">
...input stuff...
</div>

<div style="position:absolute; z-index:0">
<input type="submit" value="">
</div>
</form>

[Tommi]

Originally posted by inview
Genius!
I'll be darned. I had the Submit button as an IMG and an onClick event - which didn't work.

I've never used TYPE="image" and it works perfectly - either submitting the form using this button or pressing the Enter key.

Thanks a bunch - I'm going to use this in all my forms where I'm using custom images for Submits.

you mean <input type="image"> ? How does it look like?

[inview]

Tommi,

I was also beginning to think of using a hidden button somehow but this is much simpler - almost too much! I don't even need the onSubmit event.

Here's the form I have using this new button:

<FORM name="login" method="POST" action="hlogin.asp">
<table>
<tr>
<td>Username:</td>
<td><INPUT type="text" name="Username"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="Password"></td>
</tr>
<TR>
<TD colspan=2><INPUT type="image" NAME="btnSubmit" src="img/icon_login.gif" alt=SUBMIT/></TD>
</TR>
</table>
</FORM>

you were asking if it should be <INPUT> vs <INPUT/> - I think brothercake was making the line XHTML compliant - It works either way.
Thanks for helping with this but hope this helps you too.

[Tommi]

Yes this helps! How about compatibilty with the various browser types and versions? Is this TYPE="image" a common parameter?

[inview]

Good question...I'm an IE man but I think I am going to now have some users on NN.

Maybe brothercake can shed some light.

[Tommi]

I'm going to try this on latest Mozilla and the latest version of Opera...

[beetle]

<input type="submit" />

and

<input type="image" />

are analagous. Interchangeable. The same thing. They only differ in appearance.

Image-type inputs are part of HTML 3.2 so they will certainly work in any browser :rolleyes:

Also, FWIW, the submit() method for forms will not fire the onsubmit event handler.

[brothercake]

Originally posted by beetle
Also, FWIW, the submit() method for forms will not fire the onsubmit event handler.

That's good :) Saves on browser-crashing infinite loops ..

btw - "FWIW"?

[beetle]

Ya know! FWIW (http://www.acronymfinder.com/af-query.asp?String=exact&Acronym=FWIW)!!

Also, FWIW, here's an htc (DHTML behavior) you can use to interface your IE users to that website with your acronym tags ;)<public:component>
<public:attach event="onclick" onevent="launch()" />

<script langauge="JScript">
function launch()
{
var url = "http://www.acronymfinder.com/af-query.asp?String=exact&Acronym=" + element.innerHTML.toUpperCase();
window.open( url, '', 'width=780, height=420, scrollbars=1' );
}
</script>

</public:component>You can see it in action here (http://www.peterbailey.net/test/acronym.htm)

[inview]

Excellent...thanks for the browser compatibility note.

....and bonus on the DHTML. I've added that to my little bag of tricks and will see where I can use components!