jquery postメソッドを使用して複数の動的フォームをオブジェクトおよびポストに保存してアップロードする

Question

ユーザーがタブを押すか次のタブに移動するときにフォーム1で番号を入力すると動的なフォームが作成されますフォーム1は、データと日付を入力してファイルを添付することができます。

各タイムユーザーがフォーム1に数字を入力してタブを押すと、フォーム1より下のダイナミックフォーム2が表示され、ユーザーはデータを入力できます。フォーム1のフィールドのすべてがフォーム2の添付ファイルデータ。

jqueryを使用して動的プロセスを作成することができましたが、私が直面している問題はこの動的フォームデータを保持できないことです。また、わかるように、配列データを取得しようとしましたが、私はコンソールを使ってチェックを見る。

フォーム1：テキストフィールド1 - > hasmany - >フォーム2（テキストフィールド、日付、ファイル） このデータを保存してアップロードするには、このデータをPHPファイルに投稿します。

これを実現する方法や解決方法はありますか？

jQueryの一部：

$(function() { 

    $('#general').change(function() { 
     extracted('general', 'general : '); 
    }); 

    $('#in_uni_level').change(function() { 
     extracted('in_uni_level', 'in uni level : '); 
    }); 

    $('#in_section_level').change(function() { 
     extracted('in_section_level', 'in section level : '); 
    }); 

    $('#in_country_level').change(function() { 
     extracted('in_country_level', 'in country level :‌ '); 
    }); 

    function extracted(selection, Gtitle) { 

     var brief = []; 
     var contributor = []; 
     var datepick = []; 
     var file = []; 
     $('#dynamic_table').find('[name=brief]').each(function() { 
      brief.push(this.value); 
     }); 
     $('#dynamic_table').find('[name=contributor]').each(function() { 
      contributor.push(this.value); 
     }); 
     $('#dynamic_table').find('[name=datepick]').each(function() { 
      datepick.push(this.value); 
     }); 
     $('#dynamic_table').find('[name=file]').each(function() { 
      file.push(this.value); 
     }); 
     console.log(brief, contributor, datepick, file); 
     //    $("#dynamic_table").empty();//clear dynamic table data each time focus change 

     console.log($('#' + selection).val()); 

     var count = $('#' + selection).val(); 
     if (count > 0) { 

      var nextStep = $(document.createElement('tbody')); 

      var Dynamic_form_header = 
       '<tr>' + 
       '<th>' + Gtitle + '</th>' + 
       '<th></th>' + 
       '<th></th>' + 
       '<th></th>' + 
       '</tr>' + 
       '<tr>' + 
       '<th>Short Brief</th>' + 
       '<th>Contributers count</th>' + 
       '<th>date</th>' + 
       '<th>Related doc</th>' + 
       '</tr>'; 

      var Dynamic_form_body = ''; 
      for (var i = 0; i < count; i++) { 
       Dynamic_form_body += 
        '<tr>' + 
        '<td><input type="text" name="brief[]" id="brief" ' + 
        '</td>' + 
        '<td><input type="text" name="contributor[]" id="contributor"' + 
        '</td>' + 
        '<td><input type="text" name="datepick[]" class="datepicker"' + 
        '</td>' + 
        '<td><input type="file" name="file[]" id="doc"' + 
        '</td>' + 
        '</tr>'; 
      } 
      nextStep.html(Dynamic_form_header + Dynamic_form_body); 

      nextStep.appendTo("#dynamic_table"); 
     } 

     // default 
     $('#dynamic_table').live('click', function() { 
      $('.datepicker').datepicker(); 

     }); 
    } 



     $("#Submit_form").click(function() { 

      $.post("Requests/spc.php", //Required URL of the page on server 
       { // Data Sending With Request To Server 
        Save_Form: true, 
        brief: brief, 
        contributor: contributor, 
        datepick: datepick, 
        file: file, 
       }, 
       function (response) { // Required Callback Function 
        //======== disable loading for onclick event ========== 
        $("#loading_gif").hide(); 
        $("#add_user_btn").removeAttr('disabled'); 
        //======== disable loading for onclick event ========== 

        //$("#Response").text(response); 
        if (response == "save") { 
         $("#Response").text("ارسال دعوتنامه با موفقیت صورت گرفت.").css({color: 'green'}); 
        } 
       }); 
     }); 
}); 

HTMLセクション：

<form id="form" method="post" action="" 
     enctype="multipart/form-data"> 

    <table class='styled-table' cellspacing='0' width="360" 
      border='1'> 
     <tr> 
      <td> 
       <label for="general">general</label> 
       <div class="cleaner h10"></div> 

       <label for="in_uni_level">in uni level</label> 
       <div class="cleaner h10"></div> 

       <label for="in_section_level">in section level</label> 
       <div class="cleaner h10"></div> 

       <label for="in_country_level">in country level</label> 
       <div class="cleaner h10"></div> 
      </td> 
      <td> 
       <input type="text" id="general" 
         name="general"/> 
       <div class="cleaner h10"></div> 

       <input type="text" id="in_uni_level" 
         name="in_uni_level"/> 
       <div class="cleaner h10"></div> 

       <input type="text" id="in_section_level" 
         name="in_section_level"/> 
       <div class="cleaner h10"></div> 

       <input type="text" id="in_country_level" 
         name="in_country_level"/> 
       <div class="cleaner h10"></div> 
      </td> 
     </tr> 
    </table> 

    <div class="cleaner h30"></div> 

    <table class='styled-table' id="dynamic_table" 
      cellspacing='0' width="500" border='1'> 

    </table> 

</form> 

<button id="Submit_form">Submit</button> 

スナップショット：

Answer 1

あなたが持った問題は、第二の形式でchange関数を呼び出していなかったということです各フィールドのためにデータをキャプチャして配列にプッシュすることができます。あなたのコードを少し変更しましたが、あなたが望むことをやっているようです。私もフィドルを追加しました。

pushまた、毎回値がchangeになりたくない場合もあります。なぜなら、ユーザーがフィールドを編集して戻ってきたからです。配列を置き換えるのではなく、配列に追加します。

また、実装していない多次元配列も処理する必要があります。これは、ユーザーが最初のフォームで1を超える数を選択すると、元の配列にx配列を格納する必要があるためです要求。応答のための

$(function() { 

    var brief = []; 
    var contributor = []; 
    var datepick = []; 
    var file = []; 

    $('#general').change(function() { 
     extracted('general', 'general : '); 
    }); 

    $('#in_uni_level').change(function() { 
     extracted('in_uni_level', 'in uni level : '); 
    }); 

    $('#in_section_level').change(function() { 
     extracted('in_section_level', 'in section level : '); 
    }); 

    $('#in_country_level').change(function() { 
     extracted('in_country_level', 'in country level : '); 
    }); 

    $(document).on('change', '#brief', function() { 
     brief.push(this.value); 
    }); 

    $(document).on('change', '#contributor', function() { 
     contributor.push(this.value); 
    }); 

    $(document).on('change', '#datepick', function() { 
     datepick.push(this.value); 
    }); 

    $(document).on('change', '#file', function() { 
     file.push(this.value); 
    }); 

    function extracted(selection, Gtitle) { 

     $('#dynamic_table').find('[name=brief]').each(function() { 
      brief.push(this.value); 
     }); 
     $('#dynamic_table').find('[name=contributor]').each(function() { 
      contributor.push(this.value); 
     }); 
     $('#dynamic_table').find('[name=datepick]').each(function() { 
      datepick.push(this.value); 
     }); 
     $('#dynamic_table').find('[name=file]').each(function() { 
      file.push(this.value); 
     }); 
     console.log(brief, contributor, datepick, file); 
     //    $("#dynamic_table").empty();//clear dynamic table data each time focus change 

     console.log($('#' + selection).val()); 

     var count = $('#' + selection).val(); 
     if (count > 0) { 

      var nextStep = $(document.createElement('tbody')); 

      var Dynamic_form_header = 
       '<tr>' + 
       '<th>' + Gtitle + '</th>' + 
       '<th></th>' + 
       '<th></th>' + 
       '<th></th>' + 
       '</tr>' + 
       '<tr>' + 
       '<th>Short Brief</th>' + 
       '<th>Contributers count</th>' + 
       '<th>date</th>' + 
       '<th>Related doc</th>' + 
       '</tr>'; 

      var Dynamic_form_body = ''; 
      for (var i = 0; i < count; i++) { 
       Dynamic_form_body += 
        '<tr>' + 
        '<td><input type="text" name="brief[]" id="brief" ' + 
        '</td>' + 
        '<td><input type="text" name="contributor[]" id="contributor"' + 
        '</td>' + 
        '<td><input type="text" name="datepick[]" class="datepicker"' + 
        '</td>' + 
        '<td><input type="file" name="file[]" id="doc"' + 
        '</td>' + 
        '</tr>'; 
      } 
      nextStep.html(Dynamic_form_header + Dynamic_form_body); 

      nextStep.appendTo("#dynamic_table"); 
     } 

     // default 
     $('#dynamic_table').on('click', function() { 
      $('.datepicker').datepicker(); 
     }); 
    } 
}); 

https://jsfiddle.net/eqrbsgs8/