Append the checkbox selected values with url as querystring

Question

In my page I have some checkboxes.I need to pass the checked values through url as query string. here is my checkbox code

 <div class="panel-body">
                <div class="rowElem">
                  <input type="checkbox" name="chbox" id="">
                  <label>Color #1</label>
                </div>
                <div class="rowElem">
                  <input type="checkbox" name="chbox" id="">
                  <label>Color #2</label>
                </div>
                <div class="rowElem">
                  <input type="checkbox" name="chbox" id="">
                  <label>Color #3</label>
                </div>
              </div>

my initial url is like www.test.com if I check the color #3 then the url will look like www.test.com/?color=color #3

How to done this using ajax.???

if two of them are checked then – Arun P Johny Dec 04 '13 at 09:20 — Arun P Johny, Dec 04 '13 at 09:20

Adam Merrifield · Accepted Answer · 2013-12-05T16:03:20.803

2

Try this. On each checkbox change post to the server and html5 pushState the URL with the data.

$('input[type="checkbox"]').on('change', function(e){
    var data = $('input[type="checkbox"]').serialize(),
        loc = $('<a>', {href:window.location})[0];
    $.post('/ajax-post-url/', data);
    if(history.pushState){
        history.pushState(null, null, loc.pathname+'?'+data);
    }
});

Updated to work with same named inputs by adding the index to the end.

$('input[type="checkbox"]').on('change', function(e){
    var data = [],
        loc = $('<a>', {href:window.location})[0];
    $('input[type="checkbox"]').each(function(i){
    if(this.checked){
        data.push(this.name+i+'='+this.value);
    }
    });
    data = data.join('&');

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

Updated to work as comma separated list. key=a,b,c,d,e.

$('input[type="checkbox"]').on('change', function(e){
    var data = {},
        fdata = [],
        loc = $('<a>', {href:window.location})[0];
    $('input[type="checkbox"]').each(function(i){
        if(this.checked){
            if(!data.hasOwnProperty(this.name)){
                data[this.name] = [];
            }
            data[this.name].push(this.value);
        }
    });
    $.each(data, function(k, v){
        fdata[k] = [v.join(',')];
    });
    fdata = fdata.join('&');

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

edited Dec 05 '13 at 16:03

answered Dec 04 '13 at 09:29

Adam Merrifield

10,307
4
41
58

Yes its working .but the date is getting like on. my checkbox value is Color #3,but the data getting is chbox=on – Arun Dec 04 '13 at 09:38
Because you have not mentioned anything on your `value` field of checkbox so by default it will be `on`.Do this `` – Joke_Sense10 Dec 04 '13 at 09:49
@Adam I think you first code is suit for me just change the name to material, but it showing when I checked more than one ,,. material=iron&material=steel etc.I just need material=iron,steel. – Arun Dec 05 '13 at 11:02
Hi, nice answer, upvoted! If you dont mind me asking, what does loc = $('', {href:window.location})[0]; do? It looks complicated but insteresting. I tested this and it works to prevent the query string stacking on the URL? But what exactly the syntax is referring to? – iWillGetBetter Dec 23 '16 at 08:26
@iWillGetBetter No problem, in essence it is just creating a new `a` element. Basically, not only does jQuery allow you to select elements, but [it can create new elements](https://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent). So `$('')` creates a new `a` element. When creating a new element, jQuery allows a second parameter of attributes to add to the element (I'm failing to find documentation on this part right now.) So far we've created ``. Finally the `[0]` tells jQuery to return this new dom object we just created. – Adam Merrifield Dec 23 '16 at 15:53
1

@iWillGetBetter The point of all of this is that [`a` elements have a special property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname), allowing to access `pathname`. At the end of the day it's a way to parse a url and reliably obtain it's parts. – Adam Merrifield Dec 23 '16 at 15:59

Joke_Sense10 · Answer 2 · 2013-12-04T09:55:11.520

Try this:

Html:

<div class="panel-body">
   <div class="rowElem">
      <input type="checkbox" name="chbox" id="" value="Color #1"> <!-- add value field-->
       <label>Color #1</label>
   </div>
   <div class="rowElem">
      <input type="checkbox" name="chbox" id="" value="Color #2"> <!-- add value field-->
       <label>Color #2</label>
   </div>
   <div class="rowElem">
     <input type="checkbox" name="chbox" id="" value="Color #3"> <!--add value field-->
       <label>Color #3</label>
    </div>
</div>

Jquery:

$('input[name="chbox"]:checked').serialize();

Demo

score 1 · Answer 3 · answered Dec 04 '13 at 09:24

This will find all the checked checkboxes on change event and then finds the associated label elements text

var $checks = $('input[name="chbox"]').change(function () {
    var checked = $checks.filter(':checked').map(function () {
        return $.trim($(this).next().text());
    }).get().join(',')
    var url = 'www.test.com/?color=' + checked;
    //do you ajax
})

Append the checkbox selected values with url as querystring

3 Answers3

Linked