How can I add values from checkboxes to a URL string as grouped parameters?

Question

I saw lots of similar question where you can extract the values of Checkboxes based on the check uncheck and add them to URL, but if we have different categories of checkbox group, separate them with &. Example:

$(document).ready(function() {
        var swapRelation = "";
        $("input[type=checkbox]").click(function(e) {
            var seasoning = "",
                parentRelation = "",
                tempArray = [];
            
            $("input:checked").each(function() {
                tempArray.push($(this).attr("name").replace(/\s/g, ''));
                parentRelation = $(this).closest(".wrapper").find('.catName').text().trim();
                parentRelation = parentRelation.replace(/\s/g, '');

            });
            if (tempArray.length !== 0) {
                seasoning += `${parentRelation}=` + tempArray.toString();
                // if (swapRelation == parentRelation) {
                //     // seasoning+=`&${parentRelation}=`+tempArray.toString();
                //     seasoning += `${parentRelation}=` + tempArray.toString();
                // }else {
                    
                // }
                
                //tempArray = [];
                swapRelation = parentRelation;
            }
            console.log("example.com?" + seasoning);
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="catName">Fruits</div>
    <div class="checkBoxWrap">
        <input class="input__field" type="checkbox" name="apple" id="input-5">
        <input class="input__field" type="checkbox" name="banana" id="input-6">
        <input class="input__field" type="checkbox" name="mango" id="input-7">
    </div>
</div>
<div class="wrapper">
    <div class="catName">Vaegs</div>
    <div class="checkBoxWrap">
        <input class="input__field" type="checkbox" name="Okra" id="input-8">
        <input class="input__field" type="checkbox" name="Patato" id="input-9">
        <input class="input__field" type="checkbox" name="Tamato" id="input-10">
    </div>
</div>
<div class="wrapper">
    <div class="catName">Rivers</div>
    <div class="checkBoxWrap">
        <input class="input__field" type="checkbox" name="Ganga" id="input-11">
        <input class="input__field" type="checkbox" name="yamuna" id="input-12">
        <input class="input__field" type="checkbox" name="thames" id="input-13">
    </div>
</div>

Expected Result on multiple Selections:

URL?Fruits=banana,mango&Vegs=okra,patato&Rivers=ganga,whateverSelected

You probably want an each function for each category, so it builds its own array. — isherwood
– isherwood, Commented Sep 27, 2021 at 14:12
Why not give the checkbox groups the same name: name="fruits[]", with different values: value="apple", value="banana", value="mango", and let the URL construction happen naturally, like ?fruits[]=apple&fruits[]=banana&fruits[]=mango. Is there a reason you need it as a CSV in the URL? — Tim Lewis
– Tim Lewis, Commented Sep 27, 2021 at 14:13

Nice Books · Accepted Answer · 2021-09-27 14:41:18Z

1

You can use URLSearchParams to build your query string.

var usp = new URLSearchParams();
document.querySelectorAll('.wrapper').forEach((wrapperDiv)=> {
    var category = wrapperDiv.querySelector('.catName').textContent;
    var checkedBoxes = wrapperDiv.querySelectorAll('input[type="checkbox"]:checked');
    var values = Array.from(checkedBoxes, cb=>cb.name).join('');
    usp.append(category,values);
});

answered Sep 27, 2021 at 14:41

Nice Books

1,8812 gold badges19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I add values from checkboxes to a URL string as grouped parameters?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related