表单

表单本身也是DOM树

表单的输入框、下拉框等可以接收用户输入,所以用JavaScript来操作表单,可以获得用户输入的内容,或者对一个输入框设置新的内容。

HTML表单的输入控件主要有以下几种:

  • 文本框,对应的<input type="text">,用于输入文本;

  • 口令框,对应的<input type="password">,用于输入口令;

  • 单选框,对应的<input type="radio">,用于选择一项;

  • 复选框,对应的<input type="checkbox">,用于选择多项;

  • 下拉框,对应的<select>,用于选择一项;

  • 隐藏文本,对应的<input type="hidden">,,hidden只是将输入框隐藏了,但表单提交时会把隐藏文本发送到服务器,里面的值可以默认赋值或通过js赋值。

获取值

如果我们获得了一个<input>节点的引用,就可以直接调用value获得对应的用户输入值

// <input type="text" id="email"> var input = document.getElementById('email'); input.value; // '用户输入的值'

这种方式可以应用于textpasswordhidden以及select。但是,对于单选框和复选框value属性返回的永远是HTML预设的值,而我们需要获得的实际是用户是否“勾上了”选项,所以应该用checked判断

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label> // <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label> var mon = document.getElementById('monday'); var tue = document.getElementById('tuesday'); mon.value; // '1' tue.value; // '2' mon.checked; // true或者false tue.checked; // true或者false

设置值

设置值和获取值类似,对于textpasswordhidden以及select直接设置value就可以

// <input type="text" id="email"> var input = document.getElementById('email'); input.value = 'test@example.com'; // 文本框的内容已更新 

对于单选框和复选框,设置checkedtruefalse即可。

HTML5控件

HTML5新增了大量标准控件,常用的包括datedatetimedatetime-localcolor等,它们都使用<input>标签:

<input type="date" value="2015-07-01">

提交表单

最后,JavaScript可以以两种方式来处理表单的提交(AJAX方式在后面章节介绍)。

方式一是通过<form>元素的submit()方法提交一个表单,例如,响应一个<button>click事件,在JavaScript代码中提交表单:

<!-- HTML -->
<form id="test-form"> <input type="text" name="test"> <button type="button" onclick="doSubmitForm()">Submit</button> </form> <script> function doSubmitForm() { var form = document.getElementById('test-form'); // 可以在此修改form的input... // 提交form: form.submit(); } </script>

这种方式的缺点是扰乱了浏览器对form的正常提交。
浏览器默认点击<button type="submit">时提交表单,或者用户在最后一个输入框按回车键。
因此,第二种方式是响应<form>本身的onsubmit事件,在提交form时作修改:
<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()"> <input type="text" name="test"> <button type="submit">Submit</button> </form> <script> function checkForm() { var form = document.getElementById('test-form'); // 可以在此修改form的input... // 继续下一步: return true; } </script>
注意要return true来告诉浏览器继续提交,如果return false,浏览器将不会继续提交form,
这种情况通常对应用户输入有误,提示用户错误信息后终止提交form。
 
 

转载于:https://www.cnblogs.com/EganZhang/p/6544127.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/356015.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java项目processes设置,Jvm调优和SpringBoot项目优化的详细教程

参考文章1、先看一下未设置JVM参数的情况&#xff0c;默认情况下&#xff0c;没有设置任何Jvm参数。2、设置Jvm参数。配置参数&#xff1a;关于这些设置的JVM参数是什么意思&#xff0c;参考Jvm调优。-XX:MetaspaceSize128m (元空间默认大小)-XX:MaxMetaspaceSize128m (元空间最…

Git问题Everything up-to-date解决

Git问题Everything up-to-date解决 【自己的亲身错误体验】 我的上一篇博客&#xff0c;说了怎么上传一个项目到git远程上面。今天我写好一个小栗子&#xff0c;准备再次上传的时候。我依旧是放在我的F:\github\js- 这个和我的github上的远程仓库相同名称的文件中的 在这里空白…

java超出gc开销限制_超出了GC开销限制– Java堆分析

java超出gc开销限制这篇文章是我们原来的GC开销超出问题模式的延续。 正确的Java堆分析对于消除O​​utOfMemoryError&#xff1a;GC开销问题至关重要。 如果您不熟悉此Java HotSpot 1.6错误&#xff0c;建议您首先阅读有关此主题的第一篇文章 。 本文将为您提供一个示例程序和…

Java接口long类型精度丢失,解决前后端交互Long类型精度丢失问题

雪花算法ID&#xff0c;对应的后端Long类型&#xff0c;前端number类型&#xff0c;它们的精度不一样&#xff0c;导致精度丢失现象雪花算法得到的ID较长&#xff0c;传到前端后&#xff0c;精度丢失库中&#xff1a;23754851322302474后端&#xff1a;23754851322302474前端&a…

如何模拟Spring bean(版本2)

大约一年前&#xff0c;我写了一篇博客文章如何模拟Spring Bean 。 所描述的模式对生产代码几乎没有侵入性。 正如读者Colin在评论中正确指出的那样&#xff0c;基于Profile注释的间谍/模拟Spring bean是更好的选择。 这篇博客文章将描述这种技术。 我在工作中以及副项目中都成…

eclipse和jdk的版本问题,比如printf()出错

1.右键项目选中properties 2.Java Builder Path 》》》Libraries》》》选中JRE Syste Library[jre7]然后remove 3.Add Library》》》JRE Syetem Library》》》NEXT》》》Alternate JRE:选中最新的jie版本 4.Finish》》》OK&#xff01; 5.再在右键项目选中properties 》》》Ja…

java自定义一个timeout,Timeout操作符 RxJava 学习笔记二十一

timeout用于检测在给定时间内observables没有及时响应。如果指定的时间量没有发出任何项目&#xff0c;则超时会使observables失败并出现TimeoutException。我们将从debounce的示例中重用我们的observable来演示超时。输出&#xff1a;只要值不超过200ms&#xff0c;就会输出。…

用xshell ssh连接测试服务器时候出的问题

问题还原&#xff1a;用ssh连接测试服务器 给我结结实实报了个错 FBIwarning: ----------------------------------------------------------------------------------------------------------------------------以上 问题还原 解决过程&#xff1a;百度 博客地址http://blog.…

maven集成spring_Maven集成测试和Spring Restful Services

maven集成spring介绍 我的原始博客通过一个非常简单的示例展示了如何分离Maven单元和集成测试。 http://johndobie.blogspot.com/2011/06/seperating-maven-unit-integration-tests.html此后&#xff0c;许多人要求我提供比最初使用的示例更实际的示例。 这篇文章显示了如何在实…

WebService.asmx架设后,显示调用按钮的方法

我们在VS本地调试WebService的时候&#xff0c;页面是可以调试的&#xff0c;如下图 但是在发布以后&#xff0c;通过浏览器访问服务器上的地址&#xff0c;是不能调试你的程序的&#xff0c;就变成了这个样子&#xff1a; 可以通过修改服务器上的web.config达到远程调试的效果…

复习者-Java EE 7概览

随着红帽JBoss企业应用平台7&#xff08;EAP 7&#xff09;的出现&#xff0c;甚至最近刚刚通过Java EE 7认证的WebLogic服务器&#xff0c;我认为现在应该为您重新介绍Java Enterprise Edition 7的时候了功能&#xff0c;并指向更多资源。 Java EE 7 –开发人员的生产力&…

php教程知识点归纳,PHP知识点小结

PHP知识点总结?1.?DIRECTORY_SEPARATOR??? ? ? 因为在window上分隔符是"\"而在linux上分隔符是"/" ?使用这个符号就可以避免这个问题。??2.?realpath??? ? ?返回文件所在的绝对路径。??3. 在php中 0null 是成立的。?? ???4.file_ge…

40:数组中只出现一次的数字

/*** 面试题40&#xff1a;数组中只出现一次的数字* 一个整型数组里除了两个数字之外&#xff0c;其他的数字都出现了两次。请写程序找出这两个只出现一次的数字。*/ public class _40_num_one_times {public static void main(String[] args){Solution40 solution40 new Solu…

按窗口文件php代码,在Windows命令行窗口中输入并运行PHP代码片段(不需要php文件)的方法...

有时候只是简单的为了测试某个php函数的效果&#xff0c;以前总是需要建一个php文件&#xff0c;复制这个文件的路径&#xff0c;再通过web访问或者用php命令执行这个php文件。一直想要怎么才能不用创建文件&#xff0c;才能直接执行PHP代码片段呢&#xff1f;终于找到了方法&a…

MySQL 汉字转拼音

一 . fristPinyin &#xff1a; 此函数是将一个中文字符串的第一个汉字转成拼音字母 &#xff08;例如&#xff1a;"中国人"->Z&#xff09; CREATE FUNCTION fristPinyin(P_NAME VARCHAR(255)) RETURNS varchar(255) CHARSET utf8 BEGINDECLARE V_RETURN VARCHAR…

java中npe问题,【Java 8】巧用Optional之优雅规避NPE问题

避之不及的 NullPointerExceptionNPE : NullPointerException空指针异常是最常见的Java异常之一&#xff0c;抛出NPE错误不是用户操作的错误&#xff0c;而是开发人员的错误&#xff0c;应该被避免&#xff0c;那么只能在每个方法中加入非空检查&#xff0c;阅读性和维护性都比…

adf435编程_动态ADF列车:以编程方式添加列车停靠点

adf435编程我将展示如何以编程方式“即时”将火车停靠站添加到ADF火车中。 在我的用例中&#xff0c;我有一些票务预订应用程序。 它具有训练模型的有限任务流。 在火车的第一站&#xff0c;用户输入乘客数量&#xff0c;在随后的站点&#xff0c;他们输入一些乘客信息。 必须根…

JAVA消息服务JMS规范及原理详解

一、简介 JMS即Java消息服务&#xff08;Java Message Service&#xff09;应用程序接口&#xff0c;是一个Java平台中关于面向消息中间件&#xff08;MOM&#xff09;的API&#xff0c;用于在两个应用程序之间&#xff0c;或分布式系统中发送消息&#xff0c;进行异步通信。Ja…

php mk的支持扩展,Linux部署Redis及PHP-redis扩展

Redis是一个key-value存储系统&#xff0c;属于我们常说的NoSQL。它遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。它常用在缓存、队列、Pub/Sub、计数统计、排行榜、投票与排序等场景。本文介绍如何在CentOS7上安装…

定制Hamcrest Matchers

本文是我们名为“ 用Mockito进行测试 ”的学院课程的一部分。 在本课程中&#xff0c;您将深入了解Mockito的魔力。 您将了解有关“模拟”&#xff0c;“间谍”和“部分模拟”的信息&#xff0c;以及它们相应的Stubbing行为。 您还将看到使用测试双打和对象匹配器进行验证的过…