我们经常是这样嵌套的:

 <form id="formId1" action="" method="post"> //表单1
<form id="formId2" action="" method="get"> //表单2
<input id="but1" type="button" value="提交">
</form>
<input id="but2" type="button" value="保存">
</form>

然后,我们会发现我们表单2执行submit提交时会报错找不到submit(),

我们执行console.log(document.getElementById('formId2'));会发现结果为null;

既然我们发现form表单可并存但是不能嵌套了,那么怎样去解决呢?

<form id="formId1" action="" method="post">
<input id="but1" type="button" value="提交">
<input id="but2" type="button" value="保存">
</form>

上临代码:我们把多个表单执行的事件放在一个表单里面,但提交的时候我们加以控制:

  document.getElementById('but1').onclick=function(){
document.getElementById('formId1').setAttribute("action","www.baidu.com");
}
document.getElementById('but2').onclick=function(){
document.getElementById('formId1').removeAttribute("action","www.baidu.com")
document.getElementById('formId1').setAttribute("action","www.google.com");
}

这样通过上传/请求时,Action的变换,可以解决。

关于 form表单 嵌套问题的解决方案的更多相关文章

  1. form表单嵌套,用标签的form属性来解决表单嵌套的问题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 关于form表单排版的技巧

    //此处说明一个对于排版表单的方法将form表单嵌套在table里,因为table是格式化的,所以就不用再手动排版了源码如下 <from action="" method=& ...

  3. 直接提交一个form表单后台返回一个新页面通过target属性可以放到iframe当中

    问题描述: 我想提交一个form表单后台直接返回一个新页面,但是当前页面还不想被替换掉: 解决方案: 在页面中添加一个iframe将form表单的target属性设置为iframe的id这样的话返回的 ...

  4. Javascript中的Form表单知识点总结

    Javascript中的Form表单知识点总结 在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement ...

  5. Element Form表单实践(上)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  6. 数据表格,查询、导出共用一个form表单,实现文件流方式下载

    在开发中遇到问题是这样的: 在维护老的管理系统的过程中,老板说让加导出功能:项目中,查询的筛选条件是用的表单提交的方式写的. 解决方案有两种: 一.用ajax方式导出 var array = $('# ...

  7. JSP表单提交中文乱码解决方案

    分2种提交方式,解决方案不同: 1.form表单提交方式为get 乱码: 解决方案: 因为get方法是参数在URL中显示,因为tomcat的URL编码默认是:IOS-8859-1所以要么改tomcat ...

  8. form表单那点事儿(上) 基础篇

    form表单那点事儿(上) 基础篇 做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右.了解更深,用的更顺. 目录: 表单属性 表单元素 常识 模拟外观 表单属性 这个表单展示了fo ...

  9. [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

随机推荐

  1. ASP.NET Web API编程——路由

    路由过程大致分为三个阶段: 1)请求URI匹配已存在路由模板 2)选择控制器 3)选择操作 1匹配已存在的路由模板 路由模板 在WebApiConfig.Register方法中定义路由,例如模板默认生 ...

  2. Ubuntu 17.10.1安装, 定制

    p { margin-bottom: 0.25cm; line-height: 120% } a:link { } 2018.4.7 Ubuntu 17.10.1安装, 定制, 后续搭建LAMP环境 ...

  3. vue表单详解——小白速会

    一.基本用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定. 但 v-model 本质上不过是语法糖.它负责监听用户的 ...

  4. istio入门(01)istio的优势在哪里?

    Istio能做什么?Istio 试图解决微服务实施后面临的问题.Istio 提供了一个完整的解决方案,对整个服务网格行为洞察和操作控制,以满足微服务应用程序的多样化需求. Istio在服务网络中提供了 ...

  5. angular2 学习笔记 の 移动端开发 ( 手势 )

    更新 : 2018-01-31 (hammer 的坑) hammer 的 pinch 在某种情况下会自动触发 panEnd,很奇葩. 解决方法就是记入时间呗 refer : https://githu ...

  6. 新手解决jsp页面<%@报错的方法

    昨天菇凉我很崩溃的重装电脑系统(嗯,没错,第一次自己装系统,我可能是一个假的计算机系学生!),但这没难倒天生聪慧的我,都是小case~.这都不是重点,重点来了,当我火速配置好java的开发环境jdk, ...

  7. python request

    python request a. 客户端向服务端发送多层字典的值 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 obj =  ...

  8. RTKLIB源码解析(一)——单点定位(pntpos.c)

    RTKLIB源码解析(一)--单点定位(pntpos.c) 标签: GNSS RTKLIB 单点定位 [TOC] pntpos int pntpos (const obsd_t *obs, int n ...

  9. MySQL 表空间传输

    聊到MySQL数据迁移的话题,表空间传输时一个很实用的方法. 在MySQL 5.6 Oracle引入了一个可移动表空间的特征(复制的表空间到另一个服务器)和Percona Server采用部分备份,这 ...

  10. pyquery 的用法 --爬虫解析库

    如果你对Web有所涉及,如果你比较喜欢用CSS选择器,如果你对jQuery有所了解,那么这里有一个更适合你的解析库--pyquery. 接下来,我们就来感受一下pyquery的强大之处. 1. 准备工 ...