AJAX提交带动态克隆行的表单仅最后一行数据插入如何解决

问题根源 #

• 原HTML中所有表单控件用了唯一ID属性，克隆多行后ID重复，使用ID选择器$("#xxx")只能获取到匹配的第一个/最后一个元素的值
• 提交逻辑中仅拼接了单行数据的HTML，没有遍历所有行生成多组<tr>内容
• 原AJAX代码中$("#app_form5").serialize();多了多余分号，存在语法错误

修复步骤 #

修改完成后提交时会自动收集所有新增行的内容，全部拼接后插入到帖子中。

1. 修改HTML代码，把ID替换为Class #

把原有表单行内的ID属性全部改为Class，避免重复ID冲突，修改后的HTML如下：

<form id="app_form5" action="index.php?" method="post" name="REPLIER">
<input type="hidden" name="act" value="Post" />
<input type="hidden" name="CODE" value="03" />
<input type="hidden" name="OID"  value="" />
<script type="text/javascript">document.write("<input type='hidden' name='auth_key' value='" + auth_key + "' />");</script>
<input type="hidden" name="f" value="121" />
<input type="hidden" name="t" value="50" />
<div class="claims-hold">
<div class="form-claim">
<div class="char"><label><b>member group</b>
       <select class="group-dropdown">
               <option value="drop1">aloe</option>
               <option value="drop2">anthurium</option>
               <option value="drop3">bamboo</option>
               <option value="drop4">bonsai</option>
               <option value="drop5">calathea</option>
               <option value="drop6">chamadorea</option>
               <option value="drop7">fern</option>
               <option value="drop8">ivy</option>
               <option value="drop8">hibiscus</option>
               <option value="drop8">hydrangea</option>
               <option value="drop9">monstera</option>
               <option value="drop10">philodendron</option>
               <option value="drop11">saguaro</option>
               <option value="drop12">sansevieria</option>
               <option value="drop13">xoconostle</option>
               <option value="drop14">yucca</option>
       </select>
</label>
<label><b>character name</b> 
<input type="text" class="name-fillin" value="" placeholder="@[first last]" />
</label>
<label><b>group name</b> 
<input type="text" class="group-fillin" value="" placeholder="group name" />
</label>
<label><b>position</b> 
<input type="text" class="pos-fillin" value="" placeholder="group name" />
</label>
<label><b>author name</b> 
<input type="text" class="author-fillin" value="" placeholder="alias name" />
</label>
</div> <button type="button" class="add-row">add more</button>
<input type="hidden" id="final" name="Post" value="" />
<input type="submit" value="Submit Post" tabindex="4" accesskey="s" class="forminput" name="submit" />
</div>
</div>
</form>

2. 修改jQuery提交逻辑，遍历所有行拼接内容 #

修改提交事件中的取值逻辑，循环遍历所有.char行生成多组<tr>，再组装到#final的取值中，同时修复语法错误，修改后的jQuery代码如下：

$(document).ready( function() {
    $(".add-row").click(function(){
        var $clone = $(".char").first().clone().find("input").val("").end().find("select").val("").end();
        $clone.append("<button type='button' class='remove-row'>-</button>");
        $clone.insertBefore(".add-row");
    });
  
    $("#app_form5").on("click", ".remove-row", function(){
        $(this).parent().remove();
    });
       
    $("#app_form5").submit( function() {
        // 先拼接固定的头部内容
        var finalContent = "[dohtml]<div class='claim-contain'><h1><b>claims submission</b></h1>[CODE]";
        // 遍历所有行拼接tr
        $(".char").each(function(){
            var group = $(this).find(".group-dropdown :selected").text();
            var name = $(this).find(".name-fillin").val();
            var groupName = $(this).find(".group-fillin").val();
            var pos = $(this).find(".pos-fillin").val();
            var author = $(this).find(".author-fillin").val();
            finalContent += "<tr class='" + group + "'><td>" + name + "</td><td>" + groupName + "</td><td>" + pos + "</td><td>" + author + "</td></tr>";
        });
        // 拼接尾部内容
        finalContent += "[/CODE]</div>[/dohtml]";
        $("#final").val(finalContent);

        $.ajax({
            type: "POST",
            url: "index.php?",
            data: $("#app_form5").serialize(), // 删掉多余分号
            success: function(data) {
                location.reload();
            }
        });
        return false;
    });
});

内容的提问来源于stack exchange，提问作者livwrite