I have a number of fields that are either filled (inputs) or selected (dropdowns) that working together to create a new page.
I'm attempting to validate the entries and prevent the page creation if anything is wrong with the inputs. No form is being used.
The problem is the $("#netsubmit").submit(function( event )) never gets run when the submit is clicked. No errors are thrown, no indication why its not processing.
My html for the input is:
<input id="netsubmit" type="submit" value="Submit" onClick="newNet()"
title="Submit The New Net">
My JQuery javascript is:
$(document).ready(function () {
$("#netsubmit").submit(function( event ) {
alert("in it");
var callentered = $("#callsign").val();
if (callentered == "") {
event.preventDefault();
alert("Please enter a call sign first.");
$("#callsign").focus();
}
});
});
It is likely not working because as you said you aren't using a form element. From the jquery docs:
The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to form elements
You could use the function specified by your onclick event onClick="newNet()" to validate the data.
.submit() can only be used with <form> elements, as stated in the documentation:
It can only be attached to <form>elements.
If you do not want to use the form tag, you can switch to using .click() instead, like so:
$("#netsubmit").click(function(event) {
alert("in it");
});
If you read the documentation for submit on MDN it explicitly says
The submit event is fired when a form is submitted.
Note that submit is fired only on the form element, not the button or
submit input. (Forms are submitted, not buttons.)
if you do
<form id="myform">
<input id="netsubmit" type="submit" value="Submit" onClick="newNet()" title="Submit The New Net">
</form>
and then change the code
$(document).ready(function () {
$("#myform").submit(function( event ) {
alert("in it");
var callentered = $("#callsign").val();
if (callentered == "") {
event.preventDefault();
alert("Please enter a call sign first.");
$("#callsign").focus();
}
});
});
it works fine
I have a fairly complex form which has multiple stages with many different text fields and text areas. The environment it is used within used barcodes which hit enter by default, and that is by choice as they scan a multitude of products using them so turning the enter function off has become a no-go.
I am using a form wizard script which handles client-side validation during the input stage. This script is interrupted by the enter key being hit during filling out the form and refuses to submit until the page is refreshed.
Submit <i class="m-icon-swapright m-icon-white"></i>
I have the following code which works to prevent enter on the form and allows the form to submit when the link above is clicked.
$(window).keydown(function (event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
However this prevents enter being used within textarea. I did a bit of research and tried using the is() operator from jQuery
$(document).ready(function () {
$(window).keydown(function (event) {
if (event.keyCode == 13 && !event.is("textarea")) {
event.preventDefault();
return false;
}
});
});
This doesn't work, it fails to prevent the enter key in inputs and stalls the form from submitting as it did prior.
Finally this is the javascript that handles submitting the form if validation passes on the form
$('#form_wizard_1 .button-submit').click(function () {
// Can put more onsubmit processing here
document.getElementById('submit_form').submit();
}).hide();
Can anyone suggest how I can prevent the enter key on all inputs EXCEPT for textareas. I don't pretend to be a JavaScript developer, although I am trying to learn as I go. The following are articles I have read and either attempted to adapt code or failed to understand how it would apply to me in the correct manner:
Prevent users from submitting a form by hitting Enter
Prevent Users from submitting form by hitting enter #2
disable enter key on page, but NOT in textarea
*In regards to the last link, I need a global resolution that automatically prevents it on all textareas that may exist within the form.
As always, thank you for your assistance.
JavaScript
Use KeyboardEvent.key and Element.matches(selectors)
document.querySelector("#myForm").addEventListener("keydown", (evt) => {
if (evt.key === "Enter" && !evt.target.matches("textarea")) {
evt.preventDefault(); // Don't trigger form submit
console.log("ENTER-KEY PREVENTED ON NON-TEXTAREA ELEMENTS");
}
});
<form id="myForm">
<input name="inp" placeholder="Click here and hit Enter" type="text">
<textarea name="txa" placeholder="Click here and hit Enter"></textarea>
<input type="submit">
</form>
jQuery
Use !$(event.target).is("textarea")
Also use Event.key, or use Event.which (instead of Event.keyCode; jQuery normalizes it for cross-browser)
jQuery(function($) { // DOM ready
$('form').on('keydown', function(ev) {
if (ev.key === "Enter" && !$(ev.target).is('textarea')) {
ev.preventDefault(); // Don't trigger form submit
console.log("ENTER-KEY PREVENTED ON NON-TEXTAREA ELEMENTS");
}
});
});
<form>
<input name="inp" placeholder="Click here and hit Enter" type="text">
<textarea name="txa" placeholder="Click here and hit Enter"></textarea>
<input type="submit">
</form>
<script src="//code.jquery.com/jquery-3.6.1.js"></script>
I have a requirement where user cannot submit the form if he press enter key unless focus will be on submit button.
Using following code, I am able to do that, but now the issue is, if I have any enter key event attached specific to any field (e.g. if I want to attach enter key event to one textfield for some special requirement), it is not allowing me due to the script I have written below..
<script>
$(document).keydown(function(event) {
if (event.keyCode == 13) {
var $focusedItem = $(document.activeElement);
if($focusedItem.is("button") || $focusedItem.is("a") || $focusedItem.attr("type") == "submit") {
$focusedItem.click();
}
else {
event.preventDefault();
}
}
});
</script>
Any solution where I can restrict user from submitting form on pressing enter key, if focus is not on the submit button but at the same time if there will be any enter key event attached to any form-field, that should also work.
If you had created a JsFiddle it would be easier to help. However, I'm thinking you should do something like this:
if($focusedItem.attr('id') == 'submitButton') {
if (event.keyCode == 13) {
submit the form
}
}else if ($focusedItem.attr('id') == 'Anothertextarea') {
if (event.keyCode == 13) {
do something special
}
}else{
if (event.keyCode == 13) {
return null;
}
}
Remove the line event.stopPropagation(); from your script, you need only the preventDefault() (prevents the submit).
When you do stopPropagation() you are stopping all other keypress events on the element.
Try that and see if it fits your needs:
--DEMO--
$(document).on('submit', 'form', function (e) {
e.preventDefault();
}).on('click', ':submit', function (e) {
if (!$(document.activeElement).is(':submit')) return;
var form = $(this).closest('form').length ? $(this).closest('form')[0] : $('#' + $(this).attr('form'))[0];
form.submit();
});
Maybe I'm missing the point, this is basically a standard html issue.
Don't give the form an submit action (move it to a click event directly on the button) and change all button types to button instead of submit.
I can't remember if simply removing the submit from the form is enough. If not then just do onSubmit="return false;" I think that does it.
However as a note the requirement for this as a global behavior is probably wrong and if its for the government then you will probably get in trouble since its not compliant with accessibility guidelines.
I have the following javascript in my page which does not seem to be working.
$('form').bind("keypress", function(e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
});
I'd like to disable submitting the form on enter, or better yet, to call my ajax form submit. Either solution is acceptable but the code I'm including above does not prevent the form from submitting.
If keyCode is not caught, catch which:
$('#formid').on('keyup keypress', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});
EDIT: missed it, it's better to use keyup instead of keypress
EDIT 2: As in some newer versions of Firefox the form submission is not prevented, it's safer to add the keypress event to the form as well. Also it doesn't work (anymore?) by just binding the event to the form "name" but only to the form id. Therefore I made this more obvious by changing the code example appropriately.
EDIT 3: Changed bind() to on()
Usually form is submitted on Enter when you have focus on input elements.
We can disable Enter key (code 13) on input elements within a form:
$('form input').on('keypress', function(e) {
return e.which !== 13;
});
DEMO: http://jsfiddle.net/bnx96/325/
Even shorter:
$('myform').submit(function() {
return false;
});
$('form').keyup(function(e) {
return e.which !== 13
});
The event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.
which docs.
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.which == 13) {
e.preventDefault();
return false;
}
});
This solution works on all forms on website (also on forms inserted with ajax), preventing only Enters in input texts. Place it in a document ready function, and forget this problem for a life.
Most answers above will prevent users from adding new lines in a textarea field. If this is something you want to avoid, you can exclude this particular case by checking which element currently has focus :
var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
e.preventDefault();
return false;
}
if you just want to disable submit on enter and submit button too use form's onsubmit event
<form onsubmit="return false;">
You can replace "return false" with call to JS function that will do whatever needed and also submit the form as a last step.
The simple way is to change type of button to button - in html and then add event in js...
Change from this:
<form id="myForm">
<button type="submit">Submit</button>
</form>
To
<form id="myForm">
<button type="button" id="btnSubmit">Submit</button>
</form>
And in js or jquery add:
$("#btnSubmit").click(function () {
$('#myForm').submit();
});
The overkill of having to capture and test every keystroke for the ENTER key really bugs me, so my solution relies on the following browser behavior:
Pressing ENTER will trigger a click event on the submit button (tested in IE11, Chrome 38, FF 31) **
(ref: http://mattsnider.com/how-forms-submit-when-pressing-enter/ )
So my solution is to remove the standard submit button (i.e. <input type="submit">) so that the above behavior fails because there's no submit button to magically click when ENTER is pressed. Instead, I use a jQuery click handler on a regular button to submit the form via jQuery's .submit() method.
<form id="myform" method="post">
<input name="fav_color" type="text">
<input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>
<script>
$('#form-button-submit').click(function(){
$('#myform').submit();
});
</script>
Demo: http://codepen.io/anon/pen/fxeyv?editors=101
** this behavior is not applicable if the form has only 1 input field and that field is a 'text' input; in this case the form will be submitted upon ENTER key even if no submit button is present in the HTML markup (e.g. a search field). This has been standard browser behavior since the 90s.
You can do this perfectly in pure Javascript, simple and no library required. Here it is my detailed answer for a similar topic:
Disabling enter key for form
In short, here is the code:
<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>
This code is to prevent "Enter" key for input type='text' only. (Because the visitor might need to hit enter across the page) If you want to disable "Enter" for other actions as well, you can add console.log(e); for your your test purposes, and hit F12 in chrome, go to "console" tab and hit "backspace" on the page and look inside it to see what values are returned, then you can target all of those parameters to further enhance the code above to suit your needs for "e.target.nodeName", "e.target.type" and many more...
I don't know if you already resolve this problem, or anyone trying to solve this right now but, here is my solution for this!
$j(':input:not(textarea)').keydown(function(event){
var kc = event.witch || event.keyCode;
if(kc == 13){
event.preventDefault();
$j(this).closest('form').attr('data-oldaction', function(){
return $(this).attr('action');
}).attr('action', 'javascript:;');
alert('some_text_if_you_want');
$j(this).closest('form').attr('action', function(){
return $(this).attr('data-oldaction');
});
return false;
}
});
In firefox, when you at input and press enter, it will submit it's upper form. The solution is in the will submit form add this:
<input type="submit" onclick="return false;" style="display:none" />
$('#FormID').on('keyup keypress', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});
The following code will negate the enter key from being used to submit a form, but will still allow you to use the enter key in a textarea. You can edit it further depending on your needs.
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio") || (node.type=="checkbox")) ) {return false;}
}
document.onkeypress = stopRKey;
</script>
3 years later and not a single person has answered this question completely.
The asker wants to cancel the default form submission and call their own Ajax. This is a simple request with a simple solution. There is no need to intercept every character entered into each input.
Assuming the form has a submit button, whether a <button id="save-form"> or an <input id="save-form" type="submit">, do:
$("#save-form").on("click", function () {
$.ajax({
...
});
return false;
});
Here is a simple JavaScript solution without using different variations of handling keydown or keypress events:
document.forms[0].addEventListener('submit', function(e) {
if(document.activeElement.getAttribute('type') !== 'submit') {
e.preventDefault();
}
});
Submitting the form will occur only when the active element on your page is the submit button.
So you can submit the form by clicking on your submit button or by pressing the ENTER key when the submit button has focus.
I heard which is not recommended, so change Best rated answer to this.
$('#formid').on('keyup keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
return false;
}
});
ref. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which
When the file is finished (load complete), the script detect each event for " Entry " key and he disable the event behind.
<script>
$(document).ready(function () {
$(window).keydown(function(event){
if(event.keyCode == 13) {
e.preventDefault(); // Disable the " Entry " key
return false;
}
});
});
</script>
Complete Solution in JavaScript for all browsers
The code above and most of the solutions are perfect.
However, I think the most liked one "short answer" which is incomplete.
So here's the entire answer. in JavaScript with native Support for IE 7 as well.
var form = document.getElementById("testForm");
form.addEventListener("submit",function(e){e.preventDefault(); return false;});
This solution will now prevent the user from submit using the enter Key and will not reload the page, or take you to the top of the page, if your form is somewhere below.
How about this:
$(":submit").closest("form").submit(function(){
$(':submit').attr('disabled', 'disabled');
});
This should disable all forms with submit buttons in your app.
I am trying to trigger the submit button when a user presses enter. Works great for all browsers except Internet Explorer 9. Strange thing is that IE insists on also triggering the click for another button I never told it to. Am I doing something wrong or how to fix this?
Below is my code. Pressing enter in IE triggers the submit click as expected, but for some reason also triggers the "some button" click (even without my keypress listener):
$('input[type=submit]').click(function () {
alert('Submit click');
});
//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
var keycode = event.keyCode || event.which;
if (keycode == 13) $('input[type=submit]').click();
});
//ROUTE CLEAR HANDLER
$('button').click(function () {
alert('Button click');
});
You can see the bug in action here: http://jsfiddle.net/h64xD/
Here are a couple of things to consider:
IE9 counts the <button/> element as type="submit" by default. So to make it non-submit, you have to be explicit:
<button type="button">Some button</button>
If you do that, you will notice that the emulated click event now doesn't trigger the <button/> but still fires 2 events. The reason is that, because you haven't explicitly defined a <form/> element, IE9 assumes the controls as being in a form, and thus pressing enter in the textbox triggers 2 events:
the one that you are emulating
the default form submit button behaviour
So again to get around this issue, you have to be explicit:
<button type="button">Some button</button>
<form><input type="text" /></form>
<input type="submit" value="Submit" />
Now, these are the reasons that you are seeing the behaviour in IE. #MrSlayer's answer caters to the second issue of stopping the keypress event after you have satisfactorily handled it, using preventDefault()
The Enter key has a default behavior to submit, so you need to prevent the default behavior from executing. Because the button tag is, by default, type="submit" it is executing that button when the Enter key is pressed.
//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
var keycode = event.keyCode || event.which;
if (keycode == 13)
{
event.preventDefault();
$('input[type=submit]').click();
}
});
How about triggering the form's submit instead of a button click?
$('input[type=text]').keypress(function(e) {
var keycode = event.keyCode || event.which,
frm = $(this).closest('form');
if (keycode == 13) {
e.stopPropagation();
frm.submit();
return false;
}
return true;
});
--EDIT--
Updated Slightly to stop the event propagation.
First off, you don't need to manually attach an event to submit a form when the user presses enter - the browser already handles that.
Oddly enough, this was to do with the order of the elements, implicit form-associations, as well as the fact that IE handles buttons as submit elements.
Try swapping the order of these buttons to see what I mean:
<input type="text" />
<input type="submit" value="Submit" />
<button>Some button</button>
Naturally, the browser is already instructed to listen to respond to the Enter on a text-input. This results in the browser clicking the associated submit button. Further, since you haven't explicitly provided a form, or associated elements with one another via their form attribute, the browser is attempting to make that relationship for you.
In your code, the <button> element was assumed to be the submit button of the text-input (because it was the first submit button in the implicit form). As such, anytime you press Enter on the text-input, the browser naturally raises the click event of the associated button.
If you re-order the elements, as I have above, we see the opposite take place. IE associates the other <input> element with the text-box. And pressing Enter on the text-box implicitly raises the click event on the submit input.
You can confirm this behavior by comparing the .form attributes of various elements. For instance, adding some id values will give us easier access to these:
<button id="fiz">Some Button</button>
<input id="foo" type="text" />
<input id="bar" type="submit" value="Submit" />
Then run some quick comparisons:
var button = document.getElementById("fiz");
var text = document.getElementById("foo");
var submit = document.getElementById("bar");
button.form === text.form; // true
submit.form === text.form; // true
button.form === submit.form; // true
So in the end, it's up to you to remove the ambiguity between the two buttons, by declaring the <button> element to be type='button', or by placing it after the intended submit button.