form表单提交的几种方法

form表单提交的几种方法

方法一：利用form的onsubmit()函数

</pre><pre code_snippet_id="1952561" snippet_file_name="blog_20161027_1_4846833" name="code" class="html">Html代码  
<span style="font-size:24px;"><script type="text/javascript">  
    function validateForm(){  
    if(document.reply.title.value == ""){ //通过form名来获取form  
        alert("please input the title!");  
        document.reply.title.focus();  
        return false;  
    }     
    if(document.forms[0].cont.value == ""){ //通过forms数组获取form  
        alert("please input the content!");  
        document.reply.cont.focus();  
        return false;  
    }  
    return true;  
  }  
<form name="reply"  method="post" οnsubmit="return validateForm( );">  
        <input type="text" name="title"  size="80" /><br />  
        <textarea name="cont" cols="80" rows="12"></textarea><br />  
        <input type="submit" value="提交" >  
</form>  
注意：  
1.onsubmit属性内容一定要有return关键字，否则函数会直接执行，不会返回  
2.validateForm一定要返回一个boolean类型的返回值  
3.提交按钮要写成submit类型的  </span></span>

第一种的第二种

</pre><pre code_snippet_id="1952561" snippet_file_name="blog_20161027_1_4846833" name="code" class="html"><form id="qwe" method="post" name="myform"   action="user">
<span style="white-space:pre">			</span><h2>登录</h2><p class="tyg-p">欢迎访问  客户关系管理系统</p>
<span style="white-space:pre">			</span><div style="margin:5px 0px;">
<span style="white-space:pre">				</span><input id="inname" type="text" placeholder="请输入账号..."/>
                <p id="pname" name="pname" style="display:none; color:#ff3300;font-size: 16px;">请输入管理员名称</p>
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">			</span><div style="margin:5px 0px;">
<span style="white-space:pre">				</span><input id="inpwoods" type="text" placeholder="请输入密码..."/>
                 <p id="pwoods" name="pname" style="display:none; color:#ff3300;font-size: 16px;">请输入密码并且大于八位数！</p>
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">			</span><div style="margin:5px 0px;">
<span style="white-space:pre">				</span><input id="inyan"  type="text" style="width:150px;" placeholder="请输入验证码..."/>
<span style="white-space:pre">				</span><img src="./img/1.png" style="vertical-align:bottom;" alt="验证码"/>
                <p id="pyan" name="pname" style="display:none; color:#ff3300;font-size: 16px;">请输入正确的验证码！</p>
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">			</span><button type="submit" οnclick="return yanzheng()" >登<span style="width:10px;"></span>入</button>
             
    </form>

</pre><pre code_snippet_id="1952561" snippet_file_name="blog_20161027_1_4846833" name="code" class="html"><pre code_snippet_id="1952561" snippet_file_name="blog_20161027_1_4846833" name="code" class="html"><button type="submit" οnclick="return yanzheng()" >登<span style="width:10px;"></span>入</button>

 οnclick="return yanzheng()" 这样 也可以   把这个写在from 也可以

方法二：利用input类型为submit组件的onclick()函数

</pre><pre code_snippet_id="1952561" snippet_file_name="blog_20161027_1_4846833" name="code" class="html">  <span style="font-size:24px;">  1.将上面form标签中的οnsubmit="return validateForm()"属性，去掉。

    2.为“提交”按钮添加onclick事件，如下：

     <input type="submit" value="提交" οnclick="return validateForm();"></span>

方法三：利用button组件的onclick()函数，手动提交

<span style="font-size:24px;"><script type="text/javascript">  
    function modifyItem() {  
        if (trim(document.getElementById("itemName").value) == "") {  
            alert("物料名称不能为空！");  
            document.getElementById("itemName").focus();  
            return;  
        }   
        with (document.getElementById("itemForm")) {  
            method = "post";  
            action = "item.do?command=modify&pageNo=${itemForm.pageNo}";  
            submit();  
        }  
    }  
    //返回  
    function goBack() {  
        window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";  
    }  
</script>  
<form name="itemForm" id="itemForm">  
      <input name="itemNo" type="text"   id="itemNo" value="${ item.itemNo }" >  
      <input name="itemName" type="text"   id="itemName" value="${ item.itemName }" >  
     <input name="btnModify"  type="button" id="btnModify" value=“修改" οnclick="modifyItem()">  
</form>  
注意：  
1.提交时，设置form的action和methods属性，然后利用form.submit()函数提交。  

 总结：
1.对form中的组件验证时，前两个使用的是name属性，包括form自身的。
2.如果提交表单时没有反应，同时确定提交表单部分代码没有问题，请查看提交表单前面的js代码，有时前面js的错误会引发莫名其妙的问题。</span>

<span style="font-size:24px;">
</span>

</pre><h3>方法四：struts方法提交</h3><pre code_snippet_id="1952561" snippet_file_name="blog_20161027_3_1717697" name="code" class="html">

</pre><pre name="code" class="java"><span style="font-size:24px;">1.基于Struts标签，submit类型提交：
<html:form act
ion="/login"
method属性可以忽略不写，原因是Struts默认method="post"
2.基于非Struts标签，submit类型提交：
<from act
ion="/Test/login.do?method="login"" method="post"
非Struts标签时，method属性默认为get,为方便，一般设置为post
3.非Struts标签，button类型提交：
<from act
ion="/Test/login.do?method=login" method="post"
<input type="button" name="login" on
click="login()"/<javaScript type="test/javaScript"function login(){
document.forms[0].act
ion=document.forms[0].act</span>

</pre><pre code_snippet_id="1952561" snippet_file_name="blog_20161027_6_9875315" name="code" class="html">

方法五：

</pre><pre name="code" class="javascript"><span style="font-size:24px;">1.当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在jsp的前端页面写；有两种方法，一种是用submit提交。一种是用button提交。
方法一：

在jsp的前端页面的头部插入一个js方法：

 function checkUser(){
   var result = document.getElementById("userid").value;
   var password = document.getElementById("userpassid").value;
   if(result == ""  ){
     alert("用户名不能为空");
     return false;
   }
   if(password == ""  ){
    alert("密码不能为空");
     return false;
   }else{
   return true;
   }
}

在form表单里写成这样：
<form id="formid"  name= "myform" method = 'post'  action = 'user_login_submit.action' onsubmit = "return checkUser();" >
            <table width="100%" border="0">
              <tr>
                <td width="60" height="40" align="right">用户名 </td>
                <td><input type="text" value="" class="text2" name = "username" id = "userid"/></td>
              </tr>
              <tr>
                <td width="60" height="40" align="right">密  码 </td>
                <td><input type="password" value="" class="text2" name = "userpass" id = "userpassid"/></td>
              </tr>
              <tr>
                <td width="60" height="40" align="right"> </td>
                <td><div class="c4">
                    <input type="submit" value="" class="btn2"  />
 

方法二：

function checkUser(){
   var result = document.getElementById("userid").value;
   var password = document.getElementById("passid").value;

   if(result == ""  ){
     alert("用户名不能为空");
     return false;
   }
   if(password == ""  ){
    alert("密码不能为空");
     return false;
   }
  document.getElementById("formid").submit();
}

form表格的写法，需要写id
 <form id="formid" method = 'post'  action = 'user_login_submit.action'  >

button按钮的写法如下：
<input type="button" value="" class="btn2" onclick = "checkUser();" />
</span>