javascript - Saving multiple rows with jQuery -
i have form 2 fields add row
button. when button clicked clones row , adds row consisting of 2 form fields. how save these newly added fields in ajax post? right now, ever saves last row in form.
<form action="." method="post"> <table class="table table-condensed" id="pa"> <thead> <tr> <th class="col-xs-2">description</th> <th class="col-xs-2">expected %</th> <th></th> </tr> </thead> <tbody> <tr> <td> <div class="form-group"> <input class="text-box single-line" data-val="true" data-val-required="the description field required." id="description" name="description" value="" type="text"> </div> </td> <td> <div class="form-group"> <div class="input-group"> <input class="text-box single-line" data-val="true" data-val-number="the field expected must number." id="expected" name="expected" value="100" type="number"> </div> </div> </td> <td class="vert-align"> <a class="btn btn-danger btn-xs remove-row-pa">x</a> </td> </tr> </tbody> </table> <div class="pull-right"> <p> <a href="#" id="add-pa-row" class="btn btn-success btn-xs"> <i class="fa fa-plus-circle"></i> add row </a> </p> </div> <div class="form-group"> <p> <input value="save" class="btn btn-success" type="submit"> </p> </div> </form>
function qs2dict(qs) { var pairs = qs.split('&'); var dict = {}; pairs.foreach(function (pair) { var kv = pair.split('='); dict[kv[0]] = decodeuricomponent(kv[1].replace(/\+/g, "%20")); }); return dict; } // add row $("#add-row").click(function () { $('#pa tbody>tr:last').clone(true).insertafter('#pa tbody>tr:last'); $('#pa tbody>tr:last #description').val(''); $('#pa tbody>tr:last #expected').val(''); return false; }); $('#modal').click(function (e) { e.preventdefault(); var url = $(this).data('url'); var data = $('form').serialize(); var dict = qs2dict(data); $.ajax({ type: "post", url: url, data: { "description": dict.description, "effectivedate": dict.effectivedate, "expected": dict.expected, }, success: function (result) {}, }); });
change name attribute, since defines/enumerates fields save. if equal, if clone, last 1 taken.
or use arrays i.e. name="expected[]"
edit: more specifically: assume "lost" due above reason during $('form').serialize();
Comments
Post a Comment