take input value from a selected checkbox and show it in url box

Question

I have some check box to get Brand name and size, i want to display value for selected check box in url box like

www.xyz.com?brands=P,Q,R&Size=2,3

I've this code that shows,

 www.xyz.com?brands=P&brands=Q&brands=R&Size=2&Size=3

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$('input[type="checkbox"]').on('change', function(e) {
    var data = [],
        loc = $('<a>', {
            href: window.location
        })[0];
    $('input[type="checkbox"]').each(function() {
        if (this.checked) {
            data.push(this.name + '=' + this.value);
        }
    });
    data = data.join('&');

    $.post('/ajax-post-url/', data);
    if (history.pushState) {
        history.pushState(null, null, loc.pathname + '?' + data);
    }
});
</script>

HTML

<div class="pane">
    <div class="ele">
        <input type="checkbox" value="X" name="Brand">
        <label>Brand 1</label>
        <input type="checkbox" value="Y" name="Brand">
        <label>Brand 2</label>
        <input type="checkbox" value="Z" name="Brand">
        <label>Brand 3</label>
        <input type="checkbox" value="1" name="Size">
        <label>Size 1</label>
        <input type="checkbox" value="2" name="Size">
        <label>Size 2</label>
        <input type="checkbox" value="3" name="Size">
        <label>Size 3</label>
    </div>
</div>

Please see ["Should questions include “tags” in their titles?"](http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles), where the consensus is "no, they should not"! — , Jun 09 '15 at 06:53

score 2 · Accepted Answer · answered Jun 09 '15 at 06:44

You can change your script this way:

$('input[type="checkbox"]').on('change', function(e) {
    var data = {}; // 1
    var dataStrings = []; // 2

    $('input[type="checkbox"]').each(function() { // 3
        if (this.checked) { 
            if (data[this.name] === undefined) data[this.name] = []; // 4
            data[this.name].push(this.value); // 5
        }
    });

    $.each(data, function(key, value) // 6
    {
        dataStrings.push(key + "=" + value.join(','));
    });

    var result = dataStrings.join('&'); // 7

    alert(result);

    $.post('/ajax-post-url/', data);
    if (history.pushState) {
        history.pushState(null, null, loc.pathname + '?' + data);
    }
});

Here is a JSFiddle: http://jsfiddle.net/8ct2mbpa/

This is how it works:

data is an object which consists of ARRAYS of selected values
dataStrings is an array which consists of key-value pairs
First, we iterate through all selected checkboxes
If such array is not yet presented, we create it. For example, data['Brand'] is an empty array now
We add a selected value. data['Brand'] is now filled with values ['X', 'Y', 'Z']
Combine values in key-value pairs. It now becomes Brand=X,Y,Z
Join all key-value pairs using "&" sign

score 0 · Answer 2 · edited May 23 '17 at 10:31

0

I think you're looking for this:

How do I pass a URL with multiple parameters into a URL?

That said, I think this question could be marked as a double.

edited May 23 '17 at 10:31

Community

1
1

answered Jun 09 '15 at 06:33

Taffer

33
7

i want to pass multiple value in url bar like www.xya.com?brand=x,y,z&size=1,2,3 ( where brand= value of checkbox and 1,2,3 = name of check box) – Divyank Jun 09 '15 at 06:41
If it's a double, than rather flag it as a double, instead of putting up a non-answer :) – GreyRoofPigeon Jun 09 '15 at 06:42
i don't think my prob same as link you gave – Divyank Jun 09 '15 at 06:45

take input value from a selected checkbox and show it in url box

2 Answers2