Web前端——表单提交和Js添加选项
表单
表单提交
表单提交之后会将表单的数据以get或post方式,传送到action要打开的页面
方式1: 使用提交按钮
<form action="" method="get" onsubmit="return check()">
用户名:<input type="text"><br>
密码: <input type="password"><br>
<input type="submit" value="登录"/>
</from>
方式2:使用js手动提交表单,this.form.submit() this可省略
<form action="" method="post" onsubmit="return check()">
用户名:<input type="text"><br>
密码: <input type="password"><br>
<button type="button" onclick="this.form.submit">登录</button>
</from>
onsubmit="true" 为false,表单不可提交(点击提交按钮无效,不会跳转页面)
onsubmit="return check()";//在名为check的js方法中进行表单元素的验证(必填,用户名是否合法,密码等),返回true或false
表单添加选项
<form action="">
<select name="city">
<option value="1011">南宁</option>
<option value ="1012">广州</option>
</select>
</form>
南宁
广州
使用js动态添加选项:
<form action="">
<select id="province">
<option value="">--请选择--</option>
</select>
</form>
<script type="text/javascript">
//json数据,可以直接定义使用
var data = [{
id: 100,
name: '广东'
}, {
id: 101,
name: '广西'
}, {
id: 102,
name: '云南'
}];
var provinceEle = document.getElementById("province");
for (let i = 0; i < data.length; i++) {
//new Option() 参数为选项的内容,参数2为选项的value
provinceEle.add(new Option(data[i].name, data[i].id));
}
</script>
Web前端——表单提交和Js添加选项的更多相关文章
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- Form表单提交,js验证
Form表单提交,js验证 1, Onclick() 2, Onsubmit() Button标签 input (属性 submit button )标签 Input type=button ...
- 前端表单提交,提交有图片出现的问题,及解决方案 兼容ie9
更新一下我的小园子,主要说的是jq文件上传的过程中,如果出现上传的文件里有图片问题 其实文件上传有图片的情况下,不是什么大问题,对于前端来说,但是,如果需要兼容ie9的时候,就需要处理一下 文件上传如 ...
- 前端表单提交数据~php获取表单内容
上图代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- Web前端表单验证
表单选择器 :input(匹配所有input.textarea.select和button元素) :text(匹配所有单行文本框) :password(匹配所有密码框) :radio(匹配 ...
- springmvc 前端表单提交给后端出现乱码
在springmvc框架练习中遇到了乱码问题,经过一番网上查找解决方法之后,最后发现是需要在tomcat中的server.xml中添加编码设置 URIEncoding="UTF-8" ...
- springmvc下js控制表单提交(表单提交前检验,提交后获取json返回值)
这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...
- Java EE之servlet处理表单提交的请求
1.在源包下新建一个Servlet页,取名为LoginServlet: package weinidingServlet; //该Servlet所 ...
- 对象化前端表单(Form)提交
很常见的业务场景,就是前端一个表单,submit给后台,在web.form时代,有from 的runat="server" 配合submit 自动会提交给服务端,然后服务端解析Re ...
随机推荐
- java之四种权限修饰符
java权限修饰符piublic.protected.private.置于类的成员定义前,用来限定对象对该类成员的访问权限. 修饰符 类内部 同一个包 子类 任何地方 private yes ...
- Springboot整合Mybatis实现级联一对多CRUD操作
在关系型数据库中,随处可见表之间的连接,对级联的表进行增删改查也是程序员必备的基础技能.关于Spring Boot整合Mybatis在之前已经详细写过,不熟悉的可以回顾Spring Boot整合Myb ...
- 体感在js中的调用
体感技术,在于人们可以很直接地使用肢体动作,与周边的装置或环境互动,而无需使用任何复杂的控制设备,便可让人们身临其境地与内容做互动. 体感分为三大类: 惯性感测:主要是以惯性传感器为主,例如用重力传感 ...
- Linux中哪些工具堪称神器?
作者:int32bit www.zhihu.com/question/59227720 ag:比grep.ack更快的递归搜索文件内容. Github地址: https://github.com/gg ...
- Eclipse中Junit测试中@Before不执行
场景 在使用Junit进行单元测试时,一部分获取JPA的entityManager的代码将其放在了 @Before标注的方法中,这样每次执行@TEST标注的方法时会首先执行@Before标注的方法. ...
- 文本分类Pipeline
- 机器学习pipeline总结
# -*- coding: utf-8 -*- """scikit-learn introduction Automatically generated by Colab ...
- Unrecognized header format %
<VirtualHost *:*> RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME} </ ...
- iOS关于制作动画运动轨迹(UIBezierPath介绍)
参考链接: https://www.jianshu.com/p/6c9aa9c5dd68
- Android 多选列表对话框 setMultiChoiceItems
private Button button; private final CharSequence items[] = { "北京", "上海", " ...