1

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 ?

jack brone
  • 205
  • 5
  • 24

5 Answers5

3
$('.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

Ori Price
  • 3,593
  • 2
  • 22
  • 37
  • 1
    although this will give you what you want, as Parag Bhayani mentioned this is not the right approach. see Rory McCrossan answer – Ori Price Jul 14 '15 at 12:37
2

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.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Hi, Code working. But here one problem is coming like in the browser same paramter repeating twice or thrice depends on selection can we rename as price for first selction and second price_2 and price_3 for third one. – jack brone Jul 14 '15 at 12:44
  • This follows the standard pattern for querystring params as outlined in your question. When you receive them on the server this way you can easily group them in to an array - which is why I would advise against giving them unique parameter names. – Rory McCrossan Jul 14 '15 at 12:45
1

You cannot send the same parameter name i.e. 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>
Bhushan Kawadkar
  • 28,279
  • 5
  • 35
  • 57
  • Wokring but if i select one parameter it ends with & can we remove if only one seleted – jack brone Jul 14 '15 at 12:47
  • yes you can, see my updated answer where i have used `substring` which removes last letter. – Bhushan Kawadkar Jul 14 '15 at 12:58
  • Yes but parameter coming like price-0 for all price options, colors-0 for all color options instead price-0,price-1,price-2 – jack brone Jul 14 '15 at 13:15
  • check [this](https://jsfiddle.net/fautrcfc/), parameters are coming like price-0, price-1 etc. You are using `location.href = url;` which is submitting page for every click of checkbox. Better to handle it seperately, call it when user done with selection of checkbox. – Bhushan Kawadkar Jul 14 '15 at 13:18
1

Try join():

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

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?

Community
  • 1
  • 1
Parag Bhayani
  • 3,280
  • 2
  • 28
  • 52
  • I'm not sure where you've got this from, or why it's upvoted, but it's incorrect. Having repeated values in querystrings is fine - they are collated to comma delimited string/arrays (depending on your implementation) on the server-side. – Rory McCrossan Jul 14 '15 at 12:46
  • @Parag Can you tell how to seperate using comma – jack brone Jul 14 '15 at 13:11
  • @RoryMcCrossan: Don't we need to change the style of url to support for that ? e.g. http://localhost/test/javascript.php?price[]=0-1000&price[]=1000-2000 – Parag Bhayani Jul 14 '15 at 13:16
  • @jackbrone: That is fairly simple when you are setting price you can just join the values of array ... e.g. location.href = 'http://localhost/test/javascript.php?price='+price.join(); ... or you can also specify delimiter while joining e.g. location.href = 'http://localhost/test/javascript.php?price='+price.join(':'); – Parag Bhayani Jul 14 '15 at 13:18
  • @jackbrone: I hope this answer will help you -> http://stackoverflow.com/questions/6243051/how-to-pass-an-array-within-a-query-string – Parag Bhayani Jul 14 '15 at 13:19