找回密码
 立即注册
搜索
热搜: 生活 中国

javascript获取html表单中的值?

[复制链接]
admin 发表于 2016-8-23 21:07:40 | 显示全部楼层 |阅读模式
  1. <html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript">
  5. function checkForm(){
  6. var name=document.form1.number.value; //or form1.number.value
  7. var name=document.forms[0].number.value;
  8. var name=document.forms[0]['number'].value;
  9. var name=document.form1['number'].value //or form1['number'].value
  10. alert(name);
  11. }
  12. </script>
  13. </head>
  14. <body>
  15. <form name="form1" method="post" action="">
  16. 网元名称:<input type="text" name="number" size="20">
  17. <br>
  18. <input type="submit" value="提交" onClick="checkForm()">
  19. </form>
  20. </body>
  21. </html>
复制代码
  1. <script type="text/javascript">
  2. <!--
  3. function func() {
  4. var xx = parseFloat(document.F1.T1.value);
  5. var yy = parseFloat(document.F1.T2.value);
  6. document.F1.T3.value = xx + yy;
  7. }
  8. // -->
  9. </script>
  10. <form name="F1" action="#">
  11. <input type="text" name="T1">
  12. <input type="text" name="T2">
  13. <input type="button" value="=" onclick="func()">
  14. <input type="text" name="T3">
  15. </form>
复制代码
  1. <script type="text/javascript">
  2. <!--
  3. function func() {
  4. alert(document.F1.T1.value + 100);
  5. }
  6. // -->
  7. </script>
  8. <form name="F1" action="#">
  9. <input type="text" name="T1" value="100">
  10. <input type="button" value="OK" onclick="func()">
  11. </form>
复制代码
  1. 表单(Form)
  2. 首页 > JavaScript浏览器对象 > 表单(Form)
  3. ■ 一览
  4. 文本框, 多行文本框, 密码框, 文件上传框, 按钮, 提交按钮, 重置按钮, 复选框, 单选框, 下拉菜单, 下拉菜单选项, action, blur(), checked, click(), defaultChecked, defaultSelected, defaultValue, elements, encoding, focus(), form, forms, length(forms), length(elements), length(options), length(select), method, name(form), name(element), options, reset(), select(), selected, selectedIndex, submit(), target, text, type, value(element), value(option)
  5. ■ 操作表单
  6. 用 JavaScript 可以操作表单。下面的例子里,计算两个输入框的值的合计。
  7. <script type="text/javascript">
  8. <!--
  9. function func() {
  10. var xx = parseFloat(document.F1.T1.value);
  11. var yy = parseFloat(document.F1.T2.value);
  12. document.F1.T3.value = xx + yy;
  13. }
  14. // -->
  15. </script>
  16. <form name="F1" action="#">
  17. <input type="text" name="T1">
  18. <input type="text" name="T2">
  19. <input type="button" value="=" onclick="func()">
  20. <input type="text" name="T3">
  21. </form>
  22. 按下等于按钮的时候(onclick),会调用名为 func() 的函数。在 func() 中,把文档(document)中的名叫 F1 的表单(form)中的名叫 T1 的元素的值(value)转换为数值(parseFloat())后,赋值给变量 xx 。同样把 T2 的值赋值给变量 yy ,然后在元素 T3 中显示合计。
  23. 表单里的值都是字符串,所以要当作数值使用的时候,先要用 parseFloat() 等方法转换成数值。下面的例子里,没转换成数值的 100 加上 100,结果是字符串 "100100"。
  24. <script type="text/javascript">
  25. <!--
  26. function func() {
  27. alert(document.F1.T1.value + 100);
  28. }
  29. // -->
  30. </script>
  31. <form name="F1" action="#">
  32. <input type="text" name="T1" value="100">
  33. <input type="button" value="OK" onclick="func()">
  34. </form>
  35. ■ 表单对象
  36. ◆ window.document.forms
  37. ◆ window.document.forms.length
  38. forms 是表单对象的数组。length 是数组的长度。页面中一个 <form>~</form> 代表一个表单。
  39. ◆ window.document.form
  40. 代表各个表单的对象。可以用 0 开始的下标来指定表单,也可以使用 <form> 标签里的 name 属性指定的表单名(例子里为 "FORM1")。
  41. f = document.forms[0];
  42. f = document.forms["FORM1"];
  43. f = document.FORM1;
  44. ◆ window.document.form.action
  45. ◆ window.document.form.encoding
  46. ◆ window.document.form.method
  47. ◆ window.document.form.name
  48. ◆ window.document.form.target
  49. 分别代表 <form> 标签里指定的 action、encoding、method、name、target 属性的値。
  50. ◆ window.document.form.submit()
  51. ◆ window.document.form.reset()
  52. 与按下表单中的提交按钮、重置按钮的效果相同。
  53. ■ 表单元素
  54. ◆ window.document.form.elements
  55. ◆ window.document.form.elements.length
  56. elements 是表单中元素的数组。length 是数组的长度。
  57. ◆ window.document.form.element
  58. 调用表单中的元素。可以使用 0 开始的下标,或是 name 属性指定的元素名(举例中为 "ELEM1")。
  59. e = document.FORM1.elements[0];
  60. e = document.FORM1.ELEM1;
  61. 各种元素除了公共的属性和方法,还有各自独有的属性和方法。
  62. ■ 表单元素(公共)
  63. ◆ window.document.form.element.name
  64. name 属性指定的元素名。
  65. ◆ window.document.form.element.type
  66. "text"、"submit" 等元素的类型。
  67. ◆ window.document.form.element.form
  68. 此元素所包含的表单对象。
  69. ◆ window.document.form.element.value
  70. 此元素的值。text, password, textarea 的场合为输入的字符串,button, submit, reset 的场合为按钮上显示的字符串。textarea 里的换行符一般显示为代码 0x0d 0x0a 。
  71. ◆ window.document.form.element.focus()
  72. ◆ window.document.form.element.blur()
  73. focus() 使此元素获得焦点。blur() 使此元素失去焦点。
  74. ■ 表单元素(文本元素)
  75. 文本框(<input type="text">)、密码框(<input type="password">)、文件上传框(<input type="file">)、多行文本框(<textarea>)除了公共的属性和方法,还支持下列属性和方法。
  76. ◆ window.document.form.text.defaultValue
  77. 默认值。考虑到安全性,文件上传框不支持此属性。
  78. ◆ window.document.form.text.select()
  79. 使输入框中的字符串变为选中状态。像下面这样写,可以在输入框获得焦点时,使其中的字符串变为被选中状态。
  80. <input type="text" onfocus="this.select()">
  81. ■ 表单元素(按钮)
  82. 复选框(<input type="checkbox">)、 单选框(<input type="radio">)、 按钮(<input type="button">)、提交按钮(<input type="submit">)、 重置按钮(<input type="reset">)除了公共的属性和方法,还支持下列属性和方法。
  83. ◆ window.document.form.checkbox.defaultChecked
  84. ◆ window.document.form.checkbox.checked
  85. 仅单选框和复选框有效。defaultChecked 设置默认值是否为选中,checked 返回当前是否被选中的真伪值。checked 也可以代入值 true 和 false 。
  86. 要调查复选框是否被选中,可以像下面这样写。
  87. <script type="text/javascript">
  88. <!--
  89. function func() {
  90. if (document.F1.C1.checked) {
  91. alert(document.F1.C1.value);
  92. }
  93. if (document.F1.C2.checked) {
  94. alert(document.F1.C2.value);
  95. }
  96. }
  97. // -->
  98. </script>
  99. <form name="F1" action="#">
  100. <input type="checkbox" name="C1" value="AAA">AAA
  101. <input type="checkbox" name="C2" value="BBB">BBB
  102. <input type="button" value="OK" onclick="func()">
  103. </form>
  104. 要调查单选框是否被选中,可以像下面这样写。
  105. <script type="text/javascript">
  106. <!--
  107. function func() {
  108. var i;
  109. if (document.F1.R1.length) {
  110. for (i = 0; i < document.F1.R1.length; i++) {
  111. if (document.F1.R1[i].checked) {
  112. alert(document.F1.R1[i].value);
  113. }
  114. }
  115. } else {
  116. if (document.F1.R1.checked) {
  117. alert(document.F1.R1.value);
  118. }
  119. }
  120. }
  121. // -->
  122. </script>
  123. <form name="F1" action="#">
  124. <input type="radio" name="R1" value="AAA" checked>AAA
  125. <input type="radio" name="R1" value="BBB">BBB
  126. <input type="radio" name="R1" value="CCC">CCC
  127. <input type="button" value="OK" onclick="func()">
  128. </form>
  129. ◆ window.document.form.checkbox.click()
  130. 使此按钮变成被点击的状态。
  131. ■ 表单元素(下拉菜单)
  132. 下拉菜单(<select>)除了公共的属性和方法,还支持下列属性和方法。
  133. ◆ window.document.form.select.length
  134. 选项 (option) 的个数,与下面的 options.length 相同。
  135. ◆ window.document.form.select.selectedIndex
  136. 当前选中的选项的下标(0~)。把值代入的话可以改变当前选中的项目。
  137. <script type="text/javascript">
  138. <!--
  139. function func() {
  140. var n = document.F1.S1.selectedIndex;
  141. alert(document.F1.S1.options[n].text);
  142. }
  143. // -->
  144. </script>
  145. <form name="F1" action="#">
  146. <select name="S1">
  147. <option>AAAA
  148. <option>BBBB
  149. <option>CCCC
  150. </select>
  151. <input type="button" value="OK" onclick="func()">
  152. </form>
  153. ■ 表单元素(下拉菜单选项)
  154. 下拉菜单选项(<option>)除了公共的属性和方法,还支持下列属性和方法。
  155. ◆ window.document.form.select.options
  156. ◆ window.document.form.select.options[n]
  157. ◆ window.document.form.select.options.length
  158. options 是 <option> 的数组,options[n] 是数组中的单个对象,length 是数组的长度。
  159. ◆ window.document.form.select.option.defaultSelected
  160. ◆ window.document.form.select.option.selected
  161. defaultSelected 是默认值是否选中的真伪值,selected 是当前是否选中的真伪。
  162. ◆ window.document.form.select.option.text
  163. 返回选项所显示的字符串。
  164. ◆ window.document.form.select.option.value
  165. 返回 <option> 标签的 value 属性的值。
  166. www.monmonkey.com
复制代码
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function upperCase()
  5. {
  6. var x=document.getElementById("fname").value
  7. document.getElementById("fname").value=x.toUpperCase()
  8. }
  9. </script>
  10. </head>
  11. <body>
  12. Enter your name: <input type="text" id="fname" onblur="upperCase()"><br />
  13. Enter your age: <input type="text" id="age" onblur="alert(this.id)">
  14. </body>
  15. </html>
复制代码
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|生活导航|生活导航 ( 新ICP备12003026-1号 )

GMT+8, 2024-3-29 23:59 , Processed in 0.088478 second(s), 14 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表