使用 jQuery 表单插件提交多个表单

Question

我有两个表单可以提交来自 TinyMCE Inline using the jQuery Form Plugin 的内容。这些都工作正常，但我希望能够在这种情况下使用一个按钮提交所有表单。每页不会超过5个表格。

我看过很多其他帖子，none 其中似乎适合我的情况。大多数其他解决方案提交的表单具有空 POST 值。

<?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>

我是 jQuery 的新手，这就是我使用表单插件的原因。

提前致谢！

Answer 1

试试 jQuery 类似的东西：

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

Answer 2

您可以使用 document 的 forms 属性来获取表单数组。

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

更新：

您需要使用 ajax 提交，否则只会提交第一个表单。

Answer 3

解决了我的问题 - 使用 mhatch 的答案和 this，我添加了 tinyMCE.triggerSave();，它在发送之前填充密钥。

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

使用 jQuery 表单插件提交多个表单

Submit multiple forms using jQuery Form Plugin

html

forms

ajax

jquery

tinymce