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 14 of 14
  1. #1
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Need to restrict a user to check consecutive checkboxes inside each Inner Table

    I have a table (id=’MainTable’) where I am displaying availability records and inside the Main Table I have a table with checkboxes for the available time. The checkboxes in the Inner Table will be different in number and there will 1 or more than 1 checkboxes for each record in a table. e.g the Inner Table of first line can have 5 checkboxes and can have 3 checkboxes for the second line and so on.

    A user can check 1 or more than 1 checkboxes of a specific line of Inner Table but in a sequence/consecutive to book an assessor for more than 1 hour.

    E.g In the first line a user can select either a checkbox with “08:00 AM - 09:00 AM” and “09:00 AM - 10:00 AM” to make 2 hours but can’t select “08:00 AM - 09:00 AM” and “12:00 PM - 01:00 PM” to make 2 hours because they are not consecutive checkboxes.

    E.g In the second line a user can select either a checkbox with “09:30 AM - 10:30 AM” and “10:30 AM - 11:30 AM” to make 2 hours but can’t select “09:30 AM - 10:30 AM” and “05:00 PM - 06:00 PM” to make 2 hours because they are not consecutive checkboxes.

    I have a different id for the Inner Table

    I am only providing HTML of the Inner Table:

    Code:
    <table width="100%" border="0" id="Tab_13322918">
    <tbody>
        <tr>
            <td style="font-size:10px;color:brown">
                <input type="checkbox" value="08:00 AM - 09:00 AM"> 08:00 AM - 09:00 AM
            </td>
            <td style="font-size:10px;color:brown">
                <input type="checkbox" value="09:00 AM - 10:00 AM"> 09:00 AM - 10:00 AM
            </td>
        </tr>
        <tr>
            <td style="font-size:10px;color:brown">
                <input type="checkbox" value="12:00 PM - 01:00 PM"> 12:00 PM - 01:00 PM
            </td>
            <td style="font-size:10px;color:brown">
                <input type="checkbox" value="01:00 PM - 02:00 PM"> 01:00 PM - 02:00 PM
            </td>
        </tr>
        <tr>
            <td style="font-size:10px;color:brown">
                <input type="checkbox" value="02:00 PM - 03:00 PM"> 02:00 PM - 03:00 PM
            </td>
        </tr>
    </tbody>

    By consecutive checkboxes I mean consecutive times and no gap in between
    Attached Thumbnails Attached Thumbnails Need to restrict a user to check consecutive checkboxes inside each Inner Table-untitled.jpg  
    Last edited by asifakhtar; 08-20-2013 at 08:06 PM.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Why not just make radio buttons with 2 hours range each?

    Code:
    <label><input type="radio" name="time" value="08:00 AM - 10:00 AM" />08:00 AM - 10:00 AM</label>
    <label><input type="radio" name="time" value="09:00 AM - 11:00 AM" />09:00 AM - 11:00 AM</label>
    <label><input type="radio" name="time" value="10:00 AM - 12:00 PM" />10:00 AM - 12:00 PM</label>
    ...
    No javascript required.

  • #3
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Why not just make radio buttons with 2 hours range each?

    Code:
    <label><input type="radio" name="time" value="08:00 AM - 10:00 AM" />08:00 AM - 10:00 AM</label>
    <label><input type="radio" name="time" value="09:00 AM - 11:00 AM" />09:00 AM - 11:00 AM</label>
    <label><input type="radio" name="time" value="10:00 AM - 12:00 PM" />10:00 AM - 12:00 PM</label>
    ...
    No javascript required.
    because a user can also book an assessor for an hour as well.

    Please make sure a user can select 1 or more than 1 checkboxes(A user can book an assessor for either 1 hour or more than 1 hours.)

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    1. Is 2 hours the maximum hours they can book?
    2. Do you have only 1 inner table for all the available times for all the dates or you have one for each date? Posting a sample of the inner table(s) will be helpful.
    3. Are you using jQuery? This is not required, but if you are already using jQuery on the page, it will be easier to implement this using jQuery as well.

  • #5
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Here's the link to the cross-post in another forum where I posted a solution:
    http://www.webdeveloper.com/forum/sh...ch-Inner-Table

  • #6
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    1. Is 2 hours the maximum hours they can book?
    2. Do you have only 1 inner table for all the available times for all the dates or you have one for each date? Posting a sample of the inner table(s) will be helpful.
    3. Are you using jQuery? This is not required, but if you are already using jQuery on the page, it will be easier to implement this using jQuery as well.
    Is 2 hours the maximum hours they can book? No maximum can be 1 hour, 2 hours, 3 hours and so on...
    Do you have only 1 inner table for all the available times for all the dates or you have one for each date? Posting a sample of the inner table(s) will be helpful. I have inner table for each date.
    Are you using jQuery? This is not required, but if you are already using jQuery on the page, it will be easier to implement this using jQuery as well. I am using jQuery.

    By consecutive checkboxes I mean consecutive times and no gap in between
    Attached Thumbnails Attached Thumbnails Need to restrict a user to check consecutive checkboxes inside each Inner Table-untitled.jpg  
    Last edited by asifakhtar; 08-20-2013 at 08:06 PM.

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,211
    Thanks
    23
    Thanked 605 Times in 604 Posts
    Quote Originally Posted by asifakhtar View Post
    Are you using jQuery? This is not required, but if you are already using jQuery on the page, it will be easier to implement this using jQuery as well. I am using jQuery.
    Because you are in the javascript area and not the JavaScript frameworks area I did this in javascript.

    It's not the complete answer but gives you an idea.
    My thoughts are to add and remove radio boxes as necessary. You can shorten code by using functions to do the dirty work.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    
    <script type="text/javascript">
    function houry(){
    	var str = document.getElementById("Tab_13322918").rows[0].cells[1].innerHTML;
    	var part2 = str.replace("For One Hour Only", "Add an second hour");
    	document.getElementById("Tab_13322918").rows[0].cells[1].innerHTML = part2;
    
    	var next_str = document.getElementById("Tab_13322918").rows[1].cells[0].innerHTML;
    	var part1 = next_str.substr(0,98);
    	var new_part = next_str.replace(part1,"");
    	document.getElementById("Tab_13322918").rows[1].cells[0].innerHTML = new_part;
    }
    
    </script>
    
    </head>
    
    <body>
    <table width="450px" border="0" id="Tab_13322918" style="text-align:right;">
    <tbody>
        <tr>
            <td style="font-size:10px;color:brown">
                <input type="radio" name="morning" value="08:00 AM - 09:00 AM" onchange="houry();" > For One Hour Only 08:00 AM - 09:00 AM
            </td>
            <td style="font-size:10px;color:brown">
                <input type="radio" name="morning" value="08:00 AM - 10:00 AM"> For One Hour Only 09:00 AM - 10:00 AM
            </td>
        </tr>
        <tr>
            <td style="font-size:10px;color:brown">
                <input type="radio" name="afternoon" value="12:00 PM - 01:00 PM" onchange="houry();" > For One Hour Only 12:00 PM - 01:00 PM
            </td>
            <td style="font-size:10px;color:brown">
                <input type="radio" name="afternoon" value="12:00 PM - 02:00 PM"> For One Hour Only 01:00 PM - 02:00 PM
            </td>
        </tr>
        <tr>
            <td style="font-size:10px;color:brown">
                <input type="radio" name="evening" value="02:00 PM - 03:00 PM"> For One Hour Only 02:00 PM - 03:00 PM
            </td>
    		<td></td>
        </tr>
    </tbody>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    After seeing Airblader's post, I would recommend that we not respond further in this forum. Cross-posting the same question, whether in the same forum or multiple forums, is EVIL. Very very bad netiquette.

    You end up getting exactly what has happened here: People spend a lot of their own good time answering only to find out that the question has already been answered in another forum. Personally, I would like to see cross-posters warned ONE TIME. If the cross-post again, I'd like to see them banned from the forum.

    The sole exception: If you post in one forum and don't get an answer within a reasonable time (say two days?), *THEN* go ahead and post in a second forum but *ONLY* if you mention IN BOTH FORUMS that you have done so, providing a link to the thread in the other forum, so the people can check to see if you have gotten a response. But other than that, for me if you cross-post you are dead to me.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    @ sunfighter

    Your code is very buggy for me (Google Chrome) and I don't think radio buttons are a good replacement for this. I agree there are better ways than checkboxes, but they do provide a simple way of doing this.

  • #10
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Quote Originally Posted by Old Pedant View Post
    Cross-posting the same question, whether in the same forum or multiple forums, is EVIL. Very very bad netiquette.
    Finally!
    I am heavily opposed to cross-posting and usually I would point it out and immediately stop any help until the OP decides on one forum. In ~15 years, almost every forum I've been on seemed to frown upon cross-posting…

    …except this one. Like half the threads can be found in this one other forum, who knows how many threads can also be found in other forums. So far no one seemed to mind. I find cross-posting very tiring as you have to keep up with several forums and answers get mixed up quickly.

  • Users who have thanked Airblader for this post:

    Old Pedant (08-20-2013)

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Were I doing this (and I'm not going to, for the reasons I noted above), I would simply (a) allow any checkbox to be checked *until* (b) one checkbox is checked at which time I would DISABLE all checkboxes except that one and the two on either side of the now-checked one. And then (c) if one of those two is checked, extend the enabled checkboxes one more in that "direction". (d) If any box is UNchecked, then uncheck all of them and go back to state (a).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Quote Originally Posted by Airblader View Post
    Finally!
    I am heavily opposed to cross-posting and usually I would point it out and immediately stop any help until the OP decides on one forum.
    You keep pointing them out and I'll keep boycotting them. <grin/>

    Now, if we could just convince the moderators to do the same.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    I'd find that a pretty neat way of doing it as it provides an intuitive visual feedback on the rules by which the selection can be done.

  • #14
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Airblader View Post
    I'd find that a pretty neat way of doing it as it provides an intuitive visual feedback on the rules by which the selection can be done.
    The solution you provided me on the other forum is working. I am very thankful to you. I excluded the checkbox which I didn't want to be included in the process. Again Thanks.


  •  

    Posting Permissions

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