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



我有两种表单,可以使用jQuery表单插件从Tinymce内联提交内容。这两个都可以正常工作,但是我希望在这种情况下使用一个按钮提交所有表格。每个页面上都不会有5个以上的表格。

我已经看过很多其他帖子,它们似乎都不适合我的情况。大多数其他解决方案都提交了带有空的帖子值的表格。

<?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的新手,这就是为什么我使用表单插件的原因。

预先感谢!

您可以使用documentforms属性获取表单。

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

更新:

您需要使用Ajax提交,否则只有第一张表格才会提交。

解决了我的问题 - 使用mhatch的答案,我添加了 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_all').click(function(){
 $('.input_form').each(function(){
  $.ajax({type:"POST",url: window.location.pathname ,data:{"post":$(this).serialize()}}) .always(function(e) {
   // finished
  });
 });
});

相关内容

  • 没有找到相关文章

最新更新