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

本文介绍如何使用JavaScript处理不同类型的HTML表单元素,包括text、password、radio、checkbox、hidden及select,并展示了如何通过Java在服务器端接收这些表单数据。

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

  1. 大家都知道我们在提交form的时候用了多种input表单。可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的。有一些组合的form类似于checkbox或者radio或者select我们如何用javascript获取和在服务器中获取提交过来的参数呢?多说无用、上代码:
  2. Jsp-html代码:
  3. <formaction="input.do"name="formkk">
  4. <table>
  5. <tbody>
  6. <tr>
  7. <td>text:</td>
  8. <td>
  9. <inputtype="text"name="text">
  10. </td>
  11. </tr>
  12. <tr>
  13. <td>password:</td>
  14. <td>
  15. <inputtype="password"name="pass">
  16. </td>
  17. </tr>
  18. <tr>
  19. <td>radio:</td>
  20. <td>
  21. <inputtype="radio"name="xingbie"value="1">
  22. <inputtype="radio"name="xingbie"value="2">
  23. </td>
  24. </tr>
  25. <tr>
  26. <td>checkbox:</td>
  27. <td>
  28. 足球:<inputtype="checkbox"name="hobby"value="1"/>
  29. 篮球:<inputtype="checkbox"name="hobby"value="2"/>
  30. 拍球:<inputtype="checkbox"name="hobby"value="3"/>
  31. 斗球:<inputtype="checkbox"name="hobby"value="4"/>
  32. </td>
  33. </tr>
  34. <tr>
  35. <td>hidden:</td>
  36. <td>
  37. <inputtype="hidden"value="123"name="hidden"/>
  38. </td>
  39. </tr>
  40. <tr>
  41. <td>option:</td>
  42. <td>
  43. <selectname="opt"id="opt">
  44. <option>1</option>
  45. <option>2</option>
  46. <option>3</option>
  47. <option>4</option>
  48. </select>
  49. </td>
  50. </tbody>
  51. </table>
  52. <inputtype="button"value="提交"οnclick="javascript:check()"/>
  53. </form>
  54. Javascript:
  55. functioncheck(){
  56. varradio=document.getElementsByName("xingbie");
  57. varcheckbox=document.getElementsByName("hobby");
  58. varselect=document.getElementById("opt");
  59. //获取select标签
  60. varindex=select.selectedIndex;
  61. vartext=select.options[index].text;
  62. varvalue=select.options[index].value;
  63. //获取radio标签
  64. for(vari=0;i<xingbie.length;i++){
  65. if(xingbie.item(i).checked){
  66. varval=xingbie.item(i).getAttribute("value");
  67. break;
  68. }
  69. continue;
  70. }
  71. //获取checkbox标签
  72. for(vari=0;i<hobbys.length;i++){
  73. if(hobbys[i].checked){
  74. alert(hobbys[i].value);
  75. }
  76. continue;
  77. }
  78. //提交form表单
  79. document.formkk.submit();
  80. }
  81. Java:
  82. String[]hobbys=request.getParameterValues("hobby");//checkbox
  83. Stringtext=request.getParameter("text");//text
  84. Stringpassword=request.getParameter("password");//password
  85. Stringxingbie=request.getParameter("xingbie");//radio
  86. request.getParameter("hidden");
  87. request.getParameter("opt");//select
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值