javascript - 通过 AJAX 提交表单，克隆行，单输入

Question

我仍在学习这种方法的多个方面，但基本上我有一个具有“添加更多”功能的表单，它基本上克隆了预览行并允许您添加多行的数据。我有一个单一的输入来提交这些，并利用 AJAX 向论坛上的特定主题提交帖子，但是当表单本身作为帖子提交时，只插入最后一行数据。我知道#final需要编辑值才能以某种方式完成此操作，但我不确定需要更改哪些内容才能实现此目的。

这就是我正在使用的：

$(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() {

$("#final").val("[dohtml]<div class='claim-contain'><h1><b>claims submission</b></h1>[CODE]<tr class='" + $("#group-dropdown :selected").text() + "'><td>" + $("#name-fillin").val() + "</td><td>" + $("#group-fillin").val() + "</td><td>" + $("#pos-fillin").val() + "</td><td>" + $("#author-fillin").val() + "</td></tr>[/CODE]</div>[/dohtml]");

               $.ajax({
                       type: "POST",
                       url: "index.php?",
                       data: $("#app_form5").serialize();,
                       success: function(data) {
                       location.reload();
                       }
               });
               return false;
       });
});

和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 id="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" id="name-fillin" value="" placeholder="@[first last]" />
</label>

<label><b>group name</b> 
<input type="text" id="group-fillin" value="" placeholder="group name" />
</label>

<label><b>position</b> 
<input type="text" id="pos-fillin" value="" placeholder="group name" />
</label>

<label><b>author name</b> 
<input type="text" id="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>

标签： javascripthtmljqueryajax