表单元素值获取方式js及java方式

 
    1. 大家都知道我们在提交form的时候用了多种input表单。可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的。有一些组合的form类似于checkbox或者radio或者select我们如何用javascript获取和在服务器中获取提交过来的参数呢?多说无用、上代码:  
    2. Jsp-html代码：  
    3.     <form action="input.do" name="formkk">  
    4.             <table>  
    5.                 <tbody>  
    6.                     <tr>  
    7.                           
    8.                         <td>text:</td>  
    9.                         <td>  
    10.                             <input type="text" name="text">  
    11.                         </td>  
    12.                     </tr>  
    13.                     <tr>  
    14.                           
    15.                         <td>password:</td>  
    16.                         <td>  
    17.                             <input type="password" name="pass">  
    18.                         </td>  
    19.                     </tr>  
    20.                     <tr>  
    21.                           
    22.                         <td>radio:</td>  
    23.                         <td>  
    24.                             <input type="radio" name="xingbie" value="1">  
    25.                             男  
    26.                             <input type="radio" name="xingbie" value="2">  
    27.                             女  
    28.                         </td>  
    29.                     </tr>  
    30.                     <tr>  
    31.                         <td>checkbox:</td>  
    32.                         <td>  
    33.                             足球:<input type="checkbox" name="hobby" value="1"  />  
    34.                             篮球:<input type="checkbox" name="hobby" value="2"  />  
    35.                             拍球:<input type="checkbox" name="hobby" value="3"  />  
    36.                             斗球:<input type="checkbox" name="hobby" value="4"  />  
    37.                         </td>  
    38.                     </tr>  
    39.                     <tr>  
    40.                         <td>hidden:</td>  
    41.                         <td>  
    42.                             <input type="hidden" value="123" name="hidden"/>  
    43.                         </td>  
    44.                     </tr>  
    45.                     <tr>  
    46.                         <td>option:</td>  
    47.                         <td>  
    48.                             <select name="opt" id="opt">  
    49.                             <option>1</option>  
    50.                             <option>2</option>  
    51.                             <option>3</option>  
    52.                             <option>4</option>  
    53.                             </select>  
    54.                               
    55.                         </td>  
    56.                 </tbody>  
    57.             </table>  
    58.             <input type="button" value="提交" onclick="javascript:check()"/>  
    59.         </form>  
    60.   
    61.   
    62. Javascript：  
    63. function check(){  
    64.               
    65.             var radio = document.getElementsByName("xingbie");  
    66.             var checkbox = document.getElementsByName("hobby");  
    67.             var select = document.getElementById("opt");  
    68.           
    69.             //获取select标签  
    70.             var index = select.selectedIndex;  
    71.             var text = select.options[index].text;  
    72.             var value = select.options[index].value;  
    73.               
    74.             //获取radio标签  
    75.             for(var i=0;i<xingbie.length;i++){  
    76.                 if(xingbie.item(i).checked){  
    77.                     var val = xingbie.item(i).getAttribute("value");  
    78.                     break;  
    79.                 }  
    80.                 continue;  
    81.             }  
    82.             //获取checkbox标签  
    83.             for(var i=0;i<hobbys.length;i++){  
    84.                 if(hobbys[i].checked){  
    85.                     alert(hobbys[i].value);  
    86.                 }  
    87.                 continue;  
    88.             }  
    89.               
    90.             //提交form表单  
    91.             document.formkk.submit();  
    92.               
    93.               
    94.         }  
    95.   
    96.   
    97.   
    98. Java：  
    99.     String[] hobbys = request.getParameterValues("hobby");  //checkbox  
    100.     String text = request.getParameter("text");             //text  
    101.     String password = request.getParameter("password"); //password  
    102.     String xingbie = request.getParameter("xingbie");       //radio  
    103.     request.getParameter("hidden");  
    104.     request.getParameter("opt");    //select 
posted @ 2015-10-26 10:26  菜菜学长  阅读(625)  评论(0)  编辑  收藏  举报