web 界面设计---js提交表单

Java代码  

1. <script type="text/javascript">  
2. function checkImage(){  
3.     var imageValue = document.getElementById("actorCard:imageField:image").value;  
4.     if(imageValue !== ""){  
5.        document.getElementById("actorCard").sumbit();   
6.     }else if(imageValue == ""){  
7.        alert("image field required !");  
8.       document.getElementById("actorCard:imageField:image").focus();   
9.        return false;  
10.     }     
11. }  
12. </script>  

Java代码  

1. <h:commandButton id="save" value="Save"   
2. onclick="return checkImage()" action="#{actorCardHome.persist}"   
3. disabled="#{!actorCardHome.wired}"  
4. rendered="#{!actorCardHome.managed}" />  

Java代码  

1.     上面的代码已经很完善了，但是我再次看的时候又有些遗漏的地方，所以我在把它补充完整。(因为我最近在做模板的时候出现了问题)  
2. 1. signin.jsp  
3. <script type="text/javascript" src="js/common.js"></script>  
4. <s:form name="loginForm" action="./openid.servlet"  method="post">  
5.    <table>  
6.       <tr>  
7.           <td align="right">Username:</td>  
8.           <td align="left">  
9.              <input type="text" id="username" name="username" value="" class="joinField"><br />  
10.              <span id="error_username"></span>  
11.            </td>  
12.        </tr>  
13.        <tr>  
14.            <td align="right">Password:</td>  
15.             <td align="left">  
16.                 <input type="password" id="password" name="password" value="" class="joinField"><br />  
17.     <span id="error_password"></span></td>  
18.         </tr>  
19.         <tr>  
20.     <td align="right">  
21.     <input type="submit" id="loginButton" onclick="return checkField();" value="login" class="btn-submit">  
22.     </td>  
23.     <td align="left"><br />  
24.                <span id="error_login" class="error"></span></td>  
25.          </tr>  
26.     </table>  
27. </s:form>  
28. 这里我要说明三点：这个也是我出错的地方所在。  
29. (1)这一句：<input type="submit" id="loginButton" onclick="return checkField();" value="login">里面的type="submit",非常重要，由于当时种种原因我不小心写成了type="button",所以导致我的执行在执行JS的时候总是提交不了。document.getElementById("loginForm").sumbit(); 这句是JS的提交代码。  
30. (2)document.getElementById("loginForm").sumbit(); 这里的loginForm是指的是form表单的ID号而不是"提交按钮"的ID号，这里一定要注意。  
31.   
32.   
33. (3)document.getElementById("error_username").innerHTML = "username is not null !";这里的"error_username"指的是ID哦，因为我当时在原有的代码上改没注意它当时是class，然后就报错，找了我好半天的功夫啊！  
34. 2. common.js  
35. function checkField(){     
36.     var usernameValue = document.getElementById("username").value;     
37.     var passwordValue = document.getElementById("password").value;   
38.     usernameValue = usernameValue.replace(/\s/gi,"");  
39.     passwordValue = passwordValue.replace(/\s/gi,"");  
40.     if(usernameValue !== "" && passwordValue !== ""){    
41.         这里不能写下面那个语句，如果写了后会提交form表单2次。而应该直接写return true;就可以了。切记！！  
42.         //document.getElementById("loginForm").submit();   
43.         return true;  
44.     }else if(usernameValue == "" && passwordValue == ""){  
45.         document.getElementById("error_username").innerHTML = "username is not null !";  
46.         document.getElementById("error_password").innerHTML = "password is not null !";  
47.         return false;     
48.     }else if(usernameValue !== "" && passwordValue == ""){  
49.      document.getElementById("password").focus();       
50.      document.getElementById("error_username").innerHTML = "";  
51.      document.getElementById("error_password").innerHTML = "password is not null !";  
52.      return false;     
53.     }else if(passwordValue !== "" && usernameValue == ""){  
54.      document.getElementById("username").focus();       
55.      document.getElementById("error_password").innerHTML = "";  
56.      document.getElementById("error_username").innerHTML = "username is not null !";  
57.      return false;     
58.     }  
59. }  

http://blog.csdn.net/haqer0825/article/details/8152829

http://solodu.iteye.com/blog/421587