AjaxのjQueryのマルチステップフォームの代わりにdiv要素をリロード、ちょうど新しいコンテンツを追加

Question

私はそれが1つのページにこのマルチステップフォームを行うことが可能ですかしら、その内容をdiv要素をリロードしないPHPファイルから受け取ったが、右下のそれを追加します..

にこれは私がこれまで持っているものです：

$(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; 

}); 

また、私は、それ自身のdiv内のすべてのコンテンツを置くためのIDの増分で、別のdivを使用しようとしました。問題は、私は「第二」のステップを取得していますので、全体formularを通じてつもりはない、です。

は、私は誰がここで私を助けることができます。..最初のページのフォームがまだあると、すべてが同じIDを持っているからだと推測してください？ documentの要素の

Answer 1

id一意である必要があります。 htmlソースで重複idを変更するか、使用して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); 
     }); 
     }); 
}