Javascript idとnameからテキストフォームhiddenの値を取得する
環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122（Official Build） （64 ビット）
構文
1.id名からhiddenの値を取得します
document.getElementById(セレクターID名).value
2.nameからhiddenの値を取得します
document.getElementsByName(セレクターname名)[0].value
3.class名からhiddenの値を取得します
document.getElementsByClassName(セレクタークラス名)[0].value
使用例
<!DOCTYPE html>
<html>
<body>
<form name="userfrm">
<input type="hidden" value="東京" id="city" name="cityname" class="cft"/>
</form>
<button onclick="myFunction()">追加</button>
<script>
function myFunction() {
console.log("id名からhiddenの値を取得");
console.log( document.getElementById("city").value );
console.log("nameからhiddenの値を取得");
console.log( document.getElementsByName("cityname")[0].value )
console.log("class名からhiddenの値を取得");
console.log( document.getElementsByClassName("cft")[0].value )
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<form name="userfrm">
<input type="hidden" value="東京" id="city" name="cityname" class="cft"/>
</form>
<button onclick="myFunction()">追加</button>
<script>
function myFunction() {
console.log("id名からhiddenの値を取得");
console.log( document.getElementById("city").value );
console.log("nameからhiddenの値を取得");
console.log( document.getElementsByName("cityname")[0].value )
console.log("class名からhiddenの値を取得");
console.log( document.getElementsByClassName("cft")[0].value )
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<form name="userfrm">
<input type="hidden" value="東京" id="city" name="cityname" class="cft"/>
</form>
<button onclick="myFunction()">追加</button>
<script>
function myFunction() {
console.log("id名からhiddenの値を取得");
console.log( document.getElementById("city").value );
console.log("nameからhiddenの値を取得");
console.log( document.getElementsByName("cityname")[0].value )
console.log("class名からhiddenの値を取得");
console.log( document.getElementsByClassName("cft")[0].value )
}
</script>
</body>
</html>
実行結果
「追加」ボタンを押すと、コンソールに下記メッセージを出力します。
id名からhiddenの値を取得
東京
nameからhiddenの値を取得
東京
class名からhiddenの値を取得
東京