将表单序列化为json,不带空值

时间:2016-08-02 20:05:51

标签: javascript jquery node.js forms serialization

我有一个包含3个字段的HTML表单。我想将它们序列化为json对象(到目前为止使用我的getFormData($form)方法。但现在我想在表单中排除没有inputtext / value的所有字段。

这会将我的表单序列化并将其另存为json对象:

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;
}

这是我尝试过滤没有值的字段的方式:

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

我的HTML表单:

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

问题:

使用上面的代码,它仍然会序列化空字段(但我想避免这种情况)。这是{ RequestsPerMinute: '121', Threshold: '', Comment: '' }的结果。如何避免序列化没有值的字段?

3 个答案:

答案 0 :(得分:1)

这是修改功能的一种方法

mActionBar.setCustomView(mCustomView);

当你不想正常打电话,包括所有内容时,你只需要

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;
}

当你不想要空输入时,你只需要

 var json = getFormData( form );

并将其过滤掉

答案 1 :(得分:0)

您可以filter删除.val()为空的元素:

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

答案 2 :(得分:0)

试试这个:

    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);