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

user_10733567 0
Viewed 200

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

jquery javascript
1 Answers

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);
});
user_9940060
Related