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

can you paste the html of what youd like it to output?

DevDonkey
– DevDonkey

2016-04-13 11:22:37 +00:00
Commented Apr 13, 2016 at 11:22 — DevDonkey
– DevDonkey, Commented Apr 13, 2016 at 11:22
There is scope issue;

itzmukeshy7
– itzmukeshy7

2016-04-13 11:36:51 +00:00
Commented Apr 13, 2016 at 11:36 — itzmukeshy7
– itzmukeshy7, Commented Apr 13, 2016 at 11:36
At the Minus guy: Can you at least tell me what's wrong?

pguetschow
– pguetschow

2016-04-13 11:47:56 +00:00
Commented Apr 13, 2016 at 11:47 — pguetschow
– pguetschow, Commented Apr 13, 2016 at 11:47

Markus Müller · Accepted Answer · 2016-04-13 11:46:35Z

3

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); 
});

answered Apr 13, 2016 at 11:46

Markus Müller

2,6411 gold badge20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nerdlyist Over a year ago

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.

Craig Bezuidenhout · Accepted Answer · 2016-04-13 12:01:19Z

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>

Manjeet Barnala · Accepted Answer · 2016-04-13 12:08:57Z

1

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>

edited Apr 13, 2016 at 12:08

answered Apr 13, 2016 at 11:53

Manjeet Barnala

2,9951 gold badge13 silver badges21 bronze badges

1 Comment

Manjeet Barnala Over a year ago

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

Collectives™ on Stack Overflow

Append forms dynamically based on PHP-Array

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related