Monday, July 16, 2007

HTML Single Text Field Submit Caveat

This is something that I discovered by accident and thought it was a bug till I read this in the HTML specification:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

I was using the name of the button clicked to identify the action to take when I started receiving a null value on some occasions. After a little investigation, I realized that if I clicked the button, the code worked fine; but if I pressed the Enter key while typing in the text field, I would get a null value for the button.

If there is only one text field in a form along with a submit button, pressing Enter would cause a form submission as usual, but, the submit button would not be passed. The text field would be the recipient of the request to submit the form.

Consider this simple form that submits to itself using the GET method ( default ) so that the query string can be used to easily verify the parameters being passed.
<html>
    <body>
        <form>

            <input type="text" name="loneTextField" />

            <input type="submit" name="theSubmitButton" value="Click Me" />

        </form>
    </body>
</html>
On clicking on Click Me, the query string is:

submitCheck.html?loneTextField=Test+Contents&theSubmitButton=Click+Me

whereas on pressing Enter in the text field:

submitCheck.html?loneTextField=Test+Contents

You can easily work around this though and it's not an issue if you don't need the button, but it's worth knowing.

6 comments:

Anonymous said...

>You can easily work around this though

Any suggestions on HOW to work around it?

Nice documentation of the feature(its one I've come across before) but you could make the article better by actually suggesting a couple of approaches to combat this issue

Also a discussion of javascript events and how they are affected by this issue might also be in order. (button onclick, form onsubmit)

Anonymous2 said...

> ..., but it's worth knowing.

I agree that it is indeed worth knowing. Thanks for pointing this out as I have been trying to figure out what was wrong with a certain page for a few hours already.

@Anonymous: A possible workaround would be to add a dummy invisible textfield (you can use css: i.e. 'display: none')

no.good.at.coding said...

@Anonymous: Your comment seems to have slipped past me; I don't remember reading it, sorry. I'll update the post.

@Anonymous2: You're welcome :) Glad it helped. And you're right, the CSS hack is what I used.

If you need some JavaScript function to be called OnSubmit of the form, consider placing using the form's OnSubmit property instead of the button's.

leS said...

Thanks a Lot Boss...

That css thing worked fine ...
Thanks for u all...

Arun said...

You saved me decent amount of time. Thanks for posting.

Pari Nidhi said...

The Central Board of Secondary Education (CBSE) Class X examination was scrapped in and replaced with the current Continuous and Comprehensive Evaluation (CCE) that provides for tests and grading through the year as a means to reduce pressure on students. http://www.CbseResults.Nic.In/, cbseresults.nic.in, www.cbseresults.nic.in