Develop Reference

How to disable form submission when enter is pressed on input field

UPDATE: I am constructing the form via Javascript, so the form is not there on page load.
I have an input field with id="input", whenever the enter key is pressed, the form gets submitted. So I tried handling it like this.
$("#input").keydown(function (e) {
if (e.keyCode == 13) {
alert("enter pressed");
return false;
}
});
However this does not work, there is no alert and the form still gets sent. How do I solve this?

Use preventDefault() to prevent the form from submitting.
$("#input").keydown(function (e) {
if (e.keyCode == 13) {
alert("enter pressed");
e.preventDefault();
}
});
Example with a form:
$('form').submit(function(e){
e.preventDefault();
});
https://jsfiddle.net/aya6ockv/

Use onkeypress attribute in your input as follows:
<input type="text" onkeypress="myFunction(event)">
<script>
function myFunction(event) {
var x = event.which || event.keyCode;
if(x == 13) {
alert("enter pressed");
return false;
}
}
</script>

I would do it like this and change 'form' to #input. Unless you want to stop this enter submission site wide, then this as is should work well.
$("form").bind("keypress", function(e) {
if (e.keyCode == 13) {
return false;
}
});

Just created a JSFiddle that shows that it works. Check it out
$('#input').keydown(function (e) {
if (e.keyCode == 13) {
alert('alert pressed');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
<input text="name" id="input">
<button type="submit">Submit</button>
</form>

return false is more efficient than e.preventdefault(). Please look at event.preventDefault() vs. return false
$("#input").keydown(function (e) {
if (e.which == 13) {
alert("enter pressed");
return false;
}
});

preventing form to be submitted using jquery

I want to check on form submit that certain condition is satisfied before submitting the form
function checkConditions(e){
if ($('#someId').val() == '') {
console.log('value of #someId is empty');
e.preventDefault();
return false;
}
}
$('form').submit(function (e) {
checkConditions(e);
});
on form submit I'm getting print inside console that value is empty but form is sumbitted eitherway. What I'm doing wrong here?

Try this:
function checkConditions(){
if ($('#someId').val() == '') {
console.log('value of #someId is empty');
return false;
}
return true;
}
$('form').submit(function (e) {
if(!checkConditions()){
e.preventDefault();
return false;
}
});

Disable input when enter key pressed multiple times

How do I make so that when the enter key is pressed multiple times, the site only detects the input once? I have a small bug which occurs whenever the user double taps the enter key in an input box, so what I want to do is only accept the input press once. Thank you so much in advance!!
$('#search_list').keypress(function(e) {
if (e.which == '13') {
}
}

You can prevent repeatedly enter pressing by this way:
var enterPressed = false;
$('#search_list').keypress(function(e) {
if (e.which == '13') {
if( ! enterPressed){
// do some processing
return;
}
enterPressed = true;
setTimeout(function(){
enterPressed = false;
}, 1000);
}
}
Inspired by this post.

var enterPressed = false;
$('#search_list').keypress(function(e) {
if (e.which == '13') {
if( ! enterPressed){
// do some processing
enterPressed = true;
setTimeout(function(){
enterPressed = false;
}, 1000);
}
}
}
I think this way is better.

jQuery Stop submitting form by checking error variable

I have a simple form with some form fields. Some of them are required some are not. The required field are required by adding the class 'required'.
When I submit I check the #contact-form fields and on the basis of there I give the empty field error classes and submit the form yes or no.
Adding the error classes to the fields is not a problem, but checking the "error" variable is. Because I don't know where I can check the error variable.
This is my jQuery code:
$('#contact-form').submit(function (event) {
var errors = false;
$(this).find('.required').each(function () {
if ($(this).val().length < 1) {
$(this).addClass('error');
errors = true;
}
});
if (errors == true) {
event.preventDefault();
}
});
JsFiddle

The following code should do what you want, just give your contact form submit button the id of #contact-form-button.
$('#contact-form-button').click(function(e) { // using click function
// on contact form submit button
e.preventDefault(); // stop form from submitting right away
var error = false;
$(this).find('.required').each(function () {
if ($(this).val().length < 1) {
$(this).addClass('error');
error = true;
}
});
if (!error) { // if not any errors
$('#contact-form').submit(); // you submit form
}
});

$('#contact-form').submit(function (event) {
var errors = false;
$(this).find('.required').each(function () {
if ($(this).val().length < 1) {
$(this).addClass('error');
errors = true;
}
});
if (errors == true) {
event.preventDefault();
return false;
}
return true;
})
if validation cross successfully then it return true for submit the form

I found out that my code just works. The reason I thought it was not working, is because I was still using PHP handling my real website where I made 1 field required and in my jQuery not. This made the confusion.
So the following code works:
$('#contact-form').submit(function (event) {
var errors = false;
$(this).find('.required').each(function () {
if ($(this).val().length < 1) {
$(this).addClass('error');
errors = true;
}
});
if (errors == true) {
event.preventDefault();
}
});

jQuery focus on Alert box with clicking on button

I have a form, after submitting form when button is clicked using jQuery like this.
function validate(){
if($('#firstname').val() =="")
alert("Please enter your first name");
else if($('#lastname').val() == "")
alert("Please enter your last name");
else if( $('#association').val() == "")
alert("Choose your association");
else if($('#association_no').val() == "")
alert("Please enter your association number");
else
$('#register').submit();
}
$(function(){
$(".enter_submit").keyup(function(event) {
if(event.keyCode === 13)
validate();
})
})
The alert box is displaying fine but my issue that When I press enter after alert box is displayed, it gives another alert box instead of getting rid of the alert(Works fine when I click OK with mouse). In FF, it gives #prevent more alerts from this page. So I believe its still focusing on the form even after alert is displayed.

Specify return False after the alert box is displayed. This might not show other alert box at the same time.
function validate() {
if ($('#firstname').val() == "") {
alert("Please enter your first name");
return false;
}
else if ($('#lastname').val() == "") {
alert("Please enter your last name");
return false;
}
else if ($('#association').val() == "") {
alert("Choose your association");
return false;
}
else if ($('#association_no').val() == "") {
alert("Please enter your association number");
return false;
}
else {
$('#register').submit();
return true;
}
}
$(function () {
$(".enter_submit").keyup(function (event) {
if (event.keyCode === 13)
return validate();
});
});
Hope this help
Thanks
Prashant

I fixed this using blur function
$(".enter_submit").keyup(function(event) {
$(this).blur();
if(event.keyCode === 13)
return validate();
})
I figured that the text field was still on focus even when the alert was being displayed so had to take it out of focus i.e, blur it. Thanks to everyone who replied.