Submitting form via AJAX with cloned rows, single input

Question

I am still learning multiple facets of this method but essentially I have a form that has an 'add more' function which essentially clones the previews row and allows you to add multiple rows' worth of data. I have a single input to submit these and utilize AJAX to do submit a post to a specific topic on a forum, but when the form itself is submitted as a post, only the last row of data is inserted. I know that the #final value needs to be edited to accomplish this somehow, but I'm not sure what needs to be changed to achieve this end.

This is what I'm using:

$(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;
       });
});

And the 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>

As a side note - you'll likely get a better/faster response in future if you can *simplify* your problem - most of your HTML is not relevant to this particular problem and could be removed. See how to create a [minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve). — Don't Panic, Sep 03 '21 at 06:51
Does this answer your question? [jQuery ID selector works only for the first element](https://stackoverflow.com/questions/11114622/jquery-id-selector-works-only-for-the-first-element) — Don't Panic, Sep 03 '21 at 06:51
Correct on copy-paste bug, thanks for that catch! IRT the duplicate IDs, is there any way around that? The form itself is being used to dynamically auto-generate a post in a forum structure which is unfortunately pretty limited (in that I can't change how the post is submitted on my end) but I'm hoping to essentially allow someone to submit multiple rows of data in a single post rather than having to submit them individually. — livwrite, Sep 03 '21 at 06:53
The only issue with the approach is the IDs - If you can replace the `select` ID with a class, say (and update any JS use of that obviously) that would solve it, but I am guessing you can't do that? You could maybe dynamically remove the ID with JS, though this seems hacky and risky to me, not the best option. Eg `$clone.find('select').attr('id', '');`, or if you need an ID, maybe assign it a numbered, incrementing ID like `select-N` where you increment `N` each time for each new row. — Don't Panic, Sep 03 '21 at 07:05

Submitting form via AJAX with cloned rows, single input

0 Answers0