Due to an issue relating to a horrible mobile device (that work has given me no choice but to work with) I have to stop the use of the enter key from registering in form in HTML. The only way I'd like the data to be submitted is when the submit button is pressed.
Hope this is enough to help work out my problem! If not feel free to ask more.
See here for an example.
Try this submit button:
<input type="button" value="Submit" onclick="document.forms[0].submit();" />
Instead of using type="submit", type="button" won't bind the enter key to this button.
You can use an onsubmit handler to prevent the form from being submitted in cases where it wasn't submitted in the way you wanted it to be. Just return false from the handler to cancel the submission.
Related
I have some forms that use submit butttons like this:
<input type="button" onclick="validateAndSubmit()">
They work fine, but accessibility checkers say there's no submit button in the form, because there isn't one.
I know that type="button" makes it clear that it acts as a button, but I don't know how to indicate to assistive technologies that it acts as a submit button specifically without actually using type="submit". (I'd rather not use an actual submit button, because unexpected javascript errors will submit the form. Of course you can trap errors, it's just less robust in that sense, and I wonder if there's another way.)
Is there an ARIA role or other technique that makes it clear that the button submits the form (assuming everything validates)?
<button type="submit" onclick="validateAndSubmit()">Submit</button>
should do the trick. There is no need for an ARIA role (button) in this case, since the button is used here as defined in the HTML specification.
I don't agree with the two existing answers.
It is true that having a submit button in a form isn't an obligation.
However, if your form is intended to be submitted, there must be a submit button.
The weakness of your button <input type="button" onclick="validateAndSubmit()"> is that you are really obliged to click on this button to trigger the function and submit the form.
However, it is often useful, and most users expect, that the form is submitted when pressing enter while being in any field, not necessarily the submit button.
Typical usecase: type your e-mail, tab, type your password, and directly press enter to sign in, instead of taking the mouse to click on "sign in" or press one more time tab and enter.
Your fake submit button doesn't permit this. You should replace it by a true submit button <input type="submit" /> and use the submit event on the form (<form onsubmit="...">).
If your problem is that an unexpected JavaScript error makes the form being submitted with bad inputs, never forget that you must check again the input server-side.
And just in case, you are perfectly allowed to use try...catch...finally and do event.preventDefault() in the finally clause if you are submitting via AJAX and if you aren't really sure that your code will never trigger errors; that's not a bad defensive programming solution.
Form elements do not need to have a submit button. There's no such obligation.
The accessibility checker you use is wrong about that.
W3C use some examples of forms without submit buttons in their documentation :
Finally, to make the form submittable we use the button element:
I have a login form, and I'm trying to have it submit when I press the enter button (after having filled it out). I'm fine with using jQuery. How would I do this?
As long as you are focused on one of the fields and hit enter, it will submit. This is the default behavior for all browsers that I know of. You actually don't need the <input type="submit" /> as others have said, but of course you should (and probably do).
You only need javascript if you want this behavior without focusing on an input, but I would strongly advise against it because no one will be expecting it. Just let users interact with the form the way they are used to, no surprises.
I have a form with two submit buttons - one for Cancel and the other is for Saving form values to the DB . When Enter key is pressed, the Cancel button submits the form instead of the Save button submitting the form. How can I make the Save button submit the form when Enter key is pressed?
Thanks,
Your form should not have two submit buttons. Have the Save button be of type submit, and the Cancel button be of type button.
EDIT: I'm going to update this answer to handle several issues that were brought up.
Nothing I've seen in the HTML specification (i.e. the DTD) disallows two submit buttons in one form, but the exact issue the OP mentioned can occur. In his or her case, the solution is to make the Cancel button of type button and add in the following JavaScript:
<input type="button" value="Cancel" onclick="window.location.href='nextpage.html';"/>
Here, one would replace nextpage.html with the appropriate URL. Or, this.form.action can be the new location if the redirection is to the action of the form.
If the OP wants to be safe and avoid JavaScript, this could only be a (perhaps styled) hyperlink.
I understand that double posts has been a problem with forms forever.
I am using the token server-side method to handle this issue, but I find that it doesn't seem to work flawlessly. I have the system set to create a unique token for every form, and then record that token in a SESSION after it has been posted.
The SESSION is actually an array of every form the user has ever posted (to be reset when the SESSION expires), and on each submit the system checks in_array() to see if that form has ever already been posted... if so then it stops them.
Seems like in production the system cannot record the completed token into the SESSION quick enough to deal with double clicks on the submit button. So revisiting an old page is handled fine, but the immediate double click of the submit creates a problem.
Not sure what I can do to fix this issue.
How about disabling the submit button immediately upon clicking (via Javascript, with an onClick handler)? This obviously won't fix all issues, but it might cover the cases where the system isn't quick enough to record the token into SESSION.
I have had this issue as well with something internal for the company I am working for. In my experience people click multiple times because they don't think anything is happening. What I have done is to remove the ability to submit the form and display some sort of message saying that the information is being processed.
Pop-up divs and just disabling the button work well.
I had same problem and I resolve with jQuery.
I added class singleClick in submit button there I would like to have single click and also added some javascript code
<input type="submit" class="singleClick" value="Send Request">
$(function () {
$('.singleClick').on('click', function () {
$(this).attr('disabled', true);
});
});
I've got a form like this:
<html>
<body>
<form onSubmit="alert('Just got submitted');">
<p>
Hello: <input class="field" type="text"/><br/>
Goodbye: <input class="field" type="text"/><br/>
</p>
</form>
</body>
</html>
which in one browser submits happily on user pressing enter from one of the fields, and in another browser, doesn't. Oddly, if I remove the second field, it works in both.
My question is really - is it okay to have a form with no explicit submit element? I really like this behaviour.
Having no explicit submit is poor user experience. Your typical end user has, over the past decade, learned a set of principles for website form interaction. Namely, you can tab between fields, you can select lots of checkboxes, and you have a click a button to actually submit your data.
I've tried developing forms in the past that automatically update with JavaScript, and I got countless complaints from users. They wanted a button or they didn't believe it was working. So in that particular case, I kept the form working as it originally had, but added a submit button that really didn't do anything. They were happy.
These days I just build out my forms with normal submit buttons. Not only do users expect it, but it allows for much cleaner progressive enhancement between non-JS enabled browsers.
It's certainly more than possible to have a form with no submit element, especially if you use JavaScript events to submit the form. I highly suggest you use the onkeypress event to detect the "enter" key being pressed rather than depending on the browser to just accept the "enter" key if you make a form with no submits, to make it cross-browser compatible.
However, I think it's bad form to leave out a submit button of some sort. (It doesn't necessarily have to be an input of type "submit", could be "button" or an image you click.) It's just a standard to have forms that people fill out submitt via a button, and you're taking that away, which could confuse many users who are used to a button. It definitely violates the principles of Don't Make Me Think by presenting an alternate form to the norm.
It's not a good idea. You point out the reason yourself - it doesn't work in all browsers. Also, it's not what people expect, so it may confuse people.
It depends on what you mean with "ok".
If you mean valid (x)html, well it's no problem at all, but on the user side, it's a usability issue. But it also depends on the target audience of your website. If its for tech savvy people, then it's ok.
You could create an input button like this:
<input type="button" onclick("doSomething()") />
The doSomething() would be a function in Javascript that would send your form data to a server-side script. This way you wouldn't have a submit behavior.
Submitting a form on 'Enter' with jQuery?
Also, I'd leave the button in the form, but hide it with javascript ($('#submit').hide()). It means that if the user has disabled script or f.ex. uses some other device, he'll see the default way to submit the form.
If you want to have two buttons which generate two different behavior when submit. what you can so is something like that:
or you can put the form submit inside function1() or function2()