JavaScript获取表单输入框内容的几种方法

悠悠 2022-05-14 03:59 269阅读 0赞

<!DOCTYPE HTML>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<title>form</title>
    	<script type="text/javascript">
    		function f(){
    			//方法一：
    			var firstName = document.getElementById("first").value;
    			var lastName = document.getElementById("last").value;
    			console.log(firstName + "  " + lastName);
    			
    			//方法二：
    			var firstName2 = document.login.firstName.value;
    			var lastName2 = document.login.lastName.value;
    			console.log(firstName2 + "  " + lastName2);
    			
    			//方法三
    			var firstName3 = document.forms[0].firstName.value;
    			var lastName3 = document.forms[0].lastName.value;
    			console.log(firstName3 + "  " + lastName3);
    			
    			//方法四：
    			var firstName4 = document.forms["myform"].firstName.value;
    			var lastName4 = document.forms["myform"].lastName.value;
    			console.log(firstName4 + "  " + lastName4);
    			
    			
    			//方法五：
    			var firstName5 = login.firstName.value;
    			var lastName5 = login.lastName.value;
    			console.log(firstName5 + "  " + lastName5);
    		}
    	</script>
    	
    </head>
    <body>
    	<form action="#" name="login" id="myform">
    		first name: <input type="text" name="firstName" id="first" /><br/>
    		last name: <input type="text" name="lastName" id="last" /><br/>
    		<input type="button" value="确定" onclick="f()" /><br/>
    	</form>
    	
    
    </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关获取焦点后隐藏提示内容的输入框

获取焦点后隐藏提示内容的输入框有趣的小案例池子： [JS实现定时器 ][JS_] [JS实现关闭图片窗口 ][JS_ 1] [JS实现输入检验 ][JS

た入场券/ 2024年03月31日 15:30/ 0 赞/ 84 阅读

相关 js获取输入框内容

1、给输入框取个id名（用的getElementById）也可以取class、name 2、给提交按钮添加 onclick（鼠标单击时触发事件）指定函数名 3、func

╰+攻爆jí腚メ/ 2024年03月26日 19:58/ 0 赞/ 80 阅读

相关 java获取输入内容的方法

![b1467d24300a466fac39b9f4db205265.jpeg][] Java中的对象类型可以有多种，比如 Object、 StringBuilder等，其中

雨点打透心脏的1/2处/ 2023年10月09日 22:17/ 0 赞/ 46 阅读

相关 html输入框保存上次输入内容,不让input表单的输入框保存用户输入的历史记录

如何不让input表单的输入框保存用户输入的历史记录. 有时我们在设计网页时不想让表单保存用户输入历史记录,比如一些隐私数据,或一些冲值卡 … 绑定到用户输入事件等号左边

小鱼儿/ 2022年10月06日 07:55/ 0 赞/ 669 阅读

相关防止表单重复提交的几种方法（转）

防止表单重复提交的几种方法在使用action处理表单(写入数据库操作)的过程,往往会出现重复插入数据库的现像,为防止这一现象的发生,给数据库带来不必要的垃圾数据,对重复提

╰半夏微凉°/ 2022年09月28日 01:28/ 0 赞/ 215 阅读

相关 Javaweb获取表单数据的几种方式

Javaweb获取表单数据的几种方式一、通过键值对的形式获取表单数据 getParameter(String name)：通过key，返回一个value。

痛定思痛。/ 2022年07月10日 04:30/ 0 赞/ 324 阅读

相关 JavaScript获取表单输入框内容的几种方法

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>form

悠悠/ 2022年05月14日 03:59/ 0 赞/ 270 阅读

相关 javascript获取当前时间时间戳的几种方法

1.Date.parse(new Date()) parse() 方法可解析一个日期时间字符串，并返回 1970/1/1 午夜距离该日期时间的毫秒数。

今天药忘吃喽~/ 2022年01月15日 23:39/ 0 赞/ 658 阅读

相关【JavaScript & jQuery】获取图片、文件地址的几种方法

备忘，整理一下： ![在这里插入图片描述][20190428142233854.png] chrome、IE、火狐测试过有效； <!DOCTYPE html>

秒速五厘米/ 2022年01月12日 11:15/ 0 赞/ 567 阅读

相关防止表单重复提交的几种方法

表单重复提交是在Web应用中经常遇到的一个比较麻烦的问题。有很多应用场景都会遇到重复提交问题，比如：点击提交按钮两次。点击刷新按钮。使用浏览器后退按钮

分手后的思念是犯贱/ 2021年06月24日 16:11/ 0 赞/ 546 阅读