How to submit multiple forms with a single submit button?

Question

Here's is a summary of my code

<form class=”form1” action=”action.php” method=”POST”>
    //some code
</form>
<form class=”form2” action=”action.php” method=”POST”>
    //some code
</form>
<form class=”form3” action=”action.php” method=”POST”>
    //some code
</form>
<button id=”submit” type=”submit” name=”submit_changes”>Save Changes</button>

SUPPOSE script to submit all forms

<script>

document.getElementById('submit').addEventListener('click', function() {
  // check for and report errors here
  for (var i = 0; i < document.forms.length; i++) {
    document.forms[i].submit();
  };
  console.log(document.forms.length);
});

</script>

I realized that after clicking the button "Save Changes", my action.php seems only to process the last form i.e form with class attribute class="form3" I realized that the form tag is an async function. If one has many forms in his file with one submit button the submit button won't submit all the forms but the last because of its asynchronous nature. I'm a self-taught web developer, any corrections or solutions are welcomed. It has been a week since I am trying to solve this issue.

https://stackoverflow.com/questions/7843355/submit-two-forms-with-one-button — GrafiCode, May 22 '21 at 14:05
What you want to do does not really make a lot of sense. All your forms have the same `action` value. Why not just have *one* form? — Pointy, May 22 '21 at 14:13
How is this question related to `mysql`? Also where is the relation to `php`? — B001ᛦ, May 22 '21 at 14:22
Does this answer your question? [javascript Submit multiple forms with one button](https://stackoverflow.com/questions/21187028/javascript-submit-multiple-forms-with-one-button) — Mike Doe, May 22 '21 at 14:24
I don't think anything will work because the HTTP redirection already takes place as soon as you make a FORM to submit and rest of the JS won't execute afterwords. The only way could be using iFrame for each form (or might be different frames!). — Broken Arrow, May 22 '21 at 14:37
Also a SUBMIT button outside the FORM element? Should not conform. — Broken Arrow, May 22 '21 at 14:39

score 1 · Answer 1 · answered May 22 '21 at 14:27

I believe this code should work. What I did is that I made one of the forms classes the same('form') and then I found how much forms there are in your entire snippet. Next, I looped through them and submitted each. I believe this code should be functional.

function submit(){
  let forms = document.getElementsByClassName("form");
  for(var i =0; i < forms.length; i++){
    forms[i].submit();
  }
}

<form class="form 1" action="action.php" method="POST">
    //some code
</form>
<form class="form 2" action="action.php" method="POST">
    //some code
</form>
<form class="form 3" action="action.php" method="POST">
    //some code
</form>
<button id="submit" type="submit" onclick="submit()" name="submit_changes">Save Changes</button>

shaswat.dharaiya · Answer 2 · 2021-05-22T14:35:06.033

you can try something like:

<form class=”form1” id="form1" action=”action.php” method=”POST”>
    //some code
</form>
<form class=”form2” id="form2" action=”action.php” method=”POST”>
    //some code
</form>
<form class=”form3” id="form3" action=”action.php” method=”POST”>
    //some code
</form>
<button id=”submit” onCLick=handleMultipleSubmit() name=”submit_changes”>Save Changes</button>

And in the script tag:

<script>
  function handleMultipleSubmit(){
    document.getElementsById("form1").submit();
    document.getElementsById("form2").submit();
    document.getElementsById("form3").submit();
  }
</script>

Hope this works for you

How to submit multiple forms with a single submit button?

2 Answers2