PHP-Arrayに基づいてフォームを動的に追加する

Question

私の一族のためのモジュールを開発しています。ユーザーはBBCode形式のテキストを自動的に生成できます。 私たちのチームには複数のグループがありますから、それらもまた別々にしておきたいです<h1>タグ $groupsのグループごとに、クローンの個数が必要です。

ここに私のHTML + JSがあります。悲しいことに

<?php 
[...] //some DB stuff 
     <script>js/form.js</script> 
     <form name="groups" action="" method="post"> 
     <?php foreach($groups as $key): ?> 
     <div class="field_wrapper"> 
      <div> 
       <h2><?php echo($key)?></h2> 
       <input type="text" name="field_rank[]" placeholder="Rank" value=""/> 
       <input type="text" name="field_name[]" placeholder="Name" value=""/> 
       <a href="javascript:void(0);" class="add_button" title="Add Row">+</a> 
      </div> 
     </div> 
     <?php endforeach; ?> 
     <input type="submit" name="submit" value="Submit"/> 
     </form> 
?> 

：代わりに<h1>のPHP配列からグループ$groups=array("Group 1", "Group 2",...)

http://jsfiddle.net/yq2jjn9z/1/（form.js）

私のindex.phpは、このような瞬間に見えるの名前があることsould選択したグループ内だけでなく、すべてをクローンします。 しかし、削除ボタンは意図したとおりに機能します。私は何か見落としてますか？

また、PHPとHTMLを混在させずにこれを行うことはできますか？

どのように私はこれを改善することができますか？

編集：http://techtreedev.de/muster.phpこのそれは現時点でのように見えているもの（ただし、ドイツ語の単語を含む）

PS：downvoting前に、私の質問と間違って何書いてご検討ください。事前に感謝します

Answer 1

var wrapper = $('.field_wrapper'); 
... 
$(wrapper).append(fieldHTML); 

ラッパー "field_wrapper"クラスのすべての要素が含まれています。要素を追加すると、このクラスを持つすべての要素に要素が追加されます。あなたはこの

<script>js/form.js</script> 
<form name="groups" action="" method="post"> 
<?php foreach($groups as $key): ?> 
<div class="field_wrapper_<?php echo $key;?>"> 
    <div> 
     <h2><?php echo($key)?></h2> 
     <input type="text" name="field_rank[]" placeholder="Rank" value=""/> 
     <input type="text" name="field_name[]" placeholder="Name" value=""/> 
     <a href="javascript:void(0);" class="add_button" onclick="append_more('<?php echo $key;?>')" title="Add Row">+</a> 
    </div> 
</div> 
<?php endforeach; ?> 
<input type="submit" name="submit" value="Submit"/> 
</form> 

などのグループごとにユニークなラップを作成し、このコードを配置する必要があり

$(addButton).click(function(){ 
     $(this).parents(".field_wrapper").append(fieldHTML); 
}); 

Answer 2

をクリックした+ボタンの正しいラッパーのdivを見つける必要がある

あなたのJSファイル

<script> 
function append_more(key) 
{ 
    var wrapper = $('.field_wrapper_'+key); 
    var fieldHTML = '<div><input type="text" name="field_rank[]" placeholder="Rang" value=""/> <input type="text" name="field_name[]" placeholder="Name" value=""/> <a href="javascript:void(0);" class="remove_button" title="Feld entfernen">-</a></div>'; 
    $(wrapper).append(fieldHTML); 
} 
</script> 

Answer 3

質問はちょっと混乱しますが、注意すべきことはいくつかありますが、

現時点では、配列を使用してサーバーのデータを解析しますが、配列をまったくグループ化しない場合は、以下のコードを開始点として試してみてください。

<?php $groups = array("group 1","group 2"); ?> 

<form name="groups" action="" method="post"> 

<?php foreach($groups as $key=>$text): ?> 
<div class="field_wrapper"> 
    <div> 
     <h2><?php echo($text)?></h2> 
     <div class="rowDiv_<?= $key ?>"> 
      <input type="text" name="field_rank[<?= $key ?>][0][Rank]" placeholder="Rank" value=""/> 
      <input type="text" name="field_name[<?= $key ?>][0][Name]" placeholder="Name" value=""/> 
      <a href="javascript:void(0);" class="add_button" data-group-key="<?= $key ?>" data-rowCount="0" title="Add Row">+</a> 
     </div> 
    </div> 
</div> 
<?php endforeach; ?> 
<input type="submit" name="submit" value="Submit"/> 
</form> 

<script> 
    $("body").on("click",".add_button",function(){ 
     myKey = $(this).attr("data-group-key"); 
     rowCount = $(".rowDiv_"+myKey+":last a").attr("data-rowCount"); 
     rowCount = parseInt(rowCount) + 1; 
     html = '<div class="rowDiv_'+myKey+'">'; 
     html += '<input type="text" name="field_rank['+myKey+']['+rowCount+'][Rank]" placeholder="Rank" value=""/> '; 
     html += '<input type="text" name="field_name['+myKey+']['+rowCount+'][Name]" placeholder="Name" value=""/> '; 
     html += '<a href="javascript:void(0);" class="remove_button" data-group-key="'+myKey+'" data-rowCount="'+rowCount+'" title="Remove Row">-</a>'; 
     html += '</div>'; 
     $(this).parent().parent().append(html); 
    }) 

    $("body").on("click",".remove_button",function(){ 
     $(this).parent().remove(); 
    }) 
</script>