Duplicating DIVs and nested elements

Hi Experts,

When the user cclicks on a button, using jQuery, how can I duplicate an entire DIV with its elements?

For some elements, at design time I want to have
<input type="file" id="fie[0]" name="file[0]">

Open in new window


...and when duplicating, I would need the [index++] updated, so that it would be an nested array in my $_POST

Thank you
APD TorontoSoftware DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
Just use : <input type="file" name="file[]">
so you can read every file using $_FILE with PHP, check this comment :

else, the following change the name attribute. use same logic for ID attribute if you really need it... Only the name is used to POST data to the server....
jQuery(function($) {
      $("#your_button").click(function(evt) {
            evt.preventDefault(); // prevent any submitting of the form/page
            var clone = $("#divToDuplicate").clone();
            index++; // somewhere, I'm assuming you set index a zero or something else...
            $("[name]", clone).each(function() { // for each element inside the clone with a name attribute
                 var previousName = $(this).attr("name");
                 var newName = previousName.replace(/\[\d*\]/g, "[" + index + "]");
                 $(this).attr("name", newName);
            });
            clone.appendTo(whereYouWantToPutIt);
      });
});

Open in new window

0
Julian HansenCommented:
First question - do you need the input id and if so what for?
Second question - why even use indexes for the name just do this
<input type="file" name="file[]">

Open in new window

This will result in an array of files being submitted to the server which PHP will understand and return as an array for you.

Then you can just clone the div on a button click
Example:
HTML
  <form action="reflect.php" method="post" enctype="multipart/form-data">
    <div class="div-container">
      <div id="div-to-clone">
        <p>Some content to make this look intersting</p>
        <input type="file" name="file[]">
      </div>
    </div>
    <button id="add-div" class="btn btn-success">Add</button>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

Open in new window

jQuery
<script>
$(function() {
  $('#add-div').click(function(e) {
    e.preventDefault();
    $('.div-container').append($('#div-to-clone').clone());
  });
});
</script>

Open in new window

Working sample here
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.