我们经常是这样嵌套的:

 <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. Docker的容器操作

    启动一次性运行的容器 入门级例子:从ubuntu:14.04镜像启动一个容器,成功后在容器内部执行/bin/echo 'hello world'命令,如果当前物理机没有该镜像,则执行docker pu ...

  2. 新概念英语(1-35)Our village

    新概念英语(1-35)Our village Are the children coming out of the park or going into it ? This is a photogra ...

  3. eclipse使用git及github学习笔记

    项目托管 1.首先需要在github上建立一个远端仓库  点击Create repository后,会在github上建立相应的git仓库,并会出现如下界面: 复制https或者ssh的仓库地址,远端 ...

  4. powerdesigner将name的名字赋给comment

    1 PowerDesigner中批量根据对象的name生成comment的脚本 执行方法:Open PDM -- Tools -- Execute Commands -- Run Script Vb ...

  5. JDK1.8源码(七)——java.util.HashMap 类

    本篇博客我们来介绍在 JDK1.8 中 HashMap 的源码实现,这也是最常用的一个集合.但是在介绍 HashMap 之前,我们先介绍什么是 Hash表. 1.哈希表 Hash表也称为散列表,也有直 ...

  6. POJ-1860 Currency Exchange---Bellman-Ford判断正环

    题目链接: https://vjudge.net/problem/POJ-1860 题目大意: 我们的城市有几个货币兑换点.让我们假设每一个点都只能兑换专门的两种货币.可以有几个点,专门从事相同货币兑 ...

  7. 深度学习中Xavier初始化

    "Xavier"初始化方法是一种很有效的神经网络初始化方法,方法来源于2010年的一篇论文<Understanding the difficulty of training ...

  8. 小技巧-ASP.Net session保存在数据库服务器

    引用博客:http://www.cnblogs.com/lykbk/archive/2013/01/13/hf576856868.html web Form 网页是基于HTTP的,它们没有状态, 这意 ...

  9. PHP 常用header头定义

    在php的开发中,我们常常需要使用到header函数头来进行做标记 header() 函数向客户端发送原始的 HTTP 报头. 常用header设置列表如下: header('HTTP/1.1 200 ...

  10. Python面向对象——基本继承

    1.基本继承图解 1.1实例化一个Contact类的对象c 1.2实例化一个Supplier类的对象s 1.3访问对象的属性 1.4访问对象s的方法 1.5类变量详解 如果从新定义c.all_cont ...