Geek Answers Handbook

Javascript Submit multiple forms with a single button

In my html, I have several forms (text inputs, radio buttons, check boxes and selections) and one button. I would like to fill out all of these forms and submit the values ​​to a php file. At the moment, I'm trying to pass values ​​from text input and select, but I'm stuck at this point.

I have a js send file:

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

And my forms are as follows: 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 entry 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 that does not work. could you help me? Thanks you

+7
javascript jquery submit forms form-submit
source share
4 answers

This question has already been asked by several, see these two links:

Submit two forms with one button

Submit multiple forms with a single submit button

Basically, it looks like you will need to do this asynchronously.

+2
source share

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

+1
source share

Here is a 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>
+1
source share

You can try this. If all forms are suitable for your page

  $('form').submit();

Function that in actual use:

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

More articles:


All Articles