jQueryフォームプラグインを使用して複数のフォームを送信

TinyMCE InlineからjQuery Form Pluginを使用してコンテンツを送信する2つのフォームがあります。これらはどちらもうまくいきますが、このシナリオでは1つのボタンを使用してすべてのフォームを送信する機能が必要です。各ページには5つ以上のフォームがありません。jQueryフォームプラグインを使用して複数のフォームを送信

私は多くの他の投稿を見てきましたが、私の状況では動作していないようです。他のソリューションのほとんどは、POST値が空のフォームを送信します。

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

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

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

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

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

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

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

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

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

 
</section> 
 

 
</body> 
 
</html>

私は、フォームのプラグインを使用している理由であるjQueryのでは初心者です。

ありがとうございます！

出典

2017-06-22 Alex. W

問題を修正しました - 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()) 
    } 
}

出典

2017-06-22 20:37:22

ニース！あなたは欠けている行を見つけました:) – mhatch

'triggerSave（）'を一度呼び出すだけでよいので、ループの外に移動することができます。 – mhatch

あなたが正しいように見えます！助けてくれてありがとう –

jQueryを使ってそのような何か試してみてください：

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

出典

2017-06-22 19:22:26 Richard

「index_s1」または「index_s2」の値をポストしませんでした。 TinyMCEは通常のIDを使ってフォームを投稿します。 –

あなたがフォームの配列を取得するためにdocumentのformsプロパティを使用できます。

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

更新：

あなたは、AJAXを使用して提出する必要があるだろうそれ以外の場合は最初のフォームが提出されます。

出典

2017-06-22 19:31:22 mhatch

'TypeError：formsList [i] .submitは関数ではありません。 'また、アクション属性も追加しました。 –

'console.log（formsList）'フォームオブジェクトの配列を取得していますか？ – mhatch

さらに考えてみると、最初のフォームが送信されると、他のフォームは送信されません。より良いajaxを使用してそれらを提出する。しかし、 'document.forms'ノードリストをループして、それぞれにアクセスして送信することができます。 – mhatch

jQueryフォームプラグインを使用して複数のフォームを送信

答えて

関連する問題