我有两种表单,可以使用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的新手,这就是为什么我使用表单插件的原因。
预先感谢!
您可以使用document
的forms
属性获取表单。
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
});
});
});