Serialize Formular als JSON ohne leere Werte

Question

Ich habe ein HTML-Formular mit 3 Feldern. Ich möchte, dass sie als JSON-Objekt serialisiert werden (die bisher mit meinem getFormData($form) Methode funktioniert aber jetzt möchte ich in meiner Form alle Felder ohne Input/Wert auszuschließen

Diese serialisiert meine Form und speichert es als JSON-Objekt..:

function getFormData($form){ 
    var unindexed_array = $form.serializeArray(); 
    var indexed_array = {}; 

    $.map(unindexed_array, function(n, i){ 
     indexed_array[n['name']] = n['value']; 
    }); 

    return indexed_array; 
} 

Dies ist, wie ich versucht, Felder zu filtern, ohne Wert:

var form = $("#bulk-edit-fut-account-form :input[value!='']"); 
console.log(JSON.stringify(form)); 
var formData = getFormData(form); 

Meine HTML-Formular:

<form id="bulk-edit-fut-account-form" class="form-horizontal" novalidate="novalidate"><div class="form-group"><label class="col-sm-3 control-label">Id<span class="asterisk">*</span></label><div class="col-sm-9"><input id="bulkAccountIds" type="text" required="" readonly="" value="118 119 " data-id="[{&quot;Id&quot;:118},{&quot;Id&quot;:119}]" class="form-control valid" aria-required="true"></div></div><div class="form-group"><label class="col-sm-3 control-label">Max. Requests/minute</label><div class="col-sm-9"><input type="number" name="RequestsPerMinute" placeholder="Type maximum amount of reqs/min..." class="form-control valid"></div></div><div class="form-group"><label class="col-sm-3 control-label">Request Threshold</label><div class="col-sm-9"><input type="number" name="Threshold" placeholder="Type fastest timeframe for 1 request in seconds..." class="form-control valid"></div></div><div class="form-group"><label class="col-sm-3 control-label">Comment</label><div class="col-sm-9"><textarea name="Comment" rows="5" class="form-control"></textarea></div></div></form> 

Das Problem:

den obigen Code verwenden, wird es leere Felder serialisiert noch (aber ich will, dass vermeiden). Dies ist das Ergebnis { RequestsPerMinute: '121', Threshold: '', Comment: '' }. Wie kann ich vermeiden, die Felder ohne Wert zu serialisieren?

Answer 1

Try this:

var form = $(); //Initialize empty jQuery object 

    //Iterate through all inputs, textareas 
    $('#bulk-edit-fut-account-form input, #bulk-edit-fut-account-form textarea').each(function() { 

     //Add to jQuery object if not empty 
     if ($(this).val().length) { 
      form = form.add($(this)); 
     } 

    }) 

    console.log(JSON.stringify(form)); 
    var formData = getFormData(form); 

Answer 2

könnten Sie filter und Elemente entfernen, wo .val() leer ist:

$.map(unindexed_array, function(n, i){ 
    indexed_array[n['name']] = n['value']; 
}).filter(function() { 
    // will be removed from array if empty 
    return $(this).val(); 
}); 

Answer 3

Hier ist eine Möglichkeit, die Funktion

function getFormData($form, no_empty) { 
    var unindexed_array = $form.serializeArray(); 
    var indexed_array = {}; 

    $.map(unindexed_array, function(n, i) { 
     indexed_array[n['name']] = n['value']; 
    }); 

    if (no_empty) { 
     $.each(indexed_array, function(key, value) { 
      if ($.trim(value) === "") delete indexed_array[key]; 
     }); 
    } 

    return indexed_array; 
} 

Wenn Sie wan‘zu ändern t, um es normal zu nennen und alles einzubeziehen, tun Sie einfach

var json = getFormData(form); 

und wenn Sie nicht über die leeren Eingaben wollen, tun Sie nur

var json = getFormData(form, true); 

und sie werden herausgefiltert