Append forms dynamically based on PHP-Array

Question

I'm developing a module for my clan, where the user can automatically generate a BBCode formatted text. As there are multiple groups in our team, i want them also seperated by <h1> Tags For each Group from $groups there should be an individual amount of clones.

Here's my HTML + JS. Instead of the <h1> there sould be the name of the group from the PHP array $groups=array("Group 1", "Group 2",...)

http://jsfiddle.net/yq2jjn9z/1/ (form.js)

My index.php looks at the moment like this:

<?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>
?>

Sadly, it clones everything, not only within the selected group. But the remove button works exactly as intended. Did I miss something?

Also, can I do this without PHP and HTML mixed?

Any ideas, how i can improve this?

Edit: http://techtreedev.de/muster.php this it what it's looks like at the moment (But with German words)

PS: Before downvoting, please consider writing what's wrong with my question. Thanks in advance

• DevDonkey: can you paste the html of what youd like it to output?
• itzmukeshy7: There is scope issue
• pguetschow: At the Minus guy: Can you at least tell me what's wrong?

Answer 1

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

wrapper contains all elements with class "field_wrapper". If you add an element to it, it is added to all elements with this class.

You need to find the correct wrapper div for the + button that was clicked

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

• nerdlyist: I had an answer but it included adding ids this is much cleaner. I think it is worth noting though that the "mixing of php and html" is perfectly fine if not expected.

Answer 2

the question is a bit confusing, but a few things to note,

at the moment, you are using an array to parse the data the the server, but not grouping the arrays together at all, try the below code as a starting point.

<?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>

Answer 3

You need to make a unique wrap for each group like this

<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>

And put this code in your JS file

<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>

• Manjeet Barnala: I've removed class="remove_button", and forgot to add , now edited code please check....