Ajax jQuery Multiple Step Formular statt div neu zu laden, nur neuen Inhalt anhängen

Question

Ich frage mich, ob es möglich ist, diese mehrstufige Form auf einer einzigen Seite zu tun, also nicht das div mit dem Inhalt aus der PHP-Datei neu laden, sondern direkt darunter anhängen

..

Dies ist, was ich bisher habe:

$(document).on('submit', '#reg-form', function(){ 
var ln = $('#submit').val(); 
var id = $('#id').val(); 

var data = 'submit='+ln; 
    $.ajax({ 

    type: 'GET', 
    url : 'step.php', 
    dataType : 'html', 
    data : data, 
    success : function(data) 
     { 
     $('#reg-form').fadeOut(500).hide(function() 
     { 
     $('.result').fadeIn(500).show(function() 
     { 
     $('.result'+id).append(data); 
     }); 
     }); 

     } 

    }); 
     return false; 

}); 

auch habe ich versucht, verschiedene divs zu verwenden, mit inkremental-ids jeden Inhalt zu setzen in einem eigenen div. Das Problem ist, ich bekomme nur den "zweiten" Schritt, also geht es nicht durch das ganze Formular.

Ich denke, es ist, weil die Form der ersten Seite immer noch da ist und alle die gleiche ID haben. Kann mir bitte jemand hier helfen?

Answer 1

id Element in document sollte eindeutig sein. Ändern Sie die doppelte id bei html Quelle oder mit javascript

success : function(data) { 
     // change duplicate `reg-form` `id` to value 
     // corresponding to `.length` of elements having `id` 
     // containing `"reg-form"` 
     $(data).filter("#reg-form") 
     .attr("id", "reg-form-" + $("[id*='reg-form']").length); 
     $("#reg-form").fadeOut(500).hide(function() { 
     $(".result").fadeIn(500).show(function() { 
     $(".result" + id).append(data); 
     }); 
     }); 
}