zoukankan      html  css  js  c++  java
  • 按回车键提交表单!

    今天在项目中遇到了,按回车键Ajax去后台提交!

    刚开始没注意,没有<input type="submit">怎么实现回车提交了!只有一个<a class="userBut" id="userBut" href="javascript:void(0);">&nbsp;&nbsp;</a>。

    查了查百度,找到了答案

                  1、如果表单里有一个type=”submit”的按钮,回车键生效。 
                  2、如果表单里只有一个type=”text”input,不管按钮是什么type,回车键生效

    <form>
       <div class="p_box lxUser">
                <div class="userBorder">
                    <h2>输入邮箱</h2>
                    <div class="userTable">
                        <lable for="Email"><span> 邮箱:</span></lable>
                        <input type="text" name="Email" id="Email" />
                        <a class="userBut" id="userBut" href="javascript:void(0);">&nbsp;&nbsp;</a>
                    </div>
                </div>
       </div>
    </form>

    js代码如下:

    <script type="text/javascript">
        $(function () {
            $(":input[type=text]").bind("blur", function () {
                var _this = $(this);
                if (_this.val().length == 0) {
                    return false;
                }
                else {
                    if (_this.val().match(/^\w+((-\w+)|(\.\w+))*\@@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) == null) {
                        $(".userRed").show().find("#textfont").html("请输入正确的邮箱");
                        return false;
                    }
                    else {
                        $(".userRed").hide();
                        return true;
                    }
                }
                return true;
            })
    
            //提交表当操作
            var submitForm = function () {
                var data = $("form").serialize();
                $.ajax2({
                    url: '@Url.Action("EnsureYourEmail", "FindPass")',
                    data: data,
                    type: "POST",
                    dataType: "json",
                    success: function (data) {
                        if (data.code) {
                            location.href = data.href;
                        }
                        else {
                            $(".userRed").show().find("#textfont").html(data.msg);
                        }
                    }, error: function () {
                        alert("出错了!");
                    }
                })
            }
    
            //回车键提交表单
            $("form").submit(function () {
                submitForm();
                return false;
            })
    
    
            //点击按钮提交表单
            $("#userBut").click(function () {
                $(":input[type=text]").trigger("blur");
                if ($(".userRed:visible").length > 0 || $("#Email").val() == "" || $("#Email").val() == null) {
                    return false;
                }
                submitForm();
            })
        })
    </script>
    
    
  • 相关阅读:
    基于聚类和神经网络的图像颜色提取和评分方案
    spring cloud单点登录
    普通spring jsp+mybatis项目修改为springboot + jsp +mybatis项目
    Java使用RSA加密解密签名及校验
    开源项目源代码阅读清单
    git 命令 —— checkout
    集大成者 —— 荀子
    Scikit-learn库中的数据预处理(一)
    arduino远程刷新(烧录)固件
    概念的理解 —— 电学
  • 原文地址:https://www.cnblogs.com/Kummy/p/3103474.html
Copyright © 2011-2022 走看看