javascript Submit multiple forms with one button

javascript jquery forms submit form-submit

62,745

Solution 1

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

Solution 2

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".

Solution 3

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>

Solution 4

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

View more solutions

62,745

Author by

user2886091

Updated on June 19, 2021

Comments

user2886091 almost 3 years

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