Ajax jQuery多步骤表单而不是重新加载div，只需添加新内容

Question

I wonder if it's possible to do this multistep form on one single page, so not reloading the div with the content received from the php file but append it right below..

This is what I've got so far:

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

});

Also I tried to use different divs, with incremental id's to put every content in it's own div. The Problem is, I'm only getting the "second" step, so it's not going through the whole formular.

I guess it's because the form of the first page is still there and all have the same id.. Can anyone help me out here please?

Answer 1

id of element in document should be unique. Change the duplicate id at html source or using 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);
       });
      });
}