Solutions to the problem of form nesting

We often nest like this:

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

Then, we will find that when our form 2 executes the submit submission, it will report an error that submit() cannot be found,

We execute console.log(document.getElementById('formId2')); will find the result is null;

Now that we find that form forms can coexist but cannot be nested, how to solve it?

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

The code above: We put the events executed by multiple forms in one form, but we control it when submitting:

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

In this way, it can be solved by the transformation of Action when uploading/requesting.