0

I want to be able to display the same piece of html code 10 times under the div called: <div id="add_remove_product_name"> By clicking on the button called: <button id="add_another_product_name">. I think I need some kind of a for loop for the job but are not sure. Any suggestion will be helpful, thanks.

My HTML code:

<div id="product_name">
    <input id="skriv_produktnavn" placeholder="Skriv Produktnavn her" required></label>

    <button id="add_another_product_name">Tilføj endnu et produktnavn</button>

    <div id="add_remove_product_name">
        <input id="added_product_name" placeholder="Skriv Produktnavn her" required></label>
        <button id="remove_product_name">X</button>
    </div>
Barmar
  • 741,623
  • 53
  • 500
  • 612
Casper S Andersen
  • 3
  • 2

3 Answers3

1

Use a for loop to concatenate 10 copies of the HTML code. Then use .after() to put this after the DIV.

$("#add_another_product_name").click(function() {
    var html = '';
    for (var i = 0; i < 10; i++) {
        html += 'html code that you want to repeat';
    }
    $("#add_remove_product_name").after(html);
}
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Hi, I tried your code but it doesn't really work. Maybe it's the part where I have to put in my html code I'm doing wrong? I do also have some other jquery on the site for the same tags which are doing some other things so maybe they're interfering with each other? – Casper S Andersen Apr 14 '15 at 21:00
  • Do these elements have IDs? If you just insert the same HTML repeatedly, you'll create duplicate IDs, which is not valid. Or if you're binding handlers to the items in the dynamic HTML, you need to use event delegation: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Barmar Apr 14 '15 at 21:07
  • There are a number of potential issues around this. But you didn't provide enough details in the question to be able to address them in an answer. Show the HTML you're trying to add, and how you're trying to use it. – Barmar Apr 14 '15 at 21:07
  • Hi Barmar, I'm out of time today but tomorrow I will post a more detailed description and some more codes regarding my post. Please stay tuned. Thank you – Casper S Andersen Apr 15 '15 at 21:28
1

You can use jQuery clone() however when cloning an element all the attributes will be the same. Fo example they will all have the same id attribute which will cause problems and it is not valid html

So in order to do the clone correctly you have fix the cloned element

DEMO: http://jsfiddle.net/rpyt445e/

  var $tpl = $('#product_name').clone();
  var num = 0

   $('#clone').click(function () {
        num++;
        var $cloned = $tpl.clone();
        $cloned.attr('id', $tpl.attr('id') + '_' + num);
        $(':not([id=""])', $cloned).each(function(){
            $(this).attr('id', $(this).attr('id') + '_'+num); 
        });
        $cloned.appendTo('#wrapper');
    });

HTML:

<div id="wrapper">
    <div id="product_name">
        <input id="skriv_produktnavn" placeholder="Skriv Produktnavn her" required />
        <button id="add_another_product_name">Tilføj endnu et produktnavn</button>
        <div id="add_remove_product_name">
            <input id="added_product_name" placeholder="Skriv Produktnavn her" required />
            <button id="remove_product_name">X</button>
        </div>
    </div>
</div>
<button id="clone">Clone</button>
Sam Battat
  • 5,725
  • 1
  • 20
  • 29
  • Hi Sam, thanks for your input I'll try it out tomorrow and then I will get back to you with my feedback. Thank you again for your effort. – Casper S Andersen Apr 15 '15 at 21:30
0

A technique for adding the additional elements without having to create ugly strings of html in the JavaScript is to start with one hidden set of the elements in the html. At page load time, you remove that set, but keep a reference to it. Then when you want to add a set to the page, you clone the set you removed. All of this is easier if you add a container div around the additional inputs.

You also need to make sure id attribute values are unique. In the case of the remove buttons, you can replace the id with a class. As for the input id values, if you really need them, you can add an index value to them.

Since the remove buttons are dynamically added, I suggest using event delegation when binding the click-handler.

HTML:

<div id="product_name">
    <input id="skriv_produktnavn" placeholder="Skriv Produktnavn her" required="required"/>
    <button id="add_another_product_name">Tilføj endnu et produktnavn</button>
    <div id="additional_product_names">
        <div class="add_remove_product_name" style="display: none;">
            <input id="added_product_name" placeholder="Skriv Produktnavn her" required="required"/>
            <button class="remove_product_name">X</button>
        </div>
    </div>
</div>

JavaScript:

$(function() {
    var MAX = 10;

    var $addBtn = $('#add_another_product_name'),
        $additionalContainer = $('#additional_product_names');
        $TEMPLATE = $additionalContainer.children(':first').remove();

    function update() {
        var $additonalDivs = $additionalContainer.children();

        // Enable/disable the add button.
        $addBtn.prop('disabled', $additonalDivs.length >= MAX);

        // Re-index the "id" attributes.
        $additonalDivs.find('input').attr('id', function(i) {
            return 'added_product_name[' + i + ']';
        });
    }

    $addBtn.click(function() {
        $TEMPLATE.clone().appendTo($additionalContainer).show();
        update();
    });

    $('#product_name').on('click', '.remove_product_name', function() {
        $(this).closest('.add_remove_product_name').remove();
        update();
    });
});

jsfiddle

John S
  • 21,212
  • 8
  • 46
  • 56