Ajax jQuery Multiple Step Form而不是重新加载div,只需添加新内容

时间:2016-07-03 08:37:35

标签: javascript jquery html ajax submit

我想知道是否可以在一个页面上执行此多步骤表单,所以不要使用从php文件接收的内容重新加载div,而是将其附加到下面..

这是我到目前为止所得到的:

$(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中。问题是,我只得到第二个"步骤,所以它没有通过整个公式。

我猜是因为第一页的形式仍然存在且所有人都有相同的ID。有人可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

id

document元素应该是唯一的。更改id来源的重复html或使用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);
       });
      });
}