input form

[Beach Bum]

i have an input form which has an onclick statement which activates some js:

<form name="inputform">
<input type="password" style="background-color: lightgrey; width: 100;" name="inputbox" value="" maxlength="10">
<input type="button" style="background-color: #CE0018; color: white; font-weight: bold; width: 135;" name="button" value="Submit Password"
onmouseover=(document.inputform.button.style.backgroundColor="#029AFE")
onmouseout=(document.inputform.button.style.backgroundColor="#CE0018")
onclick="loadPage()">
</form>

this works fine.

but . . . i would really like the form to accept input whether the person clicks the button OR hits the enter key.

how do i do that?

[gil davis]

<input type="password" style="background-color: lightgrey; width: 100;" name="inputbox" value="" maxlength="10" onkeydown="if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {loadPage(); return false;} else return true;">

Adapted from http://www.faqts.com/knowledge_base/view.phtml/aid/2230/fid/129

[Beach Bum]

gil -

thanks for the solution and link.

it works great with IE6 :)

does not work with NS7 :(

[Beach Bum]

dave -

replacing the button type with submit seems to have no effect in either IE6 or NS7.

[gil davis]

Originally posted by Beach Bum
does not work with NS7 :(

Bummer. It sort-of works in NS 6, but is also tries to submit. So, I change the form tag:

<form onSubmit="return false">

Maybe that will help.

Here's my test page:

<form onSubmit="return false">
<input type="password"
style="background-color: lightgrey; width: 100;"
name="inputbox" value=""
maxlength="10"
onkeydown="if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {alert('c/r'); return false;} else return true;">
<input type="submit">
</form>

[Beach Bum]

gil -

don't want to do that as i also want the button to work.

just looking to make the input more friendly as some people just hit enter as a reaction when they finish typing something.

i will take what you gave me earlier. the folks using IE can either push the button OR hit enter. the NS folks will just have to push the button. not a big deal as the button is right in front of them and 90% of the folks are using IE anyway.

[gil davis]

Originally posted by Beach Bum
don't want to do that as i also want the button to work.

Your button will still work, because it doesn't submit the form. You are simply using the onClick to change pages. That function is not negated by adding the 'onSubmit="return false"' to the form tag.

If you had used an actual 'input type="submit"' or an 'input type="image"' (also does a submit by default), then I could understand your reasoning. But you didn't even have an 'action="whatever"' in your form tag, so I assumed you were not expecting to actually submit the form. If you did, you would see the default action of reloading the same page: the location bar would contain the url with "?inputbox=" and whatever you typed in the password box.

My example included a submit button only for testing. Probably should have removed it when I posted. The default for a textbox without a submit button in the form is to submit when the user presses the "enter" key. Sorry for the confusion.

[Beach Bum]

still does not work in NS7. as i said above - not that big a deal. thanks for your help in getting it going on IE.

[Beach Bum]

turns out the answer is simple. needed to put an action statement in the form tag as follows:

<form name="inputform" action="javascript:loadPage()">

works in both IE6 and NS7. now both the button and the enter key run the loadPage function.

just wanted to post the final resolution in case anyone searches on a similar question.