Html 表单提交 【js获取表单提交数据】
2024-05-15 05:14:50
Html 原生获取表单提交数据
// 提示框 淡入淡出<style type="text/css">.message {display: none;padding: 20px;position: fixed;top: 40%;left: 40%;border-radius: 5px;background: rgba(0, 0, 0, 0.5);z-index: 5000;color: #FFF;}
</style>Html 表单
<-----------提示框--------->
<span id="message" class="message"></span><form onsubmit="return false"><div class="info-list clearfix"><div class="info-left">姓名</div><div class="info-right"><input type="text" placeholder="请填写您的姓名,例如:李先生" name="name" required/><span>（此项非必填）</span></div></div><div class="info-list clearfix"><div class="info-left">称谓</div><div class="select info-right"><div class=" fl"><input type="radio" value="1" name="sex" checked="checked"/><spanclass="radiospan">先生</span> </div><div class=" fl"><input type="radio" value="2" name="sex"/><span class="radiospan">女士</span></div></div></div><div data-toggle="distpicker"><div class="info-list clearfix"><div class="info-left">所在省份</div><div class="info-right rightselect"><select id="province1" name="province"></select><span class="iconfont icon-down-fill-xs"></span></div></div><div class="info-list clearfix"><div class="info-left">所在城市</div><label for="city"><div class="info-right rightselect" id="city"><select id="city1" name="city"></select><span class="iconfont icon-down-fill-xs"></span></div></label></div></div><div class="info-list clearfix"><div class="info-left">计划购车时间</div><label for="but_time"><div class="info-right rightselect"><select id="but_time" name="plan_time"><option value="">请选择计划购车时间</option>{volist name="plan_time" id = "item"}<option value="{$item.value}">{$item.label}</option>{/volist}</select><span class="iconfont icon-down-fill-xs"></span></div></label></div><div class="info-list clearfix"><div class="info-left">希望得到反馈时间</div><div class="select info-right"><div class=" fl"><input type="radio" value="1" name="type" checked="checked"/><spanclass="radiospan">全天</span> </div><div class=" fl"><input type="radio" value="2" name="type"/><span class="radiospan">工作日</span> </div><div class=" fl"><input type="radio" value="3" name="type" checked="checked"/><spanclass="radiospan">双休</span></div></div></div><input type="button" value="提交" class="submitInfor" name="submit" onclick="mySubmit(this)"/></form>js 获取表单提交数据
// 表单提交function mySubmit() {var flg = true;let formData = new FormData(form);var regExpP = /^1[34578]\d{9}$/; //手机号let name = formData.get('name');let sex = formData.get('sex');let phone = formData.get('phone');let province = formData.get('province');let city = formData.get('city');let plan_time = formData.get('plan_time');let type = formData.get('type');if (phone == "" || !regExpP.test(phone)) {message("请填写正确的手机号码")flg = false}if (selectId == "") {message("您还没有选择车系！！！")flg = false}if (plan_time == "") {message("您还没有预购时间！！！")flg = false}obj = {'name': name,'sex': sex,'phone': phone,'province': province,'city': city,'plan_time': plan_time,'type': type,'cid': selectId};let url = "appoint_create"if (flg) {axios({url: url,method: 'post',data: obj}).then(res => {if (res.data.code == 1){message("感谢您的关注，敬请期待！！")}else {message("数据异常，稍后重试！")}})}return false;}function message(message = "验证失败！请刷新") {$('#message').html(message).show().delay(1000).fadeOut();}Html 表单提交 【js获取表单提交数据】相关推荐
- php js获取表单内容,jquery form表单获取内容以及绑定数据_javascript技巧
在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使 ...
- html怎么防止表单重复提交,js防止表单重复提交的解决方法
防止表单重复提交,通常会通过attachEvent在 form的onsubmit事件中写一个方法,每次触发该事件时执行该方法,可以给form增加一个submited属性,每次判断这个属性,为 fals ...
- form表单input使用disabled后提交不能获取表单值的解决方法
今天遇到一个问题:在form表单中的input上使用disabled禁用标致,会导致表单提交时获取不到值.经过调试,以及参考相关博文,最终得以解决,下面记录解决方法. form表单输入框input设置 ...
- form表单提交后台获取表单信息
一.需求 客户端通过前端填写表单信息,后台获取表单信息进行相应处理. 二.工具 前端采用jsp,后台 springmvc 三.示例 (一).前端输入的form表单代码 <form id=&quo ...
- js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
- oracle怎么读取表空间文件大小,oracle获取表空间文件大小
oracle通过查询DBA_SEGMENTS表获取表空间文件信息,包括表空间名称,大小等 ? 1 select tablespace_name,sum(max_size),sum(bytes) fro ...
- node.js 获取异步方法里面的数据 =》 两种方式
第一种: 通过回调函数实现: var fs = require('fs); function getmime(callback){ fs.readFile('./t1.js', function(er ...
- html获得剪切板数据,JS 获取chrome剪切板数据
希望使用JS获取chrome浏览器中剪切板的数据,数据为字符串类型,求大神帮忙解答- 整理自之前自己的一段代码,保证了绝大部分的兼容性. uploader上传用你们自己组件吧 // 粘贴事件的监听 e ...
- js获取model里面的数据
js里面获取model里面数据 后台存储: /*** @description: 在线学生/选课/考勤/成绩 管理系统* @author: soulcoder-码仔项目库分享圈* @qq: 交流咨询 ...
最新文章
- Go借助PProf的一次性能优化
- Python的dict字典结构操作方法学习笔记
- 【ThinkPHP3.2.3】学习ThinkPHP笔记：框架中的配置文件(3)
- 2010有道难题练习赛2
- 次元网站女装穿起来，从A站到Z站，你知道哪个？谁才是你的最爱？
- 单面煎鸡蛋，健康有风险
- Android 百度地图之全局搜索周边搜索全国搜索城市路线规划(升级版附源码)
- Linux运行级详解
- 软件项目组织管理（四）项目集成管理
- 带CheckBox的CListCtrl，源码可下载
- 2020年什么编程语言最受欢迎，待遇最高？
- 【Elasticsearch】Elasticsearch filter和query的不同
- 三大公有云托管 Kubernetes 服务 (EKS、GKE、AKS) 评估
- 查看docker run启动参数命令 runlike
- 种草平台--持续更新
- sz方法从服务器下载超过4g文件方法
- C# 读取Word中的脚注和尾注内容
- [网站推荐] 百度识图
- 小程序怎么自定义导航栏，导航栏放图片、设置高度
- 神经网络各种评判指标