Submit multiple forms using jQuery Form Plugin

Question

I have two forms that submit content from TinyMCE Inline using the jQuery Form Plugin. These both work fine but I want the ability to submit all of the forms using one button in this scenario. There won't be any more than 5 forms on each page.

I've looked at lots of other posts and none of them seem to work for my situation. Most of the other solutions submit the forms with empty POST values.

<?php require_once('connect.php'); ?>
<!DOCTYPE html>
<html>
<head>
 <title>Tiny MCE</title>

 <link rel="stylesheet" type="text/css" href="stylesheet.css">

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script type="text/javascript" src="js/tinymce/tinymce.min.js"></script>
 <script type="text/javascript" src="jquery.form.min.js"></script>

 <script type="text/javascript">
  tinymce.init({
   selector: '.editable',
   inline: true
  });
 </script>

<!-- Submits forms -->
 <script type="text/javascript">
  $(document).ready( function(){
   $('.input_form').ajaxForm({ url: 'qry.php', type: 'post' });
  });
 </script>

 <script type="text/javascript"> <!-- Loads whatever was submitted last time into the respective div -->
  $(document).ready( function(){
   $('#index_s1').load('load.php?form_ID=index_s1');
   $('#index_s2').load('load.php?form_ID=index_s2');
  });
 </script>

</head>
<body>
<section>
 <h1>Tiny MCE Tests</h1>
</section>

<section>
<button id="submit_all">Submit All</button> <!-- submit all forms using this button -->
 
 <form class="input_form">
  <div class="editable" id="index_s1"></div>
  <input type="submit" name="sub" value="Submit">
 </form>

 <form class="input_form">
  <div class="editable" id="index_s2"></div>
  <input type="submit" name="sub" value="Submit">
 </form>

</section>

</body>
</html>

I'm a novice at jQuery which is why I'm using the form plugin.

Thanks in advance!

mhatch · Answer 1 · 2017-06-22T20:02:15.130

1

You can use the forms property of document to get an array of forms.

function massSubmit(){
  var formsList = document.forms;
  for(var i=0; i<formsList.length; i++){
    $.post('server.php', $(formsList[i]).serialize())
  } 
}

Update:

You would need to submit using ajax otherwise only the first form will submit.

edited Jun 22 '17 at 20:02

answered Jun 22 '17 at 19:31

mhatch

4,441
6
36
62

Returns `TypeError: formsList[i].submit is not a function`. Also, I've added action attributes. – Matt Jun 22 '17 at 19:45
If you `console.log(formsList)` Do you get the array of forms objects? – mhatch Jun 22 '17 at 19:52
Upon further thinking, once the first form submits, the others won't. Better to submit them using ajax. But you should be able to loop through the `document.forms` nodelist to access and submit each one. – mhatch Jun 22 '17 at 19:55
Sorry if I sound stupid but I was submitting using AJAX in the first place right? BTW, the console log returns `HTMLCollection [ , ]` – Matt Jun 22 '17 at 20:01
Is the page submitting to itself? – mhatch Jun 22 '17 at 20:06
It submits to qry.php using the jQuery form plugin. I'll need a little more explanation with JS stuff as I'm new to it. – Matt Jun 22 '17 at 20:08
In explanation of the before statements using `document.forms[i].submit()` will cause a redirect on the submit, where using ajax will keep you on the page. The HTMLCollection is what you would expect to see (you should be able to call `submit()` on each item.) I updated the answer, hopefully, it will work for you. – mhatch Jun 22 '17 at 20:14
The code you wrote doesn't turn up any errors now but only picks up the key of the TinyMCE div. I did `print_r($_POST);` in the PHP file and it returns `Array ( [index_s1] => )` with no value - probably something to do with the weird way TinyMCE Inline handles forms. – Matt Jun 22 '17 at 20:29

score 1 · Accepted Answer · answered Jun 22 '17 at 20:37

1

Fixed my problem - using mhatch's answer and this, I added tinyMCE.triggerSave(); which populates the key before sending.

function massSubmit(){
   var formsList = document.forms;
   for(var i=0; i<formsList.length; i++){
      tinyMCE.triggerSave();
      $.post('qry.php', $(formsList[i]).serialize())
   } 
}

answered Jun 22 '17 at 20:37

Matt

1,518
4
16
30

Nice! You found the missing line :) – mhatch Jun 22 '17 at 21:08
1

It looks like you only need to call `triggerSave()` once, so you can move it outside of the loop. – mhatch Jun 23 '17 at 16:22

score 0 · Answer 3 · answered Jun 22 '17 at 19:22

0

Try with jQuery something like that:

$('#submit_all').click(function(){
 $('.input_form').each(function(){
  $.ajax({type:"POST",url: window.location.pathname ,data:{"post":$(this).serialize()}}) .always(function(e) {
   // finished
  });
 });
});

answered Jun 22 '17 at 19:22

Richard

618
1
9
15

Thought it was gonna work but doesn't post value of `index_s1` or `index_s2`. TinyMCE posts the form using the ID normally. – Matt Jun 22 '17 at 19:34

Submit multiple forms using jQuery Form Plugin

3 Answers3