如何在特定条件下序列化表单

Question

Taka看看这个小提琴here这是一个业务用户输入提供的服务的形式。我用ajax发送数据并通过序列化表单。

单击编辑并添加（加号）服务...在示例中添加一个输入，其中的名称属性值为此** form = form [5] ... **与此形式的名称形成对比其他输入中的属性值...只有新添加的服务具有这样的名称属性，其原因是仅序列化这些......而不是已经存在于DB中的其他服务/存储在数据库中。

现在我的问题：想象一下，用户去编辑已经注册的服务（或者他去编辑它们并添加一个新的）...在这种情况下，已经注册的服务不会被序列化，因为形式名称属性值有...（其原因如上所述）。

在这种情况下我该怎么办？有时候我必须只序列化一部分表格，有时候整个表格。如果所有输入都有表格[1 ....]的名称属性值，那么随着新添加的输入...已经注册的服务将再次序列化。谢谢收听。

代码如下（你也可以在小提琴中看到它）

    $('.editservices').click(function() {
    //console.log(('.wrapper_servp').length);
    originals_ser_input_lgth = $('.services').length;

    var originals = [];
    $('.show_price')
        // fetch only those sections that have a sub-element with the .value 
      class
        .filter((i, e) => $('.value', e).length === 1)
        // replace content in remaining elements
        .replaceWith(function(i) {
            var value = $('.value', this).data('value');
            var fieldsetCount = $('#serv').length;
            var index = fieldsetCount + i;
            return '<div class="show_price"><p id="show_p_msg">Price 
        visibility</p></div>' + '
                                    <div class="show_p_inpts">' +
                '<input class="price_show"' + (value == 1 ? "checked" : "") + ' 
         type="radio" name="form[' + index + '][price_show]" value="1">yes' +
                '<input class="price_show"' + (value == 0 ? "checked" : "") + ' 
          type="radio" name="form[' + index + '][price_show]" value="0">no' +
                '</div>'; // html to replace the original content with
        });
    $('#buttons').removeClass('prfbuttons');
    $('#saveserv').addClass('hideb');
    $('.actionsserv').removeClass('actionsserv');
    priceavail = $(".price_show:input").serializeArray();

     });
     $('#addser').on('click', function() {

     $('#saveserv').css('border','2px solid none');

    var serviceCount = $('input.services').length + 1;
    var serv_inputs = '<div class="wrapper_servp"><div class="serv_contain">

        <input placeholder="service" class="services text" name="form[' + serviceCount + '][service]" type="text" size="40"> 

        <input placeholder="price" class="price text" name="form[' + serviceCount + '][price]" type="text" size="3"></div>';
    var p_show = '<div class="show_p">' +
        '<p id="show_p_msg">Price visibility;</p>' +
        '<span id="err_show_p"></span><br>' +
        '</div>';
    var inputs = '<div class="show_p_inpts">' +
        '<input class="price_show" type="radio" name="form[' + serviceCount + '][price_show]" value="1">yes' +
        '<input class="price_show" type="radio" name="form[' + serviceCount + '][price_show]" value="0">no' +
        '</div></div>';
    $('.wrapper_servp').last().after(serv_inputs + p_show + inputs);
    $('#saveserv').removeClass('hideb');
    $('#remser').css('display', 'inline');

});

$('#cancelserv').click(function(e) {
    e.preventDefault();
    //var newinputs = $('.wrapper_servp').length;
    //var inp_remv = newinputs - originals_ser_input_lgth;
    //$('.wrapper_servp').slice(-inp_remv).remove()

    $('.show_p_inpts')
        .filter((i, e) => $('.price_show:checked', e).length === 1)
        .replaceWith(function(i) {
            var value = $('.price_show:checked').attr('value');
            return '<span data-value="' + value + '" class="value">' + (value == 1 ? "yes" : "no") + '</span>'
        });
});


var groupHasCheckedBox = function() {
        return $(this).find('input').filter(function() {
            return $(this).prop('checked');
        }).length === 0;
    },
    inputHasValue = function(index) {
        return $(this).val() === '';
    };

$('#saveserv').click(function(e) {

    e.preventDefault();
    //from here
    var $radioGroups = $('.show_p_inpts');

    $('.show_p_inpts').filter(groupHasCheckedBox).closest('div').addClass("error");

    $('.services, .price').filter(inputHasValue).addClass("error");
    //to here

    var $errorInputs = $('input.services').filter((i, e) => !e.value.trim());
    if ($errorInputs.length >= 1) {
        console.log($errorInputs);
        $('#err_message').html('you have to fill in the service'); return;

    }
    if ($('input.price').filter((i, e) => !e.value.trim()).length >= 1) {
        $('#err_message').html('you have to fill in the price'); return;

    }
});
   var IDs=new Array();
 $('body').on('click', '#remser', function(e){


  var inputval=$('.services:visible:last').val();

  if(inputval!=='')
  {r= confirm('Are you sure you want to delete this service?');}
  else
  {

       $('.wrapper_servp:visible:last').remove();

  }



  switch(r)
  {
   case true: 

   IDs.push($('.services:visible:last').data('service'));

   $('.wrapper_servp:visible:last').addClass('btypehide');
   if($('.serv_contain').length==1)$('#remser').css('display','none');
   $('#saveserv').removeClass('hideb').css('border','5px solid red');

              //originals.servrem=true;
   break;



    case false:var i;
    for(i=0;i<originals.ser_input_lgth;i++)
    { 
        $('input[name="service'+i+'"]').val(services[i].value);
         $('input[name="price'+i+'"]').val(prices[i].value);//εδω set value

     }


     $('.services').slice(originals.ser_input_lgth).remove();
     $('.price').slice(originals.ser_input_lgth).remove();

    $('.openservices').addClass('hide').find('.services,.price').prop('readonly', true);
     var text='<p class="show_price">Θες να φαίνεται η τιμή;<span data-value="'+ show_pr_val.value +'" class="value">' +(show_pr_val.value==1 ? 'yes':'no') + '</span></p>';

     $('.show_p_inpts').remove();
     $('.show_price').replaceWith(text);;
          break;

      }

});