使用jQuery Form Plugin提交多个表单

时间:2017-06-22 19:13:02

标签: jquery html ajax forms tinymce

我有两种表单使用TinyMCE InlinejQuery Form Plugin提交内容。这些都工作正常但我希望能够在这种情况下使用一个按钮提交所有表单。每页上不会超过5个表格。

我看了很多其他帖子,但似乎没有一个能适合我的情况。大多数其他解决方案都使用空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> 
&#13;
&#13;
&#13;

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

提前致谢!

3 个答案:

答案 0 :(得分:1)

您可以使用forms的{​​{1}}属性来获取表单数组。

document

更新

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

答案 1 :(得分:1)

解决了我的问题 - 使用mhatch的答案和this,我添加了Declare @YourTable Table ([AccountNo] int,[RunKey] int,[RunDate] date,[Address] varchar(50),[Salary] int,[PromotionDate] date) Insert Into @YourTable Values (12345,2,'06/20/2017','123 Main Street',60000,'01/15/2017') ,(12345,3,'06/21/2017','123 Main Street',60000,'01/15/2017') ,(12345,4,'06/22/2017','123 Main Street',65000,'06/21/2017') ;with cte as ( Select A.AccountNo ,A.RunKey ,A.RunDate ,B.* ,PreValue=Lag(Value) over (Partition By AccountNo,Item Order by RunDate) ,PreDate =Lag(RunDate) over (Partition By AccountNo,Item Order by RunDate) From @YourTable A Cross Apply ( values ('Address' ,cast(A.[Address] as varchar(max))) ,('Salary' ,cast(A.[Salary] as varchar(max))) ,('PromotionDate',cast(A.[PromotionDate] as varchar(max))) ) B (Item,Value) ) Select * From cte Where Value<>PreValue and PreValue is not null ,在发送之前填充了密钥。

tinyMCE.triggerSave();

答案 2 :(得分:0)

尝试使用类似的jQuery:

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