提交表单方案总结

1、方式一：表单提交：在此方式中需要置顶表单的action属性，将提交按钮的type属性改为submit。如下：

     < form name="userForm" target="_self" id="userForm" action=“#” method=“post”>

       <!-- 用户信息开始 -->

           <input name="userName" type="text" class="text1" id="userName"

                                size="20" maxlength="20">

           <input name="password" type="password" class="text1"

                                    id="password" size="20" maxlength="20">

         <!-- 用户信息结束 -->  

          <div align="center">

                    <!-- 提交按钮 -->

              <input name="btnAdd" class="button1" type="submit" id="btnAdd"

                        value="添加" onClick="addUser()">

          </div>

    </form>

2、方式二：使用JS提交表单，通过按钮触发JS事件，获取表单ID进行提交。如下：

    1）表单信息如下：

     < form name="userForm" target="_self" id="userForm">

                    <!-- 用户信息开始 -->

           <input name="userName" type="text" class="text1" id="userName"

                                size="20" maxlength="20">

           <input name="password" type="password" class="text1"

                                    id="password" size="20" maxlength="20">

          <!-- 用户信息结束 -->

          <div align="center">

                    <!-- 提交按钮 -->

              <input name="btnAdd" class="button1" type="button" id="btnAdd"

                        value="添加" onClick="addUser()">

          </div>

    </form>

    2）JS提交代码如下：

     function  addUser() {

          with  (document.getElementById("userForm")){

            action="user_add.jsp";

            method="post";

            method="post";

        }

    } 

3、 方式三：利用ajax进行提交，（当文本框失去焦点时触发提交事件）如下

    1）HTML代码：          < input name="userId" type="text" class="text1" id="userId" size="10" maxlength="10" onkeypress="userIdOnkeypress()" value="<%= userId %>" onblur="validate(this)"><span id="spanUserId"></span>

    2）JS验证代码

      var  xmlHttp;

    function createXMLHttpRequest(){

        //表示当前浏览器不是ie，如ns，firefox

        if(window.XMLHttpRequest){

            xmlHttp=new XMLHttpRequest();

        }else if (window.ActiveXObject){

            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

        }

    }

    function validate(field){

        //alert(field.value);

        if (trim(field.value).length != 0 ){

            //创建AJAX核心对象XMLHttpRequest

            createXMLHttpRequest();

            

            var url="user_validate.jsp?userId="+trim(field.value)+"&time=" + new Date().getTime();

            //设置请求方式为Get，设置请求的URL，设置为异步提交

            xmlHttp.open("GET", url, true);

            

            //将方法地址复制给onreadystatechange属性

            xmlHttp.onreadystatechange=callback;

            //将请求信息发送到Ajax引擎

            xmlHttp.send(null);

        }

        else{

            document.getElementById("spanUserId").innerHTML="";

        }

    }

    function callback(){

        //Ajax引擎状态为成功

        if (xmlHttp.readyState==4){

            //HTTP协议状态为成功

            if (xmlHttp.status==200){

                if (trim(xmlHttp.responseText) != ""){

                    document.getElementById("spanUserId").innerHTML="<font color='red'>"+xmlHttp.responseText+"</font>";

                }else{

                    document.getElementById("spanUserId").innerHTML="";

                }

            }else{

                alert("请求失败，错误码="+xmlHttp.status)

            }

        }

    }