Clausmon Clausmon - 1 year ago 63
jQuery Question

JQuery Clone div, search for specific id's and increment them

I'm trying to clone a div inside a form with several inputs in it.

Heres my html:

<div>
<input type="hidden" name="sf_action" value="INSERT" />
<input type="text" name="sf_anzahl[2]" value="" placeholder="Anz." class="w50x TxtCenter" />
<input type="text" name="sf_hoehe[2]" value="" placeholder="Höhe" class="w100x BorderLeft TxtCenter" />
<input type="text" name="sf_breite[2]" value="" placeholder="Breite" class="w100x TxtCenter BorderLeft" />
<select name="sf_art[2]" class="w150x BorderLeft">
<option value="0">Automatiktür</option>
<option value="1">Bürofenster</option>
<option value="2">Shopfenster</option>
<option value="3">Oberlichter</option>
</select>&emsp;
<input type="checkbox" name="sf_rsi[2]" value="1" /> R-SI&emsp;
<input type="checkbox" name="sf_rssf[2]" value="1" /> R-SSF&emsp;
<input type="checkbox" name="sf_rspf[2]" value="1" /> R-SPF&emsp;
<input type="checkbox" name="sf_ssf[2]" value="1" /> SSF&emsp;
<input type="checkbox" name="sf_upm[2]" value="1" /> UPM&emsp;
<input type="checkbox" name="sf_ebm[2]" value="1" /> EBM&emsp;
</div>
<input type="button" class="add1" value="+" />


and my jquery:

$(".add1").on("click", function()
{
var eingabe = $(this).prev("div").clone();
eingabe.find("input[type='text']").val("");
eingabe.find("input[type='checkbox']").prop("checked", false);
var idar = $("input:nth-child(2n)", eingabe).attr("name").match(/\[(.*)\]/);
var ausgabe = eingabe.prop('outerHTML');
var id = parseInt(idar[1]);
var ausgabeX = $(ausgabe).text().replace(/\[(.*)\]/, ++id);
$(ausgabeX).insertBefore(this);
});


On "click" I want to clone the whole div and add it (before the button, after the last div).

The cloning itself just worked fine, but now I want to get the id inbetween the brackets [], increment it and replace it in the new div in all name attributes.

I can get the id and increment it, but can't figure out how to replace it in the new inputs.

I already get some divs from the database, so the id is not always [0], for example [1]-[4] can already exist. Especially for this case i need to increment the number in the brackets. Empty brackets won't work.

Answer Source

In order to select all elements having as attribute name a value like [number] you can use:

eingabe.find('[name*="["]')

and in order to increment this number by one you can:

eingabe.find('[name*="["]').attr('name', function (index, attr) {
    return attr.replace(/^(.*\[)(\d)(\])$/, function () {
        return arguments[1] + (parseInt(arguments[2]) + 1) + arguments[3];
    });
});

For details see:

The snippet:

$(".add1").on("click", function (e) {
  var eingabe = $(this).prev("div").clone();
  eingabe.find("input[type='text']").val("");
  eingabe.find("input[type='checkbox']").prop("checked", false);
  eingabe.find('[name*="["]').attr('name', function (index, attr) {
    return attr.replace(/^(.*\[)(\d)(\])$/, function () {
      return arguments[1] + (parseInt(arguments[2]) + 1) + arguments[3];
    });
  });
  $(eingabe).insertBefore(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div>
    <input type="hidden" name="sf_action" value="INSERT"/>
    <input type="text" name="sf_anzahl[0]" value="" placeholder="Anz." class="w50x TxtCenter"/>
    <input type="text" name="sf_hoehe[0]" value="" placeholder="Höhe" class="w100x BorderLeft TxtCenter"/>
    <input type="text" name="sf_breite[0]" value="" placeholder="Breite" class="w100x TxtCenter BorderLeft"/>
    <select name="sf_art[0]" class="w150x BorderLeft">
        <option value="0">Automatiktür</option>
        <option value="1">Bürofenster</option>
        <option value="2">Shopfenster</option>
        <option value="3">Oberlichter</option>
    </select>&emsp;
    <input type="checkbox" name="sf_rsi[0]" value="1"/> R-SI&emsp;
    <input type="checkbox" name="sf_rssf[0]" value="1"/> R-SSF&emsp;
    <input type="checkbox" name="sf_rspf[0]" value="1"/> R-SPF&emsp;
    <input type="checkbox" name="sf_ssf[0]" value="1"/> SSF&emsp;
    <input type="checkbox" name="sf_upm[0]" value="1"/> UPM&emsp;
    <input type="checkbox" name="sf_ebm[0]" value="1"/> EBM&emsp;
</div>
<input type="button" class="add1" value="+"/>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download