0

我正在尝试通过 Ajax 发送表单，但在这种情况下找出正确的语法时遇到了一些问题。

我在页面上有一个 div 容器，该容器通过 Ajax 请求向其中添加了表单对象，然后在将其附加到页面之前发生了一些模板化。我现在正在使用这段代码：

$('.summary-host').on('click', '.btnUpdate', function (event) {
    var form = this.form;
    $(this.form).ajaxForm({
        type: 'post',
        success: function (data) {
            $(".printArea").empty().append(data).css('visibility', 'visible');
        }
    });
});

.summary-host是容器，我正在尝试连接.btnUpdate以发布表单。当我单击该按钮时，它会命中该var form = this.form;行，但该表单从未提交过，并且 Firebug 控制台中没有任何错误可以为我提供任何关于这里有什么问题的线索。

如何让这些表格正确提交？

我正在使用该.on()方法，因为我理解这将确保 jQuery 附加到添加到容器中的任何新对象以及现有表单对象。

4

3 回答 3

1

在提交表单时使用 ajax，也许这可能会对您有所帮助：

$.post(page_url,$(my_form).serialize(),
   function (data) {
      // do something here
});
  1. page_url - 您将提交数据的 url
  2. $(my_form) - 你的表单标签的 id <form id="submit_form"></form>就像$("#submit_form")
  3. .serialize() - 一个以标准 URL 编码符号创建字符串的 jQuery 函数，此链接中的更多信息http://api.jquery.com/serialize/

你可以这样做：

$('.summary-host').on('click', '.btnUpdate', function (event) {

            $.post(page_url,$(my_form).serialize(),
                  function (data) {
                    // do something here
            });   
});
于 2013-08-21T09:08:08.720 回答
1

我认为您正在使用“jQuery 表单插件”

首先，您需要在准备好的文档中定义“ajaxForm”。然后使用 Jquery submit() 方法定义“.btnUdate”点击事件并在该提交表单中

而不是 this.form 尝试使用 Form id (Give id to Form)

$(document).ready(function() { 
        $('#formId').ajaxForm({
             type: 'post',
             success: function (data) {
             $(".printArea").empty().append(data).css('visibility', 'visible');
         }
       }); 

       $('.summary-host').on('click', '.btnUpdate', function (event) {
             $('#formId').submit();
       })
    });

如果你不知道 formId 那么你可以使用 jquery parent() 方法

$(document).ready(function() { 

    $($('.btnUpdate').parent()).ajaxForm({
        type: 'post',
        success: function (data) {
            $(".printArea").empty().append(data).css('visibility', 'visible');
        }
    });

    $('.summary-host').on('click', '.btnUpdate', function (event) {
         $('.btnUpdate').parent().submit();
    });
});

让我知道这是否有帮助

于 2013-08-21T09:17:59.780 回答
0

您需要使用提交事件，它提交表单。click 事件只是捕获对 .btnUpdate 的点击，但不对表单做任何事情。

$('.summary-host').on('submit', '.btnUpdate', function (event) {
于 2013-08-21T08:52:40.317 回答