PHP-Formular klonen und an div anhängen

Question

Ich versuche, ein langes Formular (von externer Seite) an ein dynamisch erstelltes Div mit jQuery anzuhängen.

So Far habe ich dies als jQuery:

<script> 
    $('.add-player').click(function (e) { 
     e.preventDefault(); 
     var id = $("#menuPlayers.nav-tabs li[role='presentation']").length+1; with role = presentation 
     var tabId = 'player_' + id; 
     $(this).closest('li').before('<li role="presentation"><a href="#player_' + id + '" style="padding-top: 4px; padding-bottom: 4px;">' + id + '</a></li>'); 
     $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="' + tabId + '">' + $("#cloneThisDiv").clone().appendTo("#" + tabId) + '</div>'); 
     $('#menuPlayers.nav-tabs li:nth(' + id + ') a').click(); 
    }); 
</script> 

Und als HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<legend> 
    <ul class="nav nav-tabs" role="tablist" id="menuPlayers"> 
    <li>Insert Players &nbsp;&nbsp;</li> 
    <li role="presentation" class="active"><a href="#player_1" aria-controls="player_1" role="tab" data-toggle="tab">1</a></li> 
    <li role="presentation"><a href="#player_2" aria-controls="player_2" role="tab" data-toggle="tab">2</a></li> 
    <li role="presentation" ><a href="#player_3" aria-controls="player_3" role="tab" data-toggle="tab>3</a></li> 
    <li><a href="#" class="add-player"> <b> + </b> </a></li> 
    </ul> 
</legend> 

<div class="tab-content"> 

<div role="tabpanel" class="tab-pane" id="player_1"> 
    ... PHP LONG FORM that i want to clone to the new div created with jQuery... 
</div> 

<div role="tabpanel" class="tab-pane" id="player_2"> 
Tab2 
</div> 

<div role="tabpanel" class="tab-pane" id="player_3"> 
Tab 3 
</div> 

</div> 

Aber ich kann nicht erreichen, was ich suche ... diese Linie verwenden $("#cloneThisDiv").clone().appendTo("#" + tabId) es gibt [object Object] zurück, wenn eine neue Registerkarte erstellt wird.
Gibt es eine andere Möglichkeit, ich kann mein Formular klonen, jedes Mal, wenn Benutzer einen neuen Player hinzufügen möchten, ohne den gesamten Code zu verwenden?

Answer 1

Ich glaube, Sie nur .html() statt mit .clone().appendTo(

$('.add-player').click(function (e) { 
 
    e.preventDefault(); 
 
    var id = $("#menuPlayers.nav-tabs li[role='presentation']").length+1; //with role = presentation 
 
    var tabId = 'player_' + id; 
 
    $(this).closest('li').before('<li role="presentation"><a href="#player_' + id + '" style="padding-top: 4px; padding-bottom: 4px;">' + id + '</a></li>'); 
 
    $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="' + tabId + '">' + $("#player_1").html() + '</div>'); 
 
    $('#'+tabId).find('.form').find('h3').text(tabId); 
 
    $('#menuPlayers.nav-tabs li:eq(' + id + ') a').click(); 
 
}); 
 
$('#menuPlayers').on('click' , 'li a:not(.add-player)',function(){ 
 
    $('.tab-pane').hide(); 
 
    $($(this).attr('href')).show(); 
 
}).find('a[href="#player_1"]').click();

.form{ 
 
    background : #005eff; 
 
    padding : 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<legend> 
 
    <ul class="nav nav-tabs" role="tablist" id="menuPlayers"> 
 
    <li>Insert Players &nbsp;&nbsp;</li> 
 
    <li role="presentation" class="active"><a href="#player_1" aria-controls="player_1" role="tab" data-toggle="tab">1</a></li> 
 
    <li role="presentation"><a href="#player_2" aria-controls="player_2" role="tab" data-toggle="tab">2</a></li> 
 
    <li role="presentation" ><a href="#player_3" aria-controls="player_3" role="tab" data-toggle="tab">3</a></li> 
 
    <li><a href="#" class="add-player"> <b> + </b> </a></li> 
 
    </ul> 
 
</legend> 
 

 
<div class="tab-content"> 
 

 
    <div role="tabpanel" class="tab-pane" id="player_1"> 
 
     <form class="form"> 
 
     <h3>Player_1</h3> 
 
     <input type="text" /><br/> 
 
     <input type="text" /><br/> 
 
     <textarea></textarea> 
 
     </form> 
 
    </div> 
 

 
    <div role="tabpanel" class="tab-pane" id="player_2"> 
 
    Tab2 
 
    </div> 
 

 
    <div role="tabpanel" class="tab-pane" id="player_3"> 
 
    Tab 3 
 
    </div> 
 
</div>

Answer 2

haben Sie so versucht:

var form = $("#cloneThisDiv").clone(); 
$("#"+tabId).append(form); 

Answer 3

Die appendTo Methode gibt ein domNode so können Sie es nicht innerhalb der append Methode als Zeichenkette verwenden.

Versuchen Sie diesen Code:

<script> 
$('.add-player').click(function (e) { 
    e.preventDefault(); 
    var id = $("#menuPlayers.nav-tabs li[role='presentation']").length+1; with role = presentation 
    var tabId = 'player_' + id; 
    $(this).closest('li').before('<li role="presentation"><a href="#player_' + id + '" style="padding-top: 4px; padding-bottom: 4px;">' + id + '</a></li>'); 
    var newPlayerTab = $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="' + tabId + '"></div>'); 
    $("#cloneThisDiv").clone().appendTo($(newPlayerTab)); 

    $('#menuPlayers.nav-tabs li:nth(' + id + ') a').click(); 
});