Submit button and Enter button

[trojnfn]

All of my forms have a submit button to process the page. However, a user filled out the form and hit the enter key on the keyboard instead of the submit button on the form,and nothing happened.

Needless to say, he complained,and now the boss said that all enter buttons on the keyboard should function the same as the submit button on the page.

I dont think I have ever done this before. Does this require javascript code to make both function the same, or is there anohter method ?

[ilssac]

Unfortunately the Normal behavior for most browsers is that the enter key will submit a form.

If your form does not do this, you have done something to circumvent the normal browser behavior and that is what would need to be addressed.

Do you have any JavaScript already in play on this form or page?  Is this a basic HTML form or some type of Flash or Ajax form?

[trojnfn]

It is just a basic htlm/coldfusion form.

There is already some javascript code to validate the entries when the form is submitted using the submit button.

Also, the form submits to itself instead of an action page.

With that said, is the existing javascript codes overriding the enter button on the keyboard ?

Someone told me there was a quick fix with some minor javascript code, but I do not want to go to each page and apply the code. So if the existing enter button on the keyboard already functions as a submit button, then that would be great, just need to figure out why it is not working.

[trojnfn]

ok,I was playing around with my form and the enter button and I think I found the problem, just not the solution.

The submit button is <input type="submit" name="btnSubmit" value="Submit">

The form submits to itself, so when the form is first entered, it checks for the submit  button :

<cfif isDefined("form.btnSubmit")> and if true, processes the form.

So that is why the enter button is disabled.

Now what is the command for the enter button so that I can check for btnSubmit or the enter button ?

[ilssac]

That shouldn't be the way it works.

With any browser I work with, if you hit the enter key, the submit input is activiated and the form is submitted.

I'm guessing it is the javascript.

A simple test would be to make a simple form page with no javascript and see what the funtionality is.

<form action="formTest.cfm" method="post">
    <input type="text" name="txtTest" />
    <input type="submit" name="btnSubmit" value="Submit">
</form>

<cfdump var="#form#">

I did notice somehing when I played with the above code.  If the browser's focus was not in the text control the enter key did not submit the form.

So I'm guessing that the focus matters as well.

[trojnfn]

I created a basic form based on your example and the form submits with the button or the enter key . I submit the form to itself instead of an action page,

and the 'form submitted' message is displayed. 

Here is my test code :

<cfif structkeyexists(form, "btnSubmit")>  or using <cfif isDefined("form.btnSubmit")>
form submitted
<cfabort>
</cfif>

<form action="testForm.cfm" method="post">
    <input type="text" name="txtTest" />
    <input type="submit" name="btnSubmit" value="Submit">
</form>

<cfdump var="#form#">

</form>

However, I did notice that if I have a textarea for comments, the enter key does not work and just adds lines. Only the submit key works if comments are entered in textarea.

Also, as Dan noted, if there are pulldowns, the enter key does not submit the form, only the submit button works.

Is this the limitation or is there something else that can be done ? I think I went thru all the forms in my application testing the enter key and they all seem to work except for the textarea and the pulldown. Also, I noticed that if I have a button defined in the form that will go to another form, then the enter key does not work.

[Dan_Bracuk]

Regarding the enter key when the focus is on a dropdown, you can always javascript it.  Google "javascript enter key pressed" for code samples.  For textareas, having the enter key produce a carraige return and line fee in the textarea is what most people expect to happen.  I wouldn't mess with that one.

Regarding the other behaviour, in order for the enter key to submit the form, the focus must be somewhere in the form.  Maybe when you submit to the same page, the focus goes elsewhere.

[trojnfn]

Does this make sense ?

I tried goole for some answers and came upon this one post that said that as long as there is an input type='submit' command in the form, the enter key will submit the form. They have the code as :

<input type="submit"  style="display:none;"/>. This will put the submit command in the form but just not display the button, and the enter key will submit the form ? Our servers are down for the holidays so I cannot test this out.

Also, this does not address the problem of the textarea ? If the textarea is filled out and the enter key just adds or skips lines but does not submit, then the only way to submit the form is using the submit button and the enter key will never work ?

[Dan_Bracuk]

That answer was not correct.  In order for the Enter Key to submit the form, all these conditions must be met.

1.  You need an input type="submit".

2.  The user's curser must be focused on a form element.

3.  That form element can't be a dropdown, text area, an input type="reset", or any other buttons with onClick events.

Regarding textareas, if you managed to write some js that would submit the form with an enter key, how would the users compose mulitple paragraphs in the text area?

[trojnfn]

The first two conditions make sense to me. But the third one, where the form elemenet cannot be a pulldown or textarea, does that basically make the enter key  submitting the form a moot point, if there are pulldowns and textareas ?

[Adam Cameron.]

You might want to read Dan's post mor closely.  It's only if the currently focused input is a textarea that [ENTER] doesn't fire the submit (given the other criteria he mentions too).

Intrinsically a textarea is for entering multiline data, so the ENTER key must be used for entering line breaks in a textarea when it has the focus, rather that submitting the whole form.  It makes no sense to expect ENTER to submit the form when a textarea has the focus.

--

Adam

[trojnfn]

I understand his post. I was asking if the form does have a textarea and the user is in there entering a comment, the form can only be submitted with the submit button, and the enter key becomes a moot point (unless he moves ouf of the textarea to another field).

[ilssac]

While the focus is in the text area, the enter will not submit the form, it has another purpose in that control.

To submit the form, the user would have to move the focus.  This can be done with the keyboard by pressing the Tab key.

[Dan_Bracuk]

Ian's answer is not quite complete.  If the focus is in a dropdown, the enter key will not submit the form.  The OP can determine the relevance.