當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
用JavaScript获取表单里的值
生活随笔
收集整理的這篇文章主要介紹了
用JavaScript获取表单里的值
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
建立form表單里的標簽：
??文本輸入框，密碼輸入框，單選框，多選框，下拉框，文本域，隱藏域
??用JavaScript獲取表單里的每一個值，
??將值顯示出來。
填寫數據
獲取的值如下：
<html> <head> <title>2getValue.html</title><style type="text/css"> fieldset {margin: 10px auto;text-align: center;width: 50%; }label {margin-right: 8px; } </style><script type="text/javascript">function getValue() {//單選按鈕的獲取var sex = document.getElementsByName("sex"); //獲得的是集合var s = "";for ( var i in sex) { //使用for循環遍歷集合if (sex[i].checked == true) {s = sex[i].value;}}//多選按鈕的獲取var like = document.getElementsByName("hobby");var l = "";for ( var i in like) {if (like[i].checked == true)l += like[i].value; //因為是多選，所以將內容加上l += " ";}var name, password, location, introduce, hid; //定義變量//數據的獲取name = document.getElementById("userName").value;password = document.getElementById("userPassword").value;location = document.getElementsByName("choose")[0].value;introduce = document.getElementsByName("area")[0].value;hid = document.getElementById("h").value;//顯示數據document.write("姓名：" + name + "<br>");document.write("密碼：" + password + "<br>");document.write("性別：" + s + "<br>");document.write("技能：" + l + "<br>");document.write("選擇：" + location + "<br>");document.write("文本域：" + introduce + "<br>");document.write("隱藏數據：" + hid + "<br>");}/* function choose(){var location = document.getElementsByName("choose")[0].value;// alert(location);// document.write(loaction);/* var lo = "";for(var i in location){if(location[i].checked == true)lo = location[i].value;} alert(lo); } *//* function getRadio(){var sex =document.getElementsByName("sex");var s;for(var i in sex){if(sex[i].checked == true){s = sex[i].value;}} */// getRadio(); </script></head><body><fieldset><legend>文本輸入框</legend><label>姓名：</label><input type="text" name="userName" id="userName"></fieldset><fieldset><legend>密碼輸入框</legend>密碼：<input type="password" name="userPassword" id="userPassword"></fieldset><fieldset><legend>單選框</legend>性別： 男<input type="radio" name="sex" value="男" οnchange="getRadio()">女<input type="radio" name="sex" value="女" οnchange="getRadio()"></fieldset><fieldset><legend>多選框</legend>技能： Java<input type="checkbox" name="hobby" value="Java">Android<input type="checkbox" name="hobby" value="Android">UI<input type="checkbox" name="hobby" value="UI"></fieldset><fieldset><legend>下拉框</legend>地點：<select name="choose" οnchange="choose()"><option>請選擇城市</option><option value="北京">北京</option><option value="廣州">廣州</option><option value="深圳">深圳</option></select></fieldset><fieldset><legend>文本域</legend>個性簽名：<textarea rows="5" cols="40" name="area">個性也是一種生活態度！！</textarea></fieldset><fieldset><legend>隱藏域</legend>不會顯示在頁面的標簽 <input type="hidden" name="hid" value="haha" id="h"></fieldset><fieldset><legend>點擊看看</legend><input type="button" value="獲取數據" οnclick="getValue()"></fieldset></body> </html>
總結
以上是生活随笔為你收集整理的用JavaScript获取表单里的值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript中的原型，对spli
- 下一篇： JavaScript中获取表单信息并添加