[英]Enter key to submit Ajax form
I have a very simple AJAX form that asks for an email address and sends it to me after submitting. 我有一个非常简单的AJAX表单,要求提供一个电子邮件地址,并在提交后发送给我。
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. 我知道之前已经问过这个问题 - 我无法使
keypress
功能正常工作。
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
. 表格是
#contact_form
。
Any help would be would appreciated… 任何帮助都会受到赞赏......
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/ 代码在这里: http : //jsfiddle.net/6TSWk/6/
add new class in every fieldbox or checkbox => class keypressbutton then replace your code on keypress with this, below : 在每个fieldbox中添加新类或checkbox => class keypressbutton然后在keypress上替换你的代码,如下所示:
$(document).on("keypress",".keypressbutton",function(event) {
var keyCode = event.which || event.keyCode;
if (keyCode == 13) {
$("#submit_btn").click();
return false;
}
});
$("#myform").keypress(function(event){
if(event.keycode===13){ // enter key has code 13
//some ajax code code here
//alert("Enter key pressed");
}
});
You have two opening brackets in your if
statement and miss a closing bracket. 你的
if
语句中有两个左括号,并且错过了一个右括号。 Also, I would change e.target.type
. 另外,我会改变
e.target.type
。 Try this: 尝试这个:
$("#contact_form").keypress(function (e) {
if ((e.keyCode == 13) && ($('input[name="email"]').is(':focus'))) {
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;
}
}
});
Instead of using button on click function you can use submit button. 您可以使用提交按钮代替使用点击功能按钮。 Load the validate.js file
加载validate.js文件
function validateEmail(email)
{
var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
if (reg.test(email))
{
return true; }
else{
return false;
}
}
$("#test-form").validate({
submitHandler: function(form) {
//form.submit();
var email=$("#email").val();
if(email=='' )
{
// Here you can type your own error message
$('#valid').css("display","none");
$('#empty').css("display","block");
return false;
}
if (!(validateEmail(email))) {
$('#empty').css("display","none");
$('#valid').css("display","block");
return false;
}
else {
$.ajax({
url: "signup.php",
type: form.method,
data: $(form).serialize(),
success: function(response) {
}
});
}
}
});
});
Simple way is this: 简单的方法是:
In HTML codes: 在HTML代码中:
<form action="POST" onsubmit="ajax_submit();return false;">
<b>First Name:</b> <input type="text" name="firstname" id="firstname">
<br>
<b>Last Name:</b> <input type="text" name="lastname" id="lastname">
<br>
<input type="submit" name="send" onclick="ajax_submit();">
</form>
In Js codes: 在Js代码中:
function ajax_submit()
{
$.ajax({
url: "submit.php",
type: "POST",
data: {
firstname: $("#firstname").val(),
lastname: $("#lastname").val()
},
dataType: "JSON",
success: function (jsonStr) {
// another codes when result is success
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.