js表单处理1——关于表单提交-优快云博客

本文介绍了一种通过JavaScript实现表单提交的方法，包括利用submit()方法提交表单、使用非submit按钮提交表单以及通过键盘快捷键实现表单提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    
</style>
</head>
<body>
    <form id="myForm" name="yourForm">
        姓名：<input type="text" name="user">
        <input type="submit" value="提交">
        <button>其实我也可以提交</button>
    </form>
</body> 
</html>

<script>
// base start

 //跨浏览器添加事件
 function addEvent(obj,type,fn){
     if (obj.addEventListener) {
        obj.addEventListener(type,fn,false);
     }else if (obj.attachEvent) {
        obj.attachEvent('on'+ type,fn);
     }
 }

//移除事件兼容
function removeEvent(obj,type,fn){
    if (obj.removeEventListener) {
        obj.removeEventListener(type,fn,false);
    }else if (obj.detachEvent) {
        obj.detachEvent('in'+ type,fn);
    }
 }


//跨浏览器获取目标对象
function getTarget(evt){
    if (evt.target) {
        return evt.target;
    }else if (window.event.srcElement) {
         return window.event.srcElement
    }
 }


//清楚默认行为兼容
function preDef (evt) {
    var e = evt || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}

// base end


//要点1：submit()方法表单提交
addEvent(window,'load',function(){
    var fm = document.getElementById("myForm");
    addEvent(fm,'submit',function(evt){
        preDef(evt);                    //阻止submit默认行为，注意：是用form触发
    });

    var button = document.getElementsByTagName('button')[0];
    addEvent(button,'click',function(){
        fm.submit();                    //使用submit方法提交非submit按钮提交表单，也是在form上触发
    });


//实现ctrl+enter实现提交
addEvent(document,'keydown',function(evt){
        var e = evt||window.event;
        if (e.ctrlKey && e.keyCode == 13) {
            fm.submit();
        };
    });                        //用此方法时避免使用name="submit"或id="submit"命名，这样会和submit()方法发生冲突


});


</script>