Das Klonen eines Formulars in jQuery und Erhöhung des Index

Question

Das scheint relativ einfach, ich bin nur auf jQuery Syntax stapfte.

Im Grunde möchte ich diese Form anzunehmen:

<div class="me_signup">
  <input type="text" name="referral[0][name]" id="referral_0_name">
  <br>
  <input type="text" name="referral[0][email]" id="referral_0_email">
</div>

Und duplizieren es mit einem Knopf und erhöht die variable Anzahl ..

$(".add_another_button").click(function(){
    ...
};

Answer 1

So etwas wie diese ?

$(".add_another_button").click(function() {
    var $newdiv = $(".me_signup:last").clone(true);
    $newdiv.find('input').each(function() {
        var $this = $(this);
        $this.attr('id', $this.attr('id').replace(/_(\d+)_/, function($0, $1) {
            return '_' + (+$1 + 1) + '_';
        }));
        $this.attr('name', $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) {
            return '[' + (+$1 + 1) + ']';
        }));
        $this.val('');
    });
    $newdiv.insertAfter('.me_signup:last');
});

Answer 2

können Sie setzen alle, die HTML in einer Variablen und die Verwendung .append () -Methode dieses Element zu einem bestimmten DOM hinzuzufügen. Und sollten Sie diese klonen, sollten Sie ändern „id“ auf „Klasse“, weil id auf jeder Seite muss eindeutig sein. etwas mehr über .append () in der offiziellen Dokumentation