onclick checkbox append checkbox value to URL

Question

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;">

You've already posted more or less the same question, and somebody's taken the trouble to answer it, and then there's your other question that two people have answered. — nnnnnn
– nnnnnn, Commented Feb 25, 2012 at 5:17

Brian Minnich · Accepted Answer · 2012-02-25 05:17:52Z

3

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

});

answered Feb 25, 2012 at 5:17

Brian Minnich

4022 silver badges4 bronze badges

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

2 Comments

Anjana Sharma Over a year ago

Thank you so much, the second part is not working. THat is its not seeing if siblings are checked and if they are, its not grabbing the values and appending to the URL with OR...Can you help me figure that out?

Tom Canfarotta Over a year ago

@brian this is awesome! Works great. Wondering if you could help me instead of automatically redirecting on checkbox I want to redirect on click after checkbox is selected. How would you go about doing this?

ShankarSangoli · Accepted Answer · 2012-02-25 05:19:05Z

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/

Collectives™ on Stack Overflow

onclick checkbox append checkbox value to URL

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related