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
– Arun P Johny

2013-12-04 09:20:45 +00:00
Commented Dec 4, 2013 at 9:20 — Arun P Johny
– Arun P Johny, Commented Dec 4, 2013 at 9:20

Adam Merrifield · Accepted Answer · 2013-12-05 16:03:20Z

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 5, 2013 at 16:03

answered Dec 4, 2013 at 9:29

Adam Merrifield

10.4k4 gold badges44 silver badges60 bronze badges

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

6 Comments

Arun Over a year ago

Yes its working .but the date is getting like on. my checkbox value is Color #3,but the data getting is chbox=on

Joke_Sense10 Over a year ago

Because you have not mentioned anything on your value field of checkbox so by default it will be on.Do this <input type="checkbox" name="chbox" id="" value="Color #3">

Arun Over a year ago

@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.

iWillGetBetter Over a year ago

Hi, nice answer, upvoted! If you dont mind me asking, what does loc = $('<a>', {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?

Adam Merrifield Over a year ago

@iWillGetBetter The point of all of this is that a elements have a special property, allowing to access pathname. At the end of the day it's a way to parse a url and reliably obtain it's parts.

|

Arun P Johny · Accepted Answer · 2013-12-04 09:24:00Z

1

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
})

answered Dec 4, 2013 at 9:24

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Joke_Sense10 · Accepted Answer · 2013-12-04 09:55:11Z

1

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

edited Dec 4, 2013 at 9:55

answered Dec 4, 2013 at 9:23

Joke_Sense10

5,3972 gold badges20 silver badges22 bronze badges

Collectives™ on Stack Overflow

Append the checkbox selected values with url as querystring

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related