JS原生方式动态获取表单的值

妖狐艹你老母 2022-06-10 09:40 250阅读 0赞

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" οnchange="change()">male
    	<input type="radio" name="sex" value="female" οnchange="change()">female
    	<span id='selectedSex'></span>
    </form>

1. 获取input的值

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

2. 获取select选项

var select=document.getElementById('select');
    select.οnchange=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;
    		}
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js 实现表单验证功能

表单验证是web前端最常见的功能之一，也属于前端开发的基本功。自己完成一个表单验证的开发，也有助于加深对字符串处理和正则表达式的理解。基本的表单验证包括如：字母验证、数字验

忘是亡心i/ 2022年10月29日 07:38/ 0 赞/ 169 阅读

相关获取表单元素的方式

document.getElemenById("表单标签的ID") document.getElementByName("表单标签的name")\[索引\] documen

浅浅的花香味﹌/ 2022年09月30日 06:13/ 0 赞/ 164 阅读

相关 js表单序列化，jquery获取表单对象的属性值

//获取表单数据 var data = $("\loginForm"); //序列化表单为json格式数据 var jsonData = d

た入场券/ 2022年08月13日 12:49/ 0 赞/ 169 阅读

相关表单动态验证之原生Ajax

什么是 AJAX? > AJAX代表异步JavaScript和XML。 > 简而言之，它是使用 XMLHttpRequest 对象与服务器端脚本进行通信。它可以发送以

￡神魔★判官ぃ/ 2022年07月14日 08:59/ 0 赞/ 187 阅读

相关 JS原生方式动态获取表单的值

html代码如下： <form id='form' name="form1" method="post" action="test1.php"> <inpu

妖狐艹你老母/ 2022年06月10日 09:40/ 0 赞/ 251 阅读

相关 js获取值的方式

每一次操作select的时候，总是要出来翻一下资料，不如自己总结一下，以后就翻这里了。比如<select class="selector"></select> 1、设置v

向右看齐/ 2022年06月08日 12:12/ 0 赞/ 231 阅读

相关原生js实现表单前端校验

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页

忘是亡心i/ 2022年04月06日 07:56/ 0 赞/ 260 阅读

相关 vue获取form表单的值

vue获取form表单的值这里使用的是Element-ui组件 html: <el-input placeholder="请输入手机号" id="phon

偏执的太偏执、/ 2022年03月10日 12:56/ 0 赞/ 945 阅读

相关原生js设置属性值和获取属性值

var testEle = document.getElementById("test") testEle.setAttribute(

本是古典何须时尚/ 2022年01月22日 01:39/ 0 赞/ 350 阅读

相关原生js获取input输入框的值

<input type="text" name="" id="name" value="" placeholder="请输入姓名" /> var name =

比眉伴天荒/ 2021年07月24日 13:11/ 0 赞/ 788 阅读