Question

所以我使用jquery / ajax加载页面的一部分。

在用户看到的页面上，有一个＆＃34;菜单＆＃34;他们在哪里选择他们想要看到的注册表单的日期。所有表单都托管在另一个页面上，每个表单都在div id内，并且具有相应的表单日期。当用户点击菜单上的项目时，会有一个ajax调用，在用户的页面上显示正确的表单，并通过它的父div和{{ 1}}。

我用于注册表单的插件（它是一个Wordpress站点）在您单击“注册”时会重新加载页面，然后将您带到要填写的表单。我有它，以便用户的页面不会重新加载，但通过ajax显示表单。这一切都很有效 - 现在唯一的问题是当用户点击提交表单时。这应该是一个普通的表单提交不使用ajax，因为我不知道如何修改插件代码来使用它。出于某种原因，虽然用户的页面确实重新加载，但表单实际上从未提交过。

*注意：我目前正在为每个日期使用相同的注册表单，但一旦它正常运行，它将是每个日期的不同注册表单。这不应该影响任何功能。

链接到页面用户看到：summitsharks.net/volunteer-signup-page 页面表单的链接托管在：summitsharks.net/formhost

jquery / ajax代码：

id

（我认为）处理表单提交的文件的PHP代码：

http://pastebin.com/PeXB4Afi

我正在寻找成功签约用户的解决方案。如果有人知道如何更改插件代码以接受ajax提交，或正常提交实际有效，那么任何一个对我都完全没问题。

非常感谢您的回顾并提前感谢您的帮助！

Answer 1

预计表单会从其原始网址发布，包括HTTP GET参数?sheet_id=1&task_id=1&date=2016-06-30。更新表单的action属性以使其发布到正确的网址可以通过更改

来完成

$('#formloader').load(ahref2 + ' ' + ahref1);

到

$('#formloader').load(ahref2 + ' ' + ahref1, function() {
  $('#formloader form').attr("action", ahref2 + ' ' + ahref1 );
});

但是，使用AJAX发布表单，可以跳过：

var ahref = $(this).attr('href') + ' ' + ahref1;
$('#formloader').load( ahref, function() {
  $("#formloader form").on('submit', function(e) {
    e.preventDefault();
    $.ajax( {
      url: ahref,
      type: 'POST',
      data: $.param( formdata( $(this) ) ),
      success:function(data,status,jqXHR) { $("#formloader").html( data ) }
    });
    return false;
  })
})

实用程序方法formdata（请参阅下面的代码段）将jQuery的serializeArray()结果转换为正确的哈希值。

在下面的工作示例中，我已将表单点击处理程序的安装移动到.load完成处理程序中，而不是依赖于jQuery在注入表单后触发第二个文档就绪事件。

＆＃13;

;jQuery(function($) {

  $('.entry-content li a').off('click').on('click', function(e) {
    var ahref1 = $(this).attr('href');
    $('#formloader').load( "/formhost " + ahref1, function() {

      $('.entry-content #formloader a').off('click').on('click', function(e) {
        e.preventDefault();
        var ahref = $(this).attr('href') + ' ' + ahref1;
        $('#formloader').load( ahref, function() {
          $("#formloader form").on('submit', function(e) {
            e.preventDefault();
            $.ajax( {
              url: ahref,
              type: 'POST',
              data: $.param( formdata( $(this) ) ),
              success:function(data,status,jqXHR) { $("#formloader").html( data ) }
            });
            return false;
          })
        });
        return false;
      });

    });
    return false;
  });

});

function formdata(form) {
  var data = {};
  for ( var i in d = form.serializeArray() )
    data[d[i].name] = d[i].value;
  return data;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

更新：这是一个可以粘贴在浏览器的Javascript控制台中的代码段：

＆＃13;

$ = jQuery;
$('.menu-volunteermenu-container li a').off('click').on('click', function (e) {
  loadFormSelector($(this).attr('href'));
  return false;
});

$('#formloader').on('load', function(){console.log("FORMLOADER UPDATD")});

function loadFormSelector(ahref1)
{
  console.log("Loading form selector");
  $('#formloader').load('/formhost ' + ahref1, function ()
  {
    console.log('form selector loaded');
    $('.entry-content #formloader a').off('click').on('click', function (e)
    {
      e.preventDefault();
      loadForm(ahref1, $(this).attr('href') );
      return false;
    });
  });
}
function loadForm(ahref1, ahref2)
{
  var ahref = ahref2 + ' ' + ahref1;
  console.log('Loading form', ahref);
  $('#formloader').load(ahref, function () {
    console.log('form loaded', arguments);
    $('#formloader form').on('submit', function (e) {
      e.preventDefault();
      $.ajax({
        url: ahref,
        type: 'POST',
        data: $.param(formdata($(this))),
        success: function (data, status, jqXHR) {
          $('#formloader').html( $(data).find( ahref1 ) )
        }
      });
      return false;
    });
    $('#formloader a').on('click', function () {
      loadFormSelector(ahref1);
    });
    return false;
  });
}
function formdata(form) {
  var data = {
  };
  for (var i in d = form.serializeArray())
  data[d[i].name] = d[i].value;
  return data;
}

＆＃13;

重构是为了更清楚地展示2层方法。

加载ajax后，HTML表单提交无法正常工作

1 个答案: