前端开发中的数据提交,目前大多数采用表单提交的方式,但是对于很对初学者来说,只知道在表单格式中,只有一个<input type="submit">,如果有两个或者要求有多个提交选择的时候应该怎么做呢,其实用js就可以简单实现:

例如下面的效果:

有一个确定和取消的提交按钮;

<form name="form" method="post" action=" " id="form">
 <b>注册</b><br/><br/>
  <span style="letter-spacing:4.5px;">用户名:</span> <input type="text" name="userName"><br/><br/>
     证件类型:&nbsp;&nbsp;
    <select  name="identifytype"  id="identifytype">
    <option value="身份证" >身份证</option>
    <option value="军官证">军官证</option>
    </select><br/><br/>
  <span style="letter-spacing:5px;">证件号:<input type="text" name="identifynum"><br/><br/>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="submit" value="注册"   οnclick="javascript:this.form.action='跳转.jsp';"/>
  <input type="submit" value="取消"  οnclick="javascript:this.form.action='当前页面.jsp';"/>

与平常的form提交不同之处在于:

1、此处的action为空,

2、在input中添加了点击事件:javascript:this.form.action

利用js的form.action去进行链接跳转。



form表单提交中,确定和取消效果的实现相关推荐

  1. action无法传参数给html页面,HTML 解决form表单提交时,action url中参数无效问题

    这篇文章主要为大家详细介绍了HTML 解决form表单提交时,action url中参数无效问题,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! ...

  2. html中form表单提交和阻止表单提交的细节

    如何阻止表单提交 HTML禁止表单提交方法 源代码如下: form2.html <!DOCTYPE html> <html> <head> <meta cha ...

  3. laravel中的form表单提交

    提交方法:form表单提交只能提交post 和get ,如果你想提交其他的提交方法,就要如图所示 转载于:https://www.cnblogs.com/luxia/p/9001310.html

  4. ajax异步请求——form表单提交 及 表单序列化提交

    ajax异步请求 AJAX介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方 ...

  5. js将form表单提交数据封装为ajax提交

    对于数据提交,html自带了form表单,以form表单里的input框的name为key值,以其所对应的value为value值,传给后台供其使用.但是这样的方法与ajax传输数据还是有许多差距: ...

  6. form 表单提交时用ajax异步请求导致ajax请求结果无法接收问题

    1.背景描述,有个公司内部用的小系统,不想大动干戈用太多前端框架,就用HTML5写了个登陆页面,刚开始想着用form表单提交登陆账户信息.后来因为前后端分离,并且统一用ajax调用后台服务交互数据,因 ...

  7. 将form表单提交文件修改为ajax提交

    好久没有记录工作中的出现的问题了,不过最近客户提出了新的需求,正好弥补了一下我的短板,学到了新的知识. 周一接到客户电话,要求完善上周写的某个功能--就是同时上传多个图片,并通过接口程序传到第三方系统 ...

  8. html form提交前验证,form表单提交前验证实现方法

    form表单提交前验证实现方法2017-11-26 20:54 form表单提交是网站中最常见的,基本上所有的网站都会用到. 除非你就一些静态网页,仅仅是展示,而不需要互动,所以不需要提交表单. 但是 ...

  9. form表单提交踩坑记

    2019独角兽企业重金招聘Python工程师标准>>> 今天收获了一次集团故障,心塞不已,究其原因,是form表单提交时web服务器对大小做了限制.这个必现的问题在测试阶段也不知为啥 ...

  10. vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法

    最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...

最新文章

  1. 返回手势导致页面卡死并且UI错乱的问题解决
  2. laravel中Crypt加密方法
  3. 李国杰院士:关于人工智能本质和价值的13个判断,谨防重蹈覆辙!
  4. android中解压文件
  5. 解决mysql服务无法启动的问题
  6. Android学习笔记之Intent
  7. Python函数默认参数陷阱
  8. 数据结构基础(1) --Swap Bubble-Sort Select-Sort
  9. 基于Android的智能家居手持终端系统开发(毕设开题报告)修改版
  10. 双目相机:基于双目视觉的目标测距
  11. 防盗报警器c语言程序,基于AT89C2051设计的无线防盗报警器 附程序
  12. Kettle使用 js 文件生成节假日表文件 附带2019-2020节假日文件
  13. VM12虚拟机安装xp系统教程
  14. NavigationDuplicated: Avoided redundant navigation to current location
  15. windows下文件名太长无法删除
  16. 12月组队学习——JoyfulPandas第二章思维导图
  17. 数学基础(二)——参数估计与矩阵运算基础
  18. 英语单词词性顺口溜_初小英语语法速记口诀大全——词类
  19. 在线微信对话生成器源码 装逼神器
  20. 如何登录MySQL数据库

热门文章

  1. LeetCode刷题第5周小结
  2. UVA12676 Inverting Huffman
  3. mongodb与mysql相比的优缺点
  4. python 中的拷贝、浅拷贝与深拷贝
  5. 计算机表格制作ppt,成为 PPT 表格制作高手,就是这么简单!
  6. Python数据可视化-基于Python-matplotlib
  7. linux删除文件历史如何查看,如何恢复误删除的Linux文件
  8. android开发 多语言和国际化
  9. 微信 html5 动图格式,微信真人动态表情包 怎么给自己录制GIF动态图片 你也可以录制搞笑微信gif图片;...
  10. 火狐浏览器自动刷新网页插件