我们经常是这样嵌套的:

 <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. Python内置函数(39)——help

    英文文档: help([object]) Invoke the built-in help system. (This function is intended for interactive use ...

  2. 发布到NPMJS

    最近在做微服务的前后端设计,打算将客户端中的一个模块独立出来发布到npmjs上,因此,有机会了解了一下npm的发布过程. 参考了很多网上的文章,长篇累牍(但在这里还是真心感谢他们的分享),最终总结成一 ...

  3. JavaScript中的 原型 property 构造函数 和实例对象之间的关系

    1 为什么要使用原型? /* * javascript当中 原型 prototype 对象 * * */ //首先引入 prototype的意义,为什么要使用这个对象 //先来写一个构造函数的面向对象 ...

  4. idea中,发现某个java语法在低版本中不支持时的解决办法

    比如,在某个工程中,准备用java.util.Objects#equals语法,发现提示版本不支持. F4查看Module的配置,发现原来是1.6版本. 当我手动修改为1.8时,提示我:Module是 ...

  5. hdu1222&hdu1014 循环群的生成元

    hdu1222 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1222 题目大意: 大灰狼追小白兔.小白兔可以躲起来的洞绕成一个圈,大灰狼从0这个点出 ...

  6. Java面试题—初级(2)

    11.是否可以从一个static方法内部发出对非static方法的调用? 不可以.因为非static方法是要与对象关联在一起的,必须创建一个对象后,才可以在该对象上进行方法调用,而static方法调用 ...

  7. ECSHOP3.6版 钻石小鸟模板修改教程

    ecshop3.6版 钻石小鸟 模板修改明细 (1) 钻石小鸟 首页轮播图修改 (2)首页布局设置 (修改前建议先备份下数据库.  后台/数据备份) (3)修改模板头部内容. 如下图. 后台,模板设置 ...

  8. 重拾Python(3):Pandas之Series对象的使用

    Pandas是Python下最强大的数据分析和探索库,是基于Numpy库构建的,支持类似SQL的结构化数据的增.删.查.改,具有丰富的数据处理函数.Pandas有两大数据结构:Series和DataF ...

  9. fiddler实现手机抓包

    对fiddler相关配置 1.允许fiddler捕获http协议,打开fiddler客户端,菜单框选择Tools->Options->HTTPS,勾选图中三项 2.允许远程连接,Tools ...

  10. leetcode 442. Find All Duplicates in an Array 查找数组中的所有重复项

    https://leetcode.com/problems/find-all-duplicates-in-an-array/description/ 参考:http://www.cnblogs.com ...