Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
179
rated 0 times [  181] [ 2]  / answers: 1 / hits: 22763  / 11 Years ago, thu, february 13, 2014, 12:00:00

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…


More From » php

 Answers
28

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/


[#72554] Tuesday, February 11, 2014, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
harrisonnelsonb

Total Points: 63
Total Questions: 112
Total Answers: 97

Location: Kazakhstan
Member since Mon, Sep 26, 2022
2 Years ago
;