JS 表单自动提交

一、前言

　　在做项目中，将有些容易忘记的代码进行汇总。

二、案例

　　表单提交，如一个页面的搜索。

　　

　　　　　　表单的代码

　　　　　　<form class="search-form" id="search">
                <div class="mui-input-row mui-search" >
                    <input type="search" class='searchKey' name="key" id="key" placeholder="请输入关键字搜索"  />
                    <!--<button type="submit">搜索</button>-->
                </div>
            </form>
　　　　　　

 //监听输入框的内容
    document.getElementById("key").addEventListener('input', function () {
        console.log(this.value);
    });

    //onsubmit 方法
    document.getElementById("search").onsubmit = function () {
        console.log(this);
        var result = this.querySelector(".searchKey").value; //使用了querySelector 获取子元素
        console.log(result);
        return false;
    }

　　结果截图：在 GoogleChrome 的Console输出截图

　　

 

　　

 　　结束，就是这样的。