使用 jQuery 发布子表单答案

【问题标题】：Posting a sub-form with jQuery使用 jQuery 发布子表单
【发布时间】：2010-07-27 03:50:13
【问题描述】：

首先我会说我是 jQuery 新手，但我真的很喜欢它。我也是stackoverflow的新手，真的很喜欢它！

问题： 我用 jQuery 创建了一个子表单，以便用户可以添加，然后从下拉列表中选择此信息（如果它尚不可用）。我无法使用 .ajax() 发布这些数据，因此用户可以继续在主表单上填写其他信息，而无需重新开始。

子表格：

   $(function() {
      $("#add").live('click', function(event) {
      $(this).addClass("selected").parent().append('<div class="messagepop"><p id="close"><img src="img/close.png"></p></img><form id="addgroup" method="POST" action="add_group.php"><p><label for="group">New Group Description:</label><input type="text" size="30" name="grouping" id="grouping" /></p><p><label for="asset_type">Asset Type:</label><select name="asset" id="asset" ><option>Building</option><option>Equipment</option></select></p><p><input type="submit" value="Add Group" name="group_submit" class="group_submit"/></form><div id="result"></div></div>');
      $(".messagepop").show()
      $("#group").focus();
      return false;
  });

  $("#close").live('click', function() {
   $(".messagepop").hide();
   $("#add").removeClass("selected");
   return false;
  });
 });

这是我试图处理它的地方：

$(function () {
$('#addgroup').submit(function() {
  $.ajax({
   type: $(this).attr('method'),
   url: $(this).attr('action'),
   data: $(this).serialize(),
   success: function(responseText) {
    $('#result').html(responseText);
    }
   });
    return false;
 });
});

我什至尝试创建一个简单的警报而不是处理信息，但这也不起作用。相反，表单会像往常一样汇总并刷新页面。谁能帮我理解我错过了什么或做错了什么？谢谢！

新尝试：

$("#add").live('click', function(event) {
   var form = $("<form>").html("<input type='submit' value='Submit'/>").submit(function(){
   $.post("add_group.php", {grouping: "Building, asset: "STUFF"});
   $(".newgroup").append(form);
   return false;
});

最终代码

$(function() {
    var id = 1
    $("#add").live('click', function(event){
        if($(".addgroup,").length == 0){
            $("#test").append('<div class="addgroup"><label for="newGroup">New Group:</label><input type="text" class="newgroup" id="' + ++id + '" /><input type="submit" value="Add Group" name="group_submit" class="group_submit"/></div>');
            $("#add").attr("src","img/add_close.png");
        }else{
            $("#add").attr("src","img/add.png");
            $(".addgroup").remove();}
        return false;
    });

});

$(function(){
    $(".group_submit").live('click',function(event){
        $.ajax({
            type: "POST",
            url: "add_group.php",
            data: {new_group: $(".newgroup").val(), asset: $("#group option:selected").text()},
            success: function(){}
        });
        $(".addgroup").remove();
        $('#subgroup').load('group.php', {'asset': $("#group option:selected").text()});
        return false;
    });
});

【问题讨论】：

以下解决方案有帮助吗？如果是这样，请将其标记为答案...否则，您走了多远？你有关于这个问题的更多信息吗？
我最接近的是您创建表单元素 jamie 的解决方案。但是，虽然这可能适用于警报消息，但我无法让它与 .post 一起使用。我编辑了我的帖子以反映最新的代码创建。
在您的“新尝试”中，您有一个额外的引用（在 STUFF 之前的那个）：“Building, assets: "STUFF"。不确定这是否在您的实际代码中。
谢谢enobrev。代码终于起作用了。它是两种答案的混合体，但主要来自杰米的。再次感谢大家！

标签： php jquery forms

【解决方案1】：

如果表单正常提交和刷新，则 jquery 不会启动（刷新意味着它正在正常发布表单）。

我出于某种原因（也许其他人没有）发现 $(document).ready(function() { 比 $(function() { ...

此外，您要添加的组应该有一个明确的 ID：在#add 点击时，计数一个计数器（form++）并将其添加到 id（#addGroup_+form），然后直接在添加它的函数中定位它：

 $("#group").focus();
 $("#addGroup_"+form).submit(function() {

【讨论】：

我在OP中发现的问题是form是动态创建的...submit的正常绑定不起作用...
var form = $("
").html("").submit(function() { alert("SUBMIT "); })); $("div").append(form);通过创建一个表单元素，而不是将表单代码转储到页面上，它似乎可以工作
在这种情况下，您还将动态添加 submit 处理程序... ;)

【解决方案2】：

尝试使用.live()

$(function () {
 $('#addgroup').live('submit',function() {
  $.ajax({
   type: $(this).attr('method'),
   url: $(this).attr('action'),
   data: $(this).serialize(),
   success: function(responseText) {
    $('#result').html(responseText);
    }
   });
    return false;
 });
});

并确保addgroup 没有重复的id...如果必须重复，您可以将其用作class...

【讨论】：