我们经常是这样嵌套的:

 <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. 剑指offer-删除链表中重复的节点

    题目描述   在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处 ...

  2. Python内置函数(34)——map

    英文文档: map(function, iterable, ...) Return an iterator that applies function to every item of iterabl ...

  3. Groovy入门(2-2)Groovy的eclipse插件安装

    1.安装eclipse插件 启动eclipse,点击help -> Install New Software... 在弹出的窗口中点击:Add... Groovy插件的地址:http://dis ...

  4. python 网络爬虫与信息提取 学习笔记day4

    正则表达式简介: 简洁表示一组字符串的特征或者模式,在文本处理中十分常用,主要应用于字符串匹配中 1.  通用的字符串表达框架 2.  简洁表达一组字符串的表达式 3.  针对字符串表达简洁和特征思想 ...

  5. Tess4J OCR简单使用教程

    Tess4J简介 Tesseract-OCR支持中文识别,并且开源和提供全套的训练工具,是快速低成本开发的首选.而Tess4J则是Tesseract在Java PC上的应用.在英文和数字识别中性能还是 ...

  6. Python之黏包的解决

    黏包的解决方案 发生黏包主要是因为接收者不知道发送者发送内容的长度,因为tcp协议是根据数据流的,计算机操作系统有缓存机制, 所以当出现连续发送或连续接收的时候,发送的长度和接收的长度不匹配的情况下就 ...

  7. PyQt5--基础篇:用eric6工具实现三级联动效果

    今天给大家介绍下python gui界面的三级联动效果,我们用工具eric6来实现,先看下效果图. 首先我们先创建项目linkage,再新建窗体进入到Qt设计师工具开始设计界面,完成后保存并退出. 在 ...

  8. assert后面如果是假则程序崩溃

    assert后面如果是假,则程序崩溃.

  9. HTML5新增的标签及使用

    HTML5和HTML其实是很相似的,但是有些内容有发生了改变,今天我学习了一下HTML5发现还是挺好学的,只要有html+css基础就可以,今天知识看了下新的标签. 一.定义文档类型 在文件的开头总是 ...

  10. Spring boot 整合 Mybatis (完整版)

    最近工作上时间有点多,然后自己就学习了一下Spring boot,外加上Mybatis,在实际开发中都是比较常用的,所以这篇写一下SpringBoot整合Mybatis. 一.数据准备 CREATE ...