Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    searching criteria on multiple checkboxes

    Hi All,
    i am trying to add some check boxes under a webpage e.g. Cars, Trucks, Toyota, Honda, when the user clicks Car check box and click refresh button then the page should be populated with Cars by all vendors, but when the user selects Car and Honda check boxes, and clicks refresh button the page should be populated with cars made by Honda Only.
    coding for individual check boxes is done but for multiple selection criteria i have no idea, like Cars and Honda example, please guide.
    code for checkbox is as follow:

    else if (plotOptChbox[10].checked == true && markers[i].get('Managed_By') == 'Honda') {
    filterMarker[fmCnt] = markers[i];
    fmCnt++;

    the above is only for one checkbox, all others are like same with different values comparison.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Suggest use hidden <divs> to contain the information, made visible or style="block" when the user selects the appropriate checkbox.

    Sounds to me that select lists might be a better choice than checkboxes.

    This knee problem is an utter pain in the backside. - Cricket player

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Philip,

    i have already implemented the check boxes thing, so is it possible to search on multiple check boxes criteria.
    Last edited by vdevil; 03-10-2013 at 12:03 PM.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by vdevil View Post
    Hi Philip,

    i have already implemented the check boxes thing, so is it possible to search on multiple check boxes criteria.
    It is, but it is not at all efficient. The more checkboxes you have the greater the number of possible combinations. What if the user checks Toyota and Honda?

    I would suggest something like this:-


    Code:
    <select name = "sel1" id = "sel1" onchange = "showStuff()">
    <option value = 0>Choose make...</option>
    <option value = 1>Toyota</option>
    <option value = 2>Honda</option>
    <option value = 3>Mercedes</option>
    </select>
    <br><br>
    
    <div id = "make1" style="display:none">
    <select name = "Toyota" id = "Toyota">
    <option value = 0>Choose Toyota model...</option>
    <option value = 1>Toyota Model 1</option>
    <option value = 2>Toyota Model 2</option>
    <option value = 3>Toyota Model 3</option>
    </select>
    </div>
    
    <div id = "make2" style="display:none">
    <select name = "Honda" id = "Honda">
    <option value = 0>Choose Honda model...</option>
    <option value = 1>Honda Model 1</option>
    <option value = 2>Honda Model 2</option>
    <option value = 3>Honda Model 3</option>
    </select>
    </div>
    
    <div id = "make3" style="display:none">
    <select name = "Mercedes" id = "Mercedes">
    <option value = 0>Choose Mercedes model...</option>
    <option value = 1>Mercedes Model 1</option>
    <option value = 2>Mercedes Model 2</option>
    <option value = 3>Mercedes Model 3</option>
    </select>
    </div>
    
    
    <script type = "text/javascript">
    
    function showStuff() {
    
    var len = document.getElementById("sel1").length;
    var val = document.getElementById("sel1").value;
    
    for (i=1; i<len; i++) {  // hide all divs
    var div = "make" + i;
    document.getElementById(div).style.display="none";
    }
    
    document.getElementById("make"+val).style.display="block";
    
    }
    
    </script>
    You can easily extend this so that when the user clicks on (say) Toyota Model 3 a <div> appears containing information about that particular model.


    The refresh button F5 does what it says - it refreshes the page and restores it to its original format. If you want to retain input values after a page refresh you will need to use a cookie.
    Last edited by Philip M; 03-10-2013 at 12:24 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Quote Originally Posted by Philip M View Post
    If you want to retain input values after a page refresh you will need to use a cookie.
    You don't need to use cookies, you can also use other approaches like local storage. Cookies have some disadvantages to local storage in this case. As for browser support, all major browsers have been supporting this feature for several major releases.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by Airblader View Post
    You don't need to use cookies, you can also use other approaches like local storage. Cookies have some disadvantages to local storage in this case. As for browser support, all major browsers have been supporting this feature for several major releases.

    Web storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari. But sadly Internet Explorer 7 and earlier versions do not support web storage. Although usage is swiftly diminishing, IE7 is still in use (roughly 3%) and cannot at the moment be regarded as completely extinct.

    If we could rely on all browsers supporting local storage, then I agree that it would be a better choice.
    Last edited by Philip M; 03-10-2013 at 07:53 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •