javascript Submit multiple forms with one button

Question

In my html I have multiple forms (text inputs, radio buttons, check boxes and select) and one button. I would like to fill all these forms and send values to my php file. For now I am trying to submit values from text input and select but I am stuck at this point.

I have a js submit file:

 submitForms = function(){
  document.getElementById("form1").submit();
  document.getElementById("form2").submit();
 }

And my forms are like this: SELECT:

 <form id ="form1" name="dists" action="solve.php" method="post">
        <select id="demo" name="sadzba" onchange="selectElement1(this.value)>
                <option value="">-- vyberte oblasť --</option>
        </select>
    </form>

Text input form + button:

 <form id="form2" action="solve.php" method="post">
    <input type="text" name="spotVT" ><label>kWh za rok VT</label>
    <div id="nt" style='display:none'><input type="text" name="spotNT"  ><label>kWh za rok NT</label></div>

    </form>
 <input id="sub" type="button" value="Ok" style="margin-left:15px;" onclick="submitForms()"/>

But this is not working. Can you help me please? Thank you

How would you submit two things to two different pages? It would require TWO hits to the server, but it is one page. Not going to happen with plain form submits. — epascarello, Jan 17 '14 at 14:12
Possible duplicate of [Submit two forms with one button](http://stackoverflow.com/questions/7843355/submit-two-forms-with-one-button) — Liam, Oct 21 '16 at 07:41
This question has been asked by several already, please see these two links: https://stackoverflow.com/questions/7843355/submit-two-forms-with-one-button https://stackoverflow.com/questions/8563299/submit-multiple-forms-with-one-submit-button Basically it looks like you are going to need to do this asynchronously. — t1nr2y, Jan 17 '14 at 13:43

score 2 · Answer 1 · answered May 29 '18 at 10:55

Once you are submitting one form your page reloads or terminates the javascript after that submission of form so better use Ajax for submitting multiple forms at the same time

with jquery

$("#sub").click(function(){
    $("form").each(function(){
        var fd = new FormData($(this)[0]);
        $.ajax({
            type: "POST",
            url: "solve.php",
            data: fd,
            processData: false,
            contentType: false,
            success: function(data,status) {
               //this will execute when form is submited without errors
           },
           error: function(data, status) {
               //this will execute when get any error
           },
       });
    });
});

Above code will submit every form when you click a button with id sub

score 1 · Answer 2 · answered Nov 16 '14 at 07:45

1

It will be easier to only submit one form. You can give your select and input tag the same form name by assigning form="your-form-id".

answered Nov 16 '14 at 07:45

Pei Guo

79
1
4

score 1 · Answer 3 · answered Aug 25 '15 at 06:16

Here's an simple example of a native Javascript implementation.

<!DOCTYPE html>
<html>
<head>
    <title>Multiform - JAVASCRIPT</title>
</head>
<body>

<fieldset>
    <legend>Form 1</legend>
    <form name="f1" id="f1" onsubmit="return validate(this)">
        <input type="text" name="username" placeholder="Username" />
    </form>
</fieldset>

<fieldset>
    <legend>Form 2</legend>
    <form name="f2" id="f2" onsubmit="return validate(this)">
        <input type="text" name="email" placeholder="Email" />
    </form>
</fieldset>

<fieldset>
    <legend>Form 3</legend>
    <form name="f3" id="f3" onsubmit="return validate(this)">
        <input type="text" name="password" placeholder="Password" />
    </form>
</fieldset>

<button onclick="submitAll();">SUBMIT ALL</button>

<script>
'use strict';

function validate(form){
    //forms processsing goes here...
    console.log(form, form.name)
    return false;
}

function submitAll(){
    for(var i=0, n=document.forms.length; i<n; i++){
        document.forms[i].onsubmit();
    }

}

</script>

</body>
</html>

use `.submit();` not `.onsubmit();` – Mamdouh Saeed Oct 26 '16 at 13:02 — Mamdouh Saeed, Oct 26 '16 at 13:02

score 1 · Answer 4 · answered Jul 28 '16 at 08:09

You could try this. If submitting all forms is fine for your page

 $('form').submit();

Function that's in actual use:

function trySubmitAllForms() {
    if ($('.saveSpinner').is(':visible')) {
        return;
    }
    if ($('form').valid()) {
        $('.saveSpinner').show();
        $('form').submit();
    } else {
        showValidationErrorMessages();
    }
}

score 0 · Answer 5 · edited Jun 18 '21 at 12:30

0

Bismillah, try our method below, insyaAllah we hope can provide a solution for you.

document.getElementById("submit").addEventListener("click", function () {
  $(function () {
    $("#formid01").delay(300).submit();
    $("#formid02").delay(300).submit();
  });
});

edited Jun 18 '21 at 12:30

Behemoth

5,389
4
16
40

answered Jun 18 '21 at 05:56

Muhammad Veby

1

javascript Submit multiple forms with one button

5 Answers5

Linked