Form Submit Image Doesn't Submit on Enter

Recently I was working on a simple ‘Go to page #’ form for a book list with multiple pages. Usually, this works without a hitch but something on this page was stopping the ‘Enter’ key functionality to submit the form. When a user types in a page # into the input field and clicks the go button (input type="image", in this case), the form submits fine. I discovered the root of this problem was actually the input button and our use of input type="image" instead of input type="submit". The submit button code was using input type=”image” instead of input type=”submit” but the goal was to have it function in the same way.

However, when a user inputs a page # into the input field and presses the ‘Enter’ (or return) key, the page just refreshes.

The button code looks like this:

<input src="/images/btn_go.gif" alt="GO" class="go_btn" name="navigateGo" type="image" />

The fix was simple:
Use an actual submit button and style it with a background image using CSS.

<input class="go_btn" name="navigateGo" type="submit" />

W3 specifies VALUE is not required for submit buttons.

Has anyone run into this problem and discovered an alternative solution?

Leave a comment