JS原生方式动态获取表单的值_原生js获取表单字段值-优快云博客

本文链接：https://blog.youkuaiyun.com/michael8512/article/details/77206926

本文介绍如何通过JavaScript原生方法动态获取HTML表单中的输入值。通过监听表单事件，可以实现实时获取和处理用户输入的数据。

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

html代码如下：

<form id='form' name="form1" method="post" action="test1.php">
	<input type="text" id='textInput' name="username">
	<span id='username'></span><br/>

	<select id='select' name='sites'>
		<option value=""></option>
		<option value="google">google</option>
		<option value="baidu">baidu</option>
	</select>
	<span id='selectedSite'></span><br/>

	<input type="radio" name="sex" value="male" onchange="change()">male
	<input type="radio" name="sex" value="female" onchange="change()">female
	<span id='selectedSex'></span>
</form>

1. 获取input的值

var textInput=document.getElementById('textInput');
textInput.onchange=function (){
	var username=document.getElementById('username');
	username.innerHTML=textInput.value;
}

2. 获取select选项

var select=document.getElementById('select');
select.onchange=function(){
	var site=select.options[select.options.selectedIndex].text;
	selectedSite=document.getElementById('selectedSite');
	selectedSite.innerHTML=site;
}

3. 获取单选框的值

var sex=document.getElementsByName('sex');
var selectedSex=document.getElementById('selectedSex');
function change(){
	for(var i=0; i<sex.length; i++){
		if(sex[i].checked){
			var val=sex[i].value
			alert(val)
			selectedSex.innerHTML=val;
		}
	}
}