您现在的位置是:首页 > Javascript
当前栏目
Web前端——表单提交和Js添加选项
2023-02-18 16:36:34 时间
表单
表单提交
表单提交之后会将表单的数据以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>
相关文章
- js日志输出还是只会console.log么,那你就out了
- Jackson精讲第7篇-类继承关系下的JSON序列化与反序列化JsonTypeInfo
- Jaskson精讲第6篇-自定义JsonSerialize与Deserialize实现数据类型转换
- @JsonCreator自定义反序列化函数-JSON框架Jackson精解第5篇
- Jackson精解第4篇-@JacksonInject与@JsonAlias注解
- 属性序列化自定义与字母表排序-JSON框架Jackson精解第3篇
- URL及日期等特殊数据格式处理-JSON框架Jackson精解第2篇
- JSON数据处理框架Jackson精解第一篇-序列化与反序列化核心用法
- 通过java程序(JSch)运行远程linux主机上的shell脚本
- JS/TS项目里的Module都是什么?
- 为啥JS/TS里都会有"use strict"
- api接口返回动态的json格式?我太难了,尝试一下 linq to json
- 教你如何解决JS/TS里特定String进行拆分然后遍历各个元素
- 对 JsonConvert 的认识太肤浅了,终于还是遇到了问题
- knockoutjs如何动态加载外部的file作为component中的template数据源
- 掌握这20个JS技巧,做一个不加班的前端人
- 如何在TypeScript/JavaScript项目里引入MD5校验和
- Javascript之旅——终点站:困惑的settimeout
- Javascript之旅——第十一站:原型也不好理解?
- Javascript之旅——第十站:为什么都说闭包难理解呢?