Enter key to submit Ajax form
20,917
Solution 1
Just bind the submit event to your form, and then the enter key will also work:
$("#contact_form").submit(function (e) {
e.preventDefault();
// Get input field values
var user_email = $('input[name=email]').val();
// Simple validation at client's end
// We simply change border color to red if empty field using .css()
var proceed = true;
if (user_email === "") {
$('input[name=email]').css('border-color', 'red');
proceed = false;
}
if (proceed) {
// Insert the AJAX here.
}
});
And the code is here: http://jsfiddle.net/6TSWk/6/
Solution 2
add new class in every fieldbox or checkbox => class keypressbutton then replace your code on keypress with this, below :
$(document).on("keypress",".keypressbutton",function(event) {
var keyCode = event.which || event.keyCode;
if (keyCode == 13) {
$("#submit_btn").click();
return false;
}
});
Solution 3
$("#myform").keypress(function(event){
if(event.keycode===13){ // enter key has code 13
//some ajax code code here
//alert("Enter key pressed");
}
});
Author by
univers_
Updated on September 30, 2020Comments
-
univers_ over 3 years
I have a very simple AJAX form that asks for an email address and sends it to me after submitting.
How can I can I get the form to submit when hitting the enter key?
This runs when user clicks submit button:
<script type="text/javascript"> $(document).ready(function () { $("#submit_btn").click(function () { // Get input field values: var user_email = $('input[name=email]').val(); // Simple validation at client's end // We simply change border color to red if empty field using .css() var proceed = true; if (user_email === "") { $('input[name=email]').css('border-color', 'red'); proceed = false; } // Everything looks good! Proceed... if (proceed) { /* Submit form via AJAX using jQuery. */ } }); // Reset previously set border colors and hide all message on .keyup() $("#contact_form input, #contact_form textarea").keyup(function () { $("#contact_form input, #contact_form textarea").css('border-color', ''); $("#result").slideUp(); }); }); </script>
I know this question has been asked before -- I'm having trouble getting the
keypress
function to work.I tried this to no avail:
$("#contact_form").keypress(function (e) { if ((e.keyCode == 13) && (e.target.type != "textarea")) { e.preventDefault(); // Get input field values var user_email = $('input[name=email]').val(); // Simple validation at client's end // We simply change border color to red if empty field using .css() var proceed = true; if (user_email === "") { $('input[name=email]').css('border-color', 'red'); proceed = false; } // Everything looks good! Proceed... if (proceed) { /* Submit form via AJAX using jQuery. */ } } });
The form is
#contact_form
.Any help would be would appreciated…
-
gkonuralp about 8 yearsSeems optional in fiddle but it doesn't work for me without a button. So I had to create a button and hide it.