Question

I have this problem regarding about when I pushed the button it adds another element plus the name of the element also increments well in array, kind of hard to explain but I’ll provide some screenshots.

I searched through this site saw a bunch of solutions and whatnots, unfortunately I can’t seem to apply it on my problem.

Here are the screenshots of what is my desire output.

If I press the Add button, another fieldset would show up above it

The result would be

So if I press the “Add” button again, it would show up another never ending cycle of fieldset with corresponding incremented input type names.

Code:

Layout of the Fielset

<fieldset style="border:1px solid #DSDCDF; padding:10px; margin-bottom:10px;" id="fieldset_fblikeus">
    <div class="condition">
        <div class="clear"></div>
        <div>Label</div>
        <div><input class="gate-condition" name="label_" size="30" type="text" value="<?php echo $fb_page[0]; ?>"></div>
        <div class="clear" style="padding-top:5px;"></div>
        <div>URL to Like</div>
        <div><input class="gate-condition" name="url_" size="30" type="text" value="<?php echo $fb_page[1]; ?>"></div>
        <div class="clear" style="padding-top:5px;"></div>
    </div>
</fieldset>

Code to initiate the function

<a onclick="fb_likeus_add();">Add</a>

function fb_likeus_add() {
    var fieldset_data = '<fieldset style="border:1px solid #DSDCDF; padding:10px; margin-bottom:10px;"><div class="condition"><div class="clear"></div><div>Label</div><div><input class="gate-condition" name="label_" size="30" type="text" value="<?php echo $fb_page[0]; ?>"></div><div class="clear" style="padding-top:5px;"></div><div>URL to Like</div><div><input class="gate-condition" name="url_" size="30" type="text" value="<?php echo $fb_page[1]; ?>"></div><div class="clear" style="padding-top:5px;"></div></div></fieldset>';

    $("#fb_likeus_td").prepend(fieldset_data);
}

The main problem is on when I press the add button how to increment the names of an input element while prepending the data to the div, I have no idea on where/what to start with. But I’ve thought of something what it should look like.

Array = [

div1 ['name_1', 'url_1'],

div2 ['name_2', 'url_2'],

div3 ['name_3', 'url_3'],

div4 ['name_4', 'url_4'],

div5 ['name_5', 'url_5']

and so on, it increments when you click the add button.

];

It’s kind of hard to explain, still hope you guys understand my problem.
Would be glad if you guys help me, it means a lot. Thanks in advance.

Answer 1

One solution to this is to have a hidden ‘template’ div somewhere on the page that contains the markup that you want to insert. In this specific case the markup is relatively simple, so you could get away with just storing the template markup as a JavaScript string, but that’s generally less maintainable over time than using a hidden div on the page.

In any case, once you have your template markup, you just need to add a small amount of JavaScript code to keep track of how many times you’ve added a new fieldset to the page. With that, you can update your fb_likeus_add() function to perform a simple string-replacement on the template markup, inserting the correct sequence numbers before you prepend it to the div.

That may sound a bit involved but it really takes very little code:

//initialize this when the page loads
var numAdded = 0;

function fb_likeus_add() {
    //increment the counter
    numAdded++;  

    //grab the template html
    var templateHtml = $("#template").html();  

    //write the new count into the template html
    templateHtml = templateHtml.replace(/label_/g, "label_" + numAdded)
                               .replace(/url_/g, "url_" + numAdded);  

    //prepend the updated HTML to the document  
    $("#container").prepend(templateHtml);  
};

Here’s an example: http://jsfiddle.net/Dw8e7/1/