jquery serialize collecting multiples form which group values by name

Question

How to collect multiples form input and group the output into string which combines values by name

For example:

<div class="register">
    <input type="text" name="full_name">
    <textarea name="address"></textarea>
    <input type="radio" name="sex" value="male">
    <input type="radio" name="sex" value="female">
    <input type="checkbox" name="hobies" value="foodball">
    <input type="checkbox" name="hobies" value="basketball">
    <input type="button" class="submit" value="Submit">
</div>

how to get the output will be string or something like this

// field_name: [values]

i'm trying like this:

$('.submit').click(function(){
    var InputCollect = $('.register').find(':input');

    $(InputCollect).each(function(){
        names = $(this).attr('name');
        values = $(this).attr('value');
    
        // the output will be string or something like this:
    
        // full_name: jhon doe
        // address: some street
        // gender: male
        // hobies: football, basketball (combine multiple values:not if checked)
    });
});

i don't know how to group multiple values by it's name

what is the best way to make that output.. use jQuery serialize or each function ?? thanks for attention

Hassan · Answer 1 · 2020-10-07T14:32:09.373

1

You can find the checked checkboxes with :checked. You can then put them into a key-value store where the key is the name of the checkbox, and the value is an array of selected checkboxes :

$('.submit').click(function(){
    var InputCollect = $('.register').find(':input');
    let form = {}
    $('input[type=text], textarea, input[type=radio]:checked', '.register').each(function(){
        const name = $(this).attr('name');
        const value = $(this).val();
        if(value.trim() !== '') {
            form[name] = value;
        }
    });
    
    $('input[type=checkbox]:checked', '.register').each(function(){
        const name = $(this).attr('name');
        const value = $(this).val();
        if(form[name] === undefined) {
            form[name] = [value];
        } else {
            form[name].push(value);
        }
    });
    
    console.log(form);
});

Here I had to split the logic into two callbacks because handling textual inputs and radios is different from handling checkboxes, although you can still merge them in a single callback if you want.

JS fiddle link

edited Oct 07 '20 at 14:32

answered Oct 07 '20 at 10:57

Hassan

609
4
9

that's great it works,, but i try to mapping the fields attributes with empty name still show from console but if there is multiple value with the same name group it, your code is working sir, but the forms which i demonstrated there what if those dynamically forms, in other question is can you give the example with serializeArray method..? thanks for your help sir.. – Denis Oct 07 '20 at 14:12
still showing the name attributes in console.log event the values is empties.. – Denis Oct 07 '20 at 14:13
1

To skip the uninitialized fields you just have to see if the value is different than `''`, I edited the code to reflect that. Not sure about seralizeArray as I haven't used it before, I'll look into it in the afternoon – Hassan Oct 07 '20 at 14:39
sir.. i update your code from JS fiddle and have some problem can you tell me how to merger one more single abject value is [type]. your code is working for me but i can cannot add or merger that.. please – Denis Oct 11 '20 at 10:30

jquery serialize collecting multiples form which group values by name

1 Answers1