CODEWITHSUNDEEP
javascriptjquerycheckboxonclickquery-string
Anjana Sharma
Anjana Sharma

Reputation: 4745

onclick checkbox append checkbox value to URL

I wanna implement this using jquery instead of inline but Its not working, inline works fine. The other reason I wanna use jquery is if user selects more than one checkbox, the url should be appended with whatever is already there + OR '2nd CheckBox Value' like this: "http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=Office OR Hospital" The space infront and following OR is fine.. How can I achieve this? Can someone help me out?

 Offices<input name="LocType" type="checkbox"  
value="Office" onclick="window.location='http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=Office'; return true;"> &#160;
     Hospitals<input name="LocType" type="checkbox"  
value="Hospital" onclick="window.location='http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=Hospital'; return true;"> &#160;
     Facilities<input name="LocType" type="checkbox"  
value="Facility" onclick="window.location='http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=Facility'; return true;">

Upvotes: 2

Views: 7120

Answers (2)

ShankarSangoli
ShankarSangoli

Reputation: 69905

You can try this.

HTML

<input name="LocType" type="checkbox" value="Office" />
<input name="LocType" type="checkbox" value="Hospital" />
<input name="LocType" type="checkbox" value="Facility" />

JS

Assuming you have a button or something on click of which you want to create a url with all the checked LocType checkbox values appended to the url seperated by OR

var url = "http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations";

$('button').click(function(){
   //This will get the array containing values of checked LocType checkboxes
   var checkedLocTypeValues = $('input[name=LocType]:checked').map(function(){
        return this.value;
   });

   //Use Array.join() method to join the array elements by " OR "
   url = url + "&k=" + checkedLocTypeValues.join(" OR ");

   //Now you can use url variable which has all the checked  LocType checkboxes value
}

jQuery map() reference - http://api.jquery.com/jQuery.map/

Upvotes: 0

Brian Minnich
Brian Minnich

Reputation: 402

Bind to the change event on the checkboxes. When clicked read the current checkbox value and then all other relative checkboxes. Append your base url with your custom query string and go crazy. :)

This isn't tested but hopefully it's a good starting point. 

var baseUrl = 'http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=';

$(document).ready(function () {

    // listen to change event (customize selector to your needs)
    $('input[type=checkbox]').change(function (e) {

        e.preventDefault();

        if ($(this).is(':checked')) {

            // read in value
            var queryString = $(this).val();

            // loop through siblings (customize selector to your needs)
            var s = $(this).siblings();
            $.each(s, function () {

                // see if checked
                if ($(this).is(':checked')) {

                    // append value
                    queryString += ' OR ' + $(this).val();
                }
            });

            // jump to url
            window.location = baseUrl + queryString;
        }
    });

});

Upvotes: 3

Related Questions