Enter 键提交 Ajax 表单

Posted 2023-02-22

【中文标题】Enter 键提交 Ajax 表单

【英文标题】：Enter key to submit Ajax form

【发布时间】：2014-03-11 17:14:03

【问题描述】：

我有一个非常简单的 AJAX 表单，它要求提供电子邮件地址并在提交后将其发送给我。

按回车键时如何让表单提交？

当用户点击提交按钮时运行：

<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>

---

我知道以前有人问过这个问题 -- 我无法让 keypress 函数工作。

我试过没有用：

$("#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. */
        
    
);

表格是#contact_form。

任何帮助将不胜感激......

【参考方案1】：

只需将提交事件绑定到您的表单，然后回车键也将起作用：

$("#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.
    
);

代码在这里：http://jsfiddle.net/6TSWk/6/

【讨论】：

在小提琴中似乎是可选的，但没有按钮它对我不起作用。所以我不得不创建一个按钮并隐藏它。

【参考方案2】：

在每个字段框或复选框中添加新类 => 类 keypressbutton 然后用这个替换你的按键代码，如下：

$(document).on("keypress",".keypressbutton",function(event) 
    var keyCode = event.which || event.keyCode;
    if (keyCode == 13) 
        $("#submit_btn").click();
        return false;
    
);

【参考方案3】：

$("#myform").keypress(function(event)
    if(event.keycode===13) // enter key has code 13 
       //some ajax code code here 
       //alert("Enter key pressed");
    
);

【参考方案4】：

您的if 语句中有两个左括号，但缺少一个右括号。另外，我会更改e.target.type。试试这个：

$("#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;
        
    
);

【参考方案5】：

您可以使用提交按钮，而不是在点击功能上使用按钮。 加载 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) 


                        
        );

        
    );

  );

【参考方案6】：

简单的方法是这样的：

在 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>

在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
        
    );