Checkbox Selected Values Get in Browser URL using Javascript

Question

I need check box selected values get in browser url to execute query as per selection base.

html code

  <div style="width:200px; float:left">
    Price
    <div>
    <input type="checkbox" name="price" value="0-1000" class="filters" />0-1000<br />
    <input type="checkbox" name="price" value="1000-2000" class="filters" />1000-2000<br />
    <input type="checkbox" name="price" value="3000-4000" class="filters" />2000-3000<br />
    </div>
    Colors
    <div>
   <input type="checkbox" name="colors" value="Red" class="filters" />RED<br />
    <input type="checkbox" name="colors" value="Green" class="filters" />GREEN<br />
    <input type="checkbox" name="colors" value="Blue" class="filters" />BLUE<br />
    </div>
    </div>

javascript

<script type="text/javascript">
$('.filters').on('change',function(){
    var price = new Array();
        $('input[name=price]:checked').each(function(){
           price.push($(this).val());
        });
    var colors = new Array();
        $('input[name=colors]:checked').each(function(){
           colors.push($(this).val());
        });

    location.href = 'http://localhost/test/javascript.php?price='+price;


});         
</script>

When User Click on price option or color option, URL should change like this

http://localhost/test/javascript.php?price=0-1000&price=1000-2000&colors=Red&colors=Green

If user selected only single check box then should display only one parameter in url.

Is it possible with javascript ?

Answer 1

You can use the $.param helper to create a valid querystring from the selected values. Try this:

$('.filters').on('change', function () {
    var prices = $('input[name=price]:checked').map(function () {
        return this.value;
    }).get();
    var colors = $('input[name=colors]:checked').map(function () {
        return this.value;
    }).get();

    var qs = $.param({
        price: prices,
        colors: colors
    }, true);

    window.location.assign('http://localhost/test/javascript.php?' + qs);
});

Example fiddle

Also note the use of map() to make the array creation simpler.

Answer 2

$('.filters').on('change',function(){
    var price = new Array();
        $('input[name=price]:checked').each(function(){
           price.push($(this).val());
        });
    var colors = new Array();
        $('input[name=colors]:checked').each(function(){
           colors.push($(this).val());
        });
var paramsArray = []
    var pricesParams = createParamList(price,'price');
    var colorsParams = createParamList(colors,'colors');
    if (pricesParams)
    {
        paramsArray.push(pricesParams);
    }
    if (colorsParams)
    {
         paramsArray.push(colorsParams);
    }
    alert('http://localhost/test/javascript.php?'+paramsArray.join('&'));
});         

function createParamList(arrayObj, prefix)
{
    var result = arrayObj.map(function(obj){return prefix+'='+obj;}).join('&');
    return result;

}

JSFiddle

Answer 3

You cannot send the same parameter name ie price and colors for multiple values. Instead you can use price-1 , price-2 etc, please see below code

 $('.filters').on('change',function(){ var price = ''; $('input[name=price]:checked').each(function(index){ price = price + 'price-'+index+'='+$(this).val()+'&'; }); var colors = ''; $('input[name=colors]:checked').each(function(index){ colors = colors + 'colors-'+index+'='+$(this).val()+'&'; }); var url = 'http://localhost/test/javascript.php?'+price+colors; url = url.substring(0,url.length-2); location.href = url; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div style="width:200px; float:left"> Price <div> <input type="checkbox" name="price" value="0-1000" class="filters" />0-1000<br /> <input type="checkbox" name="price" value="1000-2000" class="filters" />1000-2000<br /> <input type="checkbox" name="price" value="3000-4000" class="filters" />2000-3000<br /> </div> Colors <div> <input type="checkbox" name="colors" value="Red" class="filters" />RED<br /> <input type="checkbox" name="colors" value="Green" class="filters" />GREEN<br /> <input type="checkbox" name="colors" value="Blue" class="filters" />BLUE<br /> </div> </div> 

Answer 4

Try join() :

var url = 'http://localhost/test/javascript.php?';
url += 'price=' + price.join('&price=');
url += '&colors=' + colors.join('&colors=');
location.href = url;

Answer 5

Actually the thing you have mentioned is a bit of tricky and not possible, you need to change the specification little bit

The reason why this is not possible is that you are asking GET request parameter price to have 2 values, So when it will go to server, the server variable will only show the one parameter, Here you need to set it as array parameter. Or you can use CSV(Comma Separated Values) in param values, Based on this selection I can help you out more

This reference will help you aswell -> How to pass an array within a query string?