JS獲取表單中的元素和取值方法
更新時間：2022年04月26日 11:40:16 作者：農碼一生
這篇文章介紹了JS獲取表單中的元素和取值方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
獲取表單的四種方式
- 1、document.表單名稱
- 2、document.getElementById(表單 id);
- 3、document.forms[表單名稱]
- 4、document.forms[索引]; //從 0 開始
<body>
<!--
獲取表單
1、document.表單名稱
2、document.getElementById(表單 id);
3、document.forms[表單名稱]
4、document.forms[索引]; //從 0 開始
-->
<form id='myform' name="myform" action="" method="post"></form>
<form id='myform2' name="myform2" action="" method="post"></form>
<script type="text/javascript">
//1、document.表單名稱
var form = document.myform;
console.log(form);
//2、document.getElementById(表單 id);
var myform2 = document.getElementById("myform2");
console.log(myform2);
//3、document.forms[表單名稱]
var forms = document.forms;
console.log(forms);
console.log(forms['myform2']);
//4、document.forms[索引]; //從 0 開始
console.log(forms[0]);
</script>
</body>表單的元素以及值獲取
<body>
<!--
獲取元素的值
獲取表單元素的值
表單元素節(jié)點.value; 取值
表單元素節(jié)點.value = "值"; 設置值
文本框，密碼框，單選，多選
獲取非表單元素的內容
元素節(jié)點.innerHtml = "值"; 設置值
元素節(jié)點.innerHtml; 取值
獲取input元素
1)、通過 id 獲取： document.getElementById(元素 id);
2)、通過 form.名稱 形式獲取: myform.元素名稱; name屬性值
3)、通過 name 獲取 數(shù)組 :document.getElementsByName(name屬性值)[索引] // 從0開始
4)、通過 tagName 數(shù)組 :document.getElementsByTagName('input')[索引] // 從0開始
獲取單選按鈕
前提：將一組單選按鈕設置相同的name屬性值
? (1)獲取單選按鈕組：
document.getElementsByName("name屬性值");
(2)遍歷每個單選按鈕，并查看單選按鈕元素的checked屬性
? 若屬性值為true表示被選中，否則未被選中
? 選中狀態(tài)設定： checked='checked' 或 checked='true' 或 checked
? 未選中狀態(tài)設定： 沒有checked屬性 或 checked='false'
多選框
前提：設置一組多選框為相同name屬性值
(1)獲取多選按鈕組：
document.getElementsByName("name屬性值");
(2)遍歷每個多選按鈕，并查看多選按鈕元素的checked屬性
? 若屬性值為true表示被選中，否則未被選中
? 選中狀態(tài)設定： checked='checked' 或 checked='true' 或 checked
? 未選中狀態(tài)設定： 沒有checked屬性 或 checked='false'
獲取下拉選項
1）獲取 select 對象：
var ufrom = document.getElementById("ufrom");
2）獲取選中項的索引：
var idx = ufrom.selectedIndex;
? 3）獲取選中項 options 的 value屬性值：
var val = ufrom.options[idx].value;
? 注意：當通過options獲取選中項的value屬性值時，
? 若沒有value屬性，則取option標簽的內容
? 若存在value屬性，則取value屬性的值
? 4）獲取選中項 options 的 text：
var txt = ufrom.options[idx].text;
? 選中狀態(tài)設定：selected='selected'、selected=true、selected
? 未選中狀態(tài)設定：不設selected屬性
-->
<form id='myform' name="myform1" action="" method="get">
姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
密碼:<input type="password" id="upwd" name="upwd" value="1234"/><br />
<input type="hidden" id="uno" name="uno" value="隱藏域" />
個人說明:<textarea name="intro"></textarea>
<button type="button" onclick="getTxt();" >獲取元素內容</button>
</form>
<!-- 操作單選 -->
<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="radio" name="rad" value="1" /> 1
<input type="radio" name="rad" value="2" /> 2
<button type="button" onclick="getRadio();" >獲取單選內容</button>
</form>
<!-- 操作多選 -->
<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="checkbox" name="hobby" value="1" /> 1
<input type="checkbox" name="hobby" value="2" /> 2
<input type="checkbox" name="hobby" value="3" /> 3
<button type="button" onclick="getCheckbox();" >獲取多選內容</button>
</form>
<!-- 獲取下拉框 -->
<form id='myform' name="myform9" action="" method="">
來自:
<select id="ufrom" name="ufrom">
<option value="-1" >請選擇</option>
<option value="0" selected="selected">北京</option>
<option value="1">上海</option>
</select><br />
<button type="button" onclick="getSelect();" >獲取多選內容</button>
</form>
<script type="text/javascript">
//獲取元素內容
function getTxt(){
// 1)、通過 id 獲?。篸ocument.getElementById(元素 id);
var uname = document.getElementById("uname");
console.log(uname.value);
//2)、通過 form.名稱形式獲取: myform.元素名稱; name屬性值
var upwd = document.myform1.upwd;
console.log(upwd);
console.log(upwd.value);
//3)、通過 name 獲取 :document.getElementsByName(name屬性值)[索引] // 從0開始
var hid = document.getElementsByName("uno")[0];
console.log(hid.value);
// 4)、通過 tagName 數(shù)組 :document.getElementsByTagName('input')[索引] // 從0開始
var texta = document.getElementsByTagName("textarea")[0];
console.log(texta.value);
}
//獲取單選按鈕中選中項
function getRadio(){
//獲取所有單選
var rads = document.getElementsByName("rad");
//遍歷每個單選
for(var i = 0; i < rads.length; i++){
if(rads[i].checked){
console.log(rads[i].value);
}
}
}
//獲取多選按鈕中選中項
function getCheckbox(){
//獲取所有多選
var hobbys = document.getElementsByName("hobby");
//遍歷每個多選
var str ="";
for(var i = 0; i < hobbys.length; i++){
if(hobbys[i].checked){
str += hobbys[i].value + ",";
}
}
console.log(str.substring(0,str.length-1));
}
//獲取下拉選項
function getSelect(){
//獲取下拉框
var select = document.getElementsByName("ufrom")[0];
//獲取下拉框的選項
var options = select.options;
//獲取下拉框選中索引
var index = select.selectedIndex;
//獲取選中項
console.log(options[index]);
//獲取選中項的值
console.log(select.value);
}
</script>
</body>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS document form表單元素操作完整示例
- javascript獲取form里的表單元素的示例代碼
- javascript實現(xiàn)的動態(tài)添加表單元素input,button等(appendChild)
- JavaScript使用表單元素驗證表單的示例代碼
- JavaScript實現(xiàn)動態(tài)添加Form表單元素的方法示例
- Javascript簡單改變表單元素背景的方法
- JavaScript獲取表單內所有元素值的方法
- JavaScript顯示表單內元素數(shù)量的方法
- js創(chuàng)建表單元素并使用submit進行提交
- JavaScript實現(xiàn)表單元素的操作
相關文章
這篇文章主要介紹了JavaScript的代碼編寫格式規(guī)范指南,文中所分享的一些細節(jié)基本上也是各大js代碼格式化插件所默認約定俗成的,需要的朋友可以參考下2015-12-12
這篇文章介紹了JS和jquery獲取各種屏幕的寬度和高度的代碼，有需要的朋友可以參考一下2013-08-08
盡可能寫"友好"的"Javascript"代碼...2007-01-01
node.js入門教程迷你書、node.js入門web應用開發(fā)完全示例
本書致力于教會你如何用Node.js來開發(fā)應用，過程中會傳授你所有所需的“高級”JavaScript知識。本書絕不是一本“Hello World”的教程。2014-04-04
這篇文章主要為大家詳細介紹了TypeScript接口和泛型，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
詳解JavaScript正則表達式中的global屬性的使用
這篇文章主要介紹了詳解JavaScript正則表達式中的global屬性的使用,是JS學習進階中的重要知識點,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了javascript中clone對象的方法,需要的朋友可以參考下2014-12-12
html超鏈接打開窗口大小的方法，需要的朋友可以參考一下2013-03-03
這篇文章主要介紹了javascript將相對路徑轉絕對路徑示例,這里介紹的其實本質上是兩種方法，通過創(chuàng)建DOM或通過JavaScript計算,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了JavaScript獲取各大瀏覽器信息圖示的相關資料,需要的朋友可以參考下2015-11-11