CODEWITHSUNDEEP
javascripthtmlcss
Derek WWW
Derek WWW

Reputation: 75

Confused about forms and the submit button

I have a form like the following:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST">
<div align="center">
<br><br>

<br><input type="submit" value="ABC" tabindex=0><br>
<br><input type="button" value="cancel"><br>
</div>
</form>
</body>
</html>

I would like the form to submit when the ENTER button is pressed and would also like the submit button to have have some color around it to show that it's default.

But it seems that I have to click the tab button to make the submit have blue around it as the default.

Is there some way to make it that the submit button is always the default and always shoes a blue circle around it to indicate this?

Also what if I have other input fields on the same html page but outside of the default. What I need is for the form to always submit when I press enter no matter where I am on that page. Is there some way to do this?

Upvotes: 1

Views: 201

Answers (4)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

If you use Jquery you could attach an event handler to the tag HTML (or the document itself). Since events bubble up the DOM, this would intrecept it even if it is outside the form. Then, if the key pressed is RETURN, you submit the form.

$(document).keyup(function(event){
    if (event.keyCode == 13){
         $('form[name=myform]').submit();
     }
});

Upvotes: 0

Austin Hyde
Austin Hyde

Reputation: 27436

On forms, only the currently focused element has the blue outline, and this is typically a platform dependent feature.

That being said, you can customize that outline with a little bit of CSS to make the form look consistent across browsers:

form *:focus {
    outline:2px solid blue;
}

Now, to make the submit button always show that outline, I would give it a class of "default":

<input type="submit" value="ABC" tabindex="0" class="default">

Then change the above CSS to include that class:

form *:focus, input.default {
    outline:2px solid blue;
}

As for submitting the form on hitting enter: so long as an element in the form has focus, hitting enter will submit the form by default. If you want that to happen if the form doesn't have focus, you will need to use a little bit of JavaScript, but I don't recommend it, because as Tomalak says in his answer, you shouldn't change the browser's default behavior.

Upvotes: 0

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385174

The submit should always be the default — whilst the form is focused, which is difficult here because you have no real input fields. What does this form actually do?

Further than that, don't override browsers' default UI behaviour: you'll just confuse your users.

Upvotes: 1

Vinoth Gopi
Vinoth Gopi

Reputation: 734

For your enter-anywhere-submit, I would do it with jQuery. A lil bit of searching led me to this:

Submitting a form on 'Enter' with jQuery?

Upvotes: 0

Related Questions