关于 form表单嵌套问题的解决方案

我们经常是这样嵌套的：

<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");
}

跟大家说一下，上面的input标签也可以换成button

像这样

关于 form表单嵌套问题的解决方案相关推荐

form表单嵌套，用标签的form属性来解决表单嵌套的问题
form表单嵌套,用标签的form属性来解决表单嵌套的问题参考文章: (1)form表单嵌套,用标签的form属性来解决表单嵌套的问题 (2)https://www.cnblogs.com/jpfs ...
如何提交form表单嵌套（提交表单外的数据方法）
如何提交form表单嵌套,form表单不能嵌套使用! 解决思路:将嵌套的form表单提取到最外层,将表单外要提交的数据,提交随表单提交而提交! 方法如下: <form action=" ...
html Form表单嵌套
html Form表单嵌套 html编写form表单的时候,某些特殊情况会需要form表单嵌套或者在form表单外部input框来输入值,这时候字需要设置一下input框的form属性即可 Form表 ...
vue3 antd项目实战——Form表单使用【v-model双向绑定数据，form表单嵌套input输入框、Radio单选框】
vue3 ant design vue项目实战--单选框(Radio)的使用以及Form表单的双向绑定知识调用(form表单的源代码附在文章最后) 场景复现实现需求 form表单整体架构的搭建 i ...
Form表单嵌套一个Input引发，页面刷新或者白屏问题
之前做一个关于electron-vue的项目,在上线之后引发了白屏的问题当时在测试环境的时候,但是只会有页面刷新的问题,在控制台上确实能看到,数据刷新了,然后试着打完包之后,确实是会有白屏的问题,且 ...
获取form表单_【第1535期】前端 Form 的表单的一个通用解决方案
前言今日早读文章由阿里@布达投稿分享. @布达,Alibaba Fusion项目组的.花名潕量.主要专注在设计系统.组件.可视化搭建这个领域正文从这开始-- Fusion Next - Form ...
form表单用js提前执行函数若不成功则不提交_面试必会的重复提交 8 种解决方案！...
重复提交看似是一个小儿科的问题,但却存在好几种变种用法.在面试中回答的好,说不定会有意想不到的收获!现把这 8 种解决方案分享给大家! 1.什么是幂等在我们编程中常见幂等 select查询天然幂等 ...
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案参考文章: (1)antd-vue中的form表单label标签for导致点击文字触发输入框解决方案 (2)http ...
form表单提交时多个相同name属性问题解决方案一
1. 问题背景 2. 解决方法 2.1. 后台处理 2.2. 前端处理 2.2.1. 分析 2.2.2. 解决 1 问题背景项目中有这样的需求:根据不同的业务逻辑填写不同的表单提交到数据库中, 但是 ...

关于 form表单嵌套问题的解决方案

关于 form表单嵌套问题的解决方案相关推荐

最新文章

热门文章

关于 form表单 嵌套问题的解决方案

关于 form表单 嵌套问题的解决方案相关推荐

最新文章

热门文章

关于 form表单嵌套问题的解决方案

关于 form表单嵌套问题的解决方案相关推荐