javascript 常用表单的取值

最新推荐文章于 2023-10-15 16:31:48 发布

窗外雨寒

最新推荐文章于 2023-10-15 16:31:48 发布

阅读量576

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript input class button border function

本文链接：https://blog.youkuaiyun.com/next_sun/article/details/7464068

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用JavaScript和jQuery实现的简单表单数据读取方法。该方法能够收集表单中的姓名、性别、兴趣爱好及重量等信息，并通过弹窗显示这些数据。表单包括文本输入框、单选按钮、复选框和一组带有文本输入的复选框。

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

js代码：

<script type="text/javascript">                                                  
	function getvalues(formName){                                                    
		//姓名                                                                           
		if (formName.username.value == "") {                                             
			alert("不能为空");                                                               
		}else{                                                                           
			alert("姓名："+formName.username.value) ;                                        
		}                                                                                
		//性别                                                                           
		var show = formName.sex;                                                         
		var sex = "";                                                                    
		for(var i = 0; i < show.length; i ++){                                           
			if(show[i].checked == true){                                                     
				sex = show[i];                                                                   
			}                                                                                
		}                                                                                
		alert("性别是：" + sex.value);                                                   
		//兴趣爱好                                                                       
		var interest = formName.interests;                                               
		var interests = "";                                                              
		for(var i =0 ;i< interest.length ;i++){                                          
			if(interest[i].checked == true ){                                                
				interests += interest[i].value + ";" ;                                                                                                                            
			}                                                                                
		}                                                                                
		alert("兴趣爱好：" + interests);                                                 
		//重量                                                                           
		var quantity = "";                                                               
		for(var i = 1; i <= 2; i ++){                                                    
			var group=document.getElementById("group" + i).getElementsByTagName("input");    
			if(group[0].checked==true){                                                      
				quantity += group[1].value + ",";                                                
			}                                                                                
		}                                                                                
		alert("重量：" + quantity);                                                      
	}                                                                                
</script>

HTML表单代码：

<form name="info" id ="info">                                                    
	<table border="1" width="400">                                                   
	<tr>                                                                             
		<td>username</td>                                                                
		<td><input name="username" id="username" type="text" /></td>                     
	</tr>                                                                            
	<tr>                                                                             
		<td>sex</td>                                                                     
		<td>                                                                             
			<input name="sex" type="radio" checked = "true" value="man" />man                
			<input name="sex" type="radio" value="woman"/>woman                              
		</td>                                                                            
	</tr>                                                                            
	<tr>                                                                             
		<td>interests</td>                                                               
		<td>                                                                             
		<input name="interests" type="checkbox" value="surfing"/>surfing                 
		<input name="interests" type="checkbox" value="running"/>running                 
		<input name="interests" type="checkbox" value="climbing"/>climbing               
		</td>                                                                            
	</tr>                                                                            
	<tr>                                                                             
		<td>quantity</td>                                                                
		<td id="group1">                                                                 
		<input type="checkbox" name="idKeys" value="1" />1                               
		<input type="text" name="quantity" class="quantity" size="6"/>                   
		</td>                                                                                                                                                      
	</tr>                                                                            
	<tr>                                                                             
		<td>quantity</td>                                                                
		<td id="group2">                                                                 
			<input type="checkbox" name="idKeys" value="2" />2                               
			<input type="text" name="quantity" class="quantity" size="6"/>                   
		</td>                                                                            
	</tr>                                                                            
	<tr>                                                                             
		<td colspan="3">                                                                 
			<input type="button" value="Submit" id="addItem" onclick="getvalues(this.form)"/>
		</td>                                                                            
	</tr>                                                                            
	</table>                                                                         
</form>

jQuery常用表单的取值