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 13 of 13

Thread: Check Uncheck

  1. #1
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Check Uncheck

    A HTML table has a checkbox as the header. Under this column in the HTML table, there are several checkboxes but the number of checkboxes that users will see is dynamic (depending upon database records).

    What I want is when the header checkbox is checked, then all the other checkboxes should also get checked. On the contrary, if the header checkbox is unchecked, all the other checkboxes should also get unchecked. This is how I tried it but it doesn't work :
    Code:
    <script language="JavaScript">
    function checkUncheckAll(obj){
        for(i=0;i<document.forms[0].length;i++){
            if(document.forms[0].type=="checkbox"){
                if(obj=="all"){
                    if(document.forms[0].chkall.checked){
                        document.forms[0].chk[i].checked=true;
                    }
                    else{
                        document.forms[0].chk[i].checked=false;
                    }
                }
            }
        }
    }
    </script>
    <form>
    <!-- header checkbox -->
    <input type=checkbox name="chkAll" onClick="checkUncheckAll(this.name)" value="all">
    
    <!-- checkboxes under the above checkbox -->
    <!-- the following checkboxes have been created dynamically -->
    <input type=checkbox name="chk7" onClick="checkUncheckAll(this.name)" value="7">
    <input type=checkbox name="chk19" onClick="checkUncheckAll(this.name)" value="19">
    <input type=checkbox name="chk23" onClick="checkUncheckAll(this.name)" value="23">
    <input type=checkbox name="chk28" onClick="checkUncheckAll(this.name)" value="28">
    </form>
    Can someone please pont out where am I going wrong?

    I also want that when all the checkboxes (of course, including the header checkbox) are checked, if any one of the dynamically created checkbox is unchecked, then the header checkbox should get unchecked (since not all the dynamic checkboxes aren't checked, why should the header checkbox be checked?). In other words, at any given point of time, if all the dynamic checkboxes are checked, the header checkbox should also be checked but even if a single dynamic checkbox is unchecked, then the header checkbox should get unchecked as well.

    A VERY VERY IMPORTANT point to keep in mind is the name of the dynamic checkboxes which won't be the same (as shown in the above code). I feel that's the reason why the above JavaScript code isn't working since the names of the dynamic checkboxes are different.

    Thanks,

    Arpan

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Try to not use repetitive event handlers in your markup -- separate the beahviorial layer (JS) from your structure (HTML) as much as possible...the following is the basic idea you are looking for -- it's up to you to integrate the idea with the dynamic creation of your checkboxes.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html lang=en>
    
    <head>
    
    <title>About Media Moguls</title>
    
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    
    <body>
    
    <form id="form1">
    <!-- header checkbox -->
    <input type="checkbox" name="chkAll" id="chkAll" value="all">
    
    <br /><br /><br />
    
    <!-- checkboxes under the above checkbox -->
    <!-- the following checkboxes have been created dynamically -->
    <input type="checkbox" name="chk7" id="chk7" value="7">
    <input type="checkbox" name="chk19" id="chk19" value="19">
    <input type="checkbox" name="chk23" id="chk23" value="23">
    <input type="checkbox" name="chk28" id="chk28" value="28">
    </form>
    
    <script type="text/javascript">
    
    window.onload = function()
    {
        attachClickEvent();
    };
    
    function attachClickEvent(id)
    {
        var checkboxArr = document.getElementById('form1').getElementsByTagName("input");
    
        for (i=0; i<checkboxArr.length; i++)
        {
            if (checkboxArr[i].type == "checkbox")
            {
                checkboxArr[i].onclick = function()
                {
                    checkUncheckAll(this);
                };
            }
        }
    }
    
    function checkUncheckAll(obj)
    {
        var checkboxArr = document.getElementById('form1').getElementsByTagName("input");
        var numCheckboxes = 0;
        var numChecked = 0;
    
        for (i=1; i<checkboxArr.length; i++)
        {
            if (checkboxArr[i].type == "checkbox")
                numCheckboxes++;
        }
    
        if (obj.value == "all")
        {
            for (i=0; i<checkboxArr.length; i++)
            {
                if (checkboxArr[i].type == "checkbox" && obj.checked == true)
                    checkboxArr[i].checked = true;
                else
                    checkboxArr[i].checked = false;
            }
        }
        else
        {
            if (obj.checked == false)
            {
                checkboxArr[0].checked = false;
            }
            else
            {
                for (i=1; i<checkboxArr.length; i++)
                {
                    if (checkboxArr[i].type == "checkbox" && checkboxArr[i].checked == true)
                        numChecked++;
                }
    
                if (numChecked == numCheckboxes)
                    checkboxArr[0].checked = true;
            }
        }
    }
    
    </script>
    
    </body>
    
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, R.J. for your suggestion & the great code. It does exactly what I was looking out for.

    Could you please tell me why you have suggested not to use repetitive event handlers in the markup? I mean to say are there any disadvantages of that?

    Thanks a lot once again,

    Regards,

    Arpan

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #5
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    R.J., I would like to add a couple of features to the pages that displays the checkboxes. The HTML Form with the checkboxes also has a submit button. When the page loads for the first time, I want that button to be disabled. I could do that.

    Now what I want is irrespective of the number of checkboxes users check, the button should be enabled but if none of the checkboxes are checked or a user unchecks all the checkboxes, the button should get disabled. This is the 1st feature i want to implement.

    This is the 2nd feature I want to incorporate in the checkboxes page:

    The checkboxes page displays the start time & end time of various activites. Each of these activities is accompanied by a checkbox. Actually users come to this checkboxes page by clicking a date from a calendar in the previous page.

    The calendar displays all the dates of a month as links. Today is 18th May 2007. If a user clicks a date prior to today's date, then all the checkboxes as well as the submit button should be disabled when a user comes to the checkboxes page but the checkboxes should be enabled if he clicks a date which comes after today's date (though the button should be disabled since the user comes to the checkboxes page for the 1st time when none of the checkboxes are checked).

    If a user clicks today's date in the calendar, then the start time should be compared to the current time. Assume that the time when a user comes to the checkboxes page today is 10AM. Also assume that 3 activities are listed in the checkboxes page - the 1st one starts from 9AM, the 2nd one starts from 1PM & the 3rd one starts from 5PM. Under such circumstances, the 1st checkbox (whose start time is 9AM) should be disabled since 9AM has already elapsed (as the user comes to this page at 10AM) but the last 2 checkboxes should remain enabled. In other words, I want the checkboxes to be enabled or disabled according to the date the user has clicked in the calendar page.

    Can you please help me implement these features in the checkboxes page?

    The activities along with their checkbox & start and end times are displayed in a HTML table but I can populate the start times (as well as the end times) in hidden fields which I guess might make things easier for comparison.

    Asking for a bit too much from you, isn't it? Sorry for the inconvenience.

    Thanks,

    Regards,

    Arpan

  • #6
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    I had some free time, so I added the features you mentioned...

    In your HTML, it is important to note that in file "JS_check_checkboxes.html", you should include the start hour of the activity in the checkbox value attribute as a number between 0-23, like so:

    <p><input type="checkbox" name="chk23" id="chk23" value="17"> Activity #3 (5pm-10pm)</p>
    ...where 17 is the equivalent of 5pm...

    There are two files here - put both in the same folder and open "calendar.html"....

    Again, it is up to you to integrate these ideas with your current calendar program, and the dynamic creation of your checkboxes...

    An important thing to note is that this code will work (in some capacity) regardless of whether or not JS is disabled in your browser (theoretically, I didn;t test it without JS)....you should always code your JS with graceful degradation in mind...

    Please look at the code carefully, and try to see how it works...let me know if you have questions...

    calendar.html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html lang=en>
    
    <head>
    
    <title></title>
    
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    
    p
    {
        margin:15px 0;
    }
    
    </style>
    
    <body>
    
    <div id="calendar">
        <p><a href="JS_check_checkboxes.html">1 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">2 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">3 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">4 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">5 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">6 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">7 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">8 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">9 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">10 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">11 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">12 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">13 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">14 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">15 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">16 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">17 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">18 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">19 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">20 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">21 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">22 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">23 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">24 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">25 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">26 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">27 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">28 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">29 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">30 May 2007</a></p>
        <p><a href="JS_check_checkboxes.html">31 May 2007</a></p>
    </div>
    
    <script type="text/javascript">
    
    window.onload = function()
    {
        attachClickEvent2();
    };
    
    function attachClickEvent2(id)
    {
        var linkArr = document.getElementById('calendar').getElementsByTagName("a");
    
        for (i=0; i<linkArr.length; i++)
        {
            linkArr[i].onclick = function()
            {
                redirectURL(this.innerHTML);
                return false;
            };
        }
    }
    
    function redirectURL(dateString)
    {
        var URL = "JS_check_checkboxes.html?"+encodeURI(dateString);
        window.location.href = URL;
    }
    
    </script>
    
    </body>
    
    </html>
    JS_check_checkboxes.html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html lang=en>
    
    <head>
    
    <title></title>
    
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    
    p
    {
        margin:15px 0;
    }
    
    .line1
    {
        width:400px;
        padding:0 0 3px 0;
        border-bottom:1px solid #000;
    }
    
    .line2
    {
        width:400px;
        padding:3px 0 0 0;
        border-top:1px solid #000;
    }
    
    </style>
    
    <body>
    
    <form id="form1" method="post" action="">
    <!-- header checkbox -->
    <p class="line1"><input type="checkbox" name="chkAll" id="chkAll" value="all"> Toggle All Activities </p>
    
    <!-- checkboxes under the above checkbox -->
    <!-- the following checkboxes have been created dynamically -->
    <p><input type="checkbox" name="chk7" id="chk7" value="9"> Activity #1 (9am-12pm)</p>
    <p><input type="checkbox" name="chk19" id="chk19" value="13"> Activity #2 (1pm-5pm)</p>
    <p><input type="checkbox" name="chk23" id="chk23" value="17"> Activity #3 (5pm-10pm)</p>
    <p><input type="checkbox" name="chk23" id="chk23" value="22"> Activity #4 (10pm-2am)</p>
    <p class="line2"><input type="submit" name="submitBut" id="submitBut" value="Submit"></p>
    </form>
    
    <script type="text/javascript">
    
    window.onload = function()
    {
        attachClickEvent();
        disableFormInputs();
    };
    
    function attachClickEvent(id)
    {
        var checkboxArr = document.getElementById('form1').getElementsByTagName("input");
    
        for (i=0; i<checkboxArr.length; i++)
        {
            if (checkboxArr[i].type == "checkbox")
            {
                checkboxArr[i].onclick = function()
                {
                    checkUncheckAll(this);
                };
            }
        }
    }
    
    function checkUncheckAll(obj)
    {
        var checkboxArr = document.getElementById('form1').getElementsByTagName("input");
        var numCheckboxes = 0;
        var numChecked = 0;
        var submitBut = document.getElementById('submitBut');
    
        for (i=1; i<checkboxArr.length; i++)
        {
            if (checkboxArr[i].type == "checkbox" && checkboxArr[i].disabled == false)
                numCheckboxes++;
        }
    
        if (obj.value == "all")
        {
            for (i=0; i<checkboxArr.length; i++)
            {
                if (checkboxArr[i].type == "checkbox" && checkboxArr[i].disabled == false)
                {
                    if (obj.checked == true)
                        checkboxArr[i].checked = true;
                    else
                        checkboxArr[i].checked = false;
                }
            }
    
            if (obj.checked == true)
                submitBut.disabled = false;
            else
                submitBut.disabled = true;
        }
        else
        {
            if (obj.checked == false)
            {
                checkboxArr[0].checked = false;
    
                for (i=1; i<checkboxArr.length; i++)
                {
                    if (checkboxArr[i].type == "checkbox" && checkboxArr[i].checked == false && checkboxArr[i].disabled == false)
                        numChecked++;
                }
    
                if (numChecked == numCheckboxes)
                    submitBut.disabled = true;
            }
            else
            {
                for (i=1; i<checkboxArr.length; i++)
                {
                    if (checkboxArr[i].type == "checkbox" && checkboxArr[i].checked == true)
                        numChecked++;
                }
    
                if (numChecked == numCheckboxes)
                    checkboxArr[0].checked = true;
    
                submitBut.disabled = false;
            }
        }
    }
    
    function disableFormInputs()
    {
        var checkboxArr = document.getElementById('form1').getElementsByTagName("input");
        var numCheckboxes = 0;
        var numDisabled = 0;
        var submitBut = document.getElementById('submitBut');
    
        for (i=1; i<checkboxArr.length; i++)
            if (checkboxArr[i].type == "checkbox") numCheckboxes++;
    
        var monthArr = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
        var myDate = new Date();
        var hours = myDate.getHours();
        var day = myDate.getDate();
        var month = myDate.getMonth();
        var year = myDate.getFullYear();
    
        var URL = decodeURI(window.location.search);
        var queryStr = URL.split("?")
        var dateStrArr = queryStr[1].split(" ");
    
        for (j=0; j<monthArr.length; j++)
            if (monthArr[j] == dateStrArr[1]) var monthNum = j;
    
        if ((parseInt(dateStrArr[2]) < year) || (parseInt(dateStrArr[2]) == year && monthNum < month) || (parseInt(dateStrArr[2]) == year && monthNum == month && parseInt(dateStrArr[0]) < day))
        {
            for (i=0; i<checkboxArr.length; i++)
            {
                if (checkboxArr[i].type == "checkbox")
                    checkboxArr[i].disabled = true;
            }
        }
        else if (parseInt(dateStrArr[2]) == year && monthNum == month && parseInt(dateStrArr[0]) == day)
        {
            for (i=1; i<checkboxArr.length; i++)
            {
                if (checkboxArr[i].type == "checkbox" && parseInt(checkboxArr[i].value) <= hours)
                {
                        checkboxArr[i].disabled = true;
                        numDisabled++;
                }
            }
    
            if (numDisabled == numCheckboxes)
                    checkboxArr[0].disabled = true;
        }
        submitBut.disabled = true;
    }
    
    </script>
    
    </body>
    
    </html>
    You could also go one step further, and put all of your JS functions into an external .js file, and include the file in each HTML file...
    Last edited by chump2877; 05-19-2007 at 04:17 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #7
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot, R.J. for your invaluable inputs. As far as disabling/enabling the submit button in the checkboxes page is concerned, I could implement that using your code but there's a problem with enabling/disabling the checkboxes.

    I had mentioned in my very first post that the names of the checkboxes will be different but later I decided to keep the name of all the checkboxes the same & instead set the value of the checkboxes to different values (which will be unique). But you have suggested to assign the start time as the values for the checkboxes which I probably can't do since that would mean a bucket full of changes in the ASP page where the user is taken to when he submits the Form with the checkboxes (the ASP page has been set as the attribute value of the action attribute in the Form tag). This is the problem with the checkboxes page.

    Moreover, is it necessary to add the JavaScript code that you have shown in Calendar.html? The reason I am asking this is because I need to add more name-value pairs to the checkboxes page as querystrings & one such name-value querystring pair is the date clicked by the user. So as it is, the checkboxes page will get the date from the querystring. In the code you have shown in Calendar.html, you are passing just the date (& not the month & year) to the checkboxes page. For e.g. if a user clicks May 27th, 2007 in the calendar page, he is taken to

    CheckboxesPage.asp?27

    I need to pass more name-value pairs as querystrings which include the entire date along with month & year not separately but as a normal date. So if a user clicks 27th May 2007 in the calendar page, he will be taken to

    CheckboxesPage.asp?name1=value1&dDate=5/27/2007

    So can't JavaScript extract just the date (which is 27 in this case) from the entire date? Then there won't be any need for me to include the JavaScript code you have shown in Calendar.html in the calendar page.

    Thanks once again,

    Regards,

    Arpan

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,045
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by arpan_de View Post
    I need to pass more name-value pairs as querystrings which include the entire date along with month & year not separately but as a normal date. So if a user clicks 27th May 2007 in the calendar page, he will be taken to

    CheckboxesPage.asp?name1=value1&dDate=5/27/2007

    So can't JavaScript extract just the date (which is 27 in this case) from the entire date? Then there won't be any need for me to include the JavaScript code you have shown in Calendar.html in the calendar page.
    You can do that in ASP itself.
    Code:
    <%
    dim dt, dy
    dt = Request.QueryString("dDate")
    if IsDate(dt) then
      dy = Day(CDate(dt))
      Response.Write("date:" & dy)
    end if
    %>

  • #9
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    You can do that in ASP itself.
    Code:
    <%
    dim dt, dy
    dt = Request.QueryString("dDate")
    if IsDate(dt) then
      dy = Day(CDate(dt))
      Response.Write("date:" & dy)
    end if
    %>
    I need to use the date in JavaScript code; so why use ASP though the date can be passed to the JavaScript code by ASP? Anyway, I have managed to extract just the date by using the JavaScript split function. It goes like this:

    Code:
    var strURL=decodeURI(window.location.search);
    var queryStr=strURL.split("/")
    alert(queryStr[1])

  • #10
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    You posted this in the JavaScript forum, so I gave you an all-JS solution...

    But you are better off manipulating all of your dates server side, instead of client side....what if JS is disabled? In fact, I would code the bulk of this application with ASP or PHP...

    Almost the entire JS disableFormInputs() function could be redone using server side code, to ensure usability..

    Remember, JS is just for the extras in a web site/app, not the essentials....for the essentials (the code needed to make the page function properly), use server side code...

    And always use server side validation in tandem with JS validation, (again) in case JS is disabled...

    Edit: Also, using server side code instead of the JS disableFormInputs() function, you could eliminate your checkboxes' values problem because the starting time/hour values no longer have to appear in the HTML markup...
    Last edited by chump2877; 05-20-2007 at 06:40 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #11
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, R.J....I want the JavaScript code only to disable/enable the checkboxes & the submit button. Unlike ASP.NET which has events like OnCheckChanged for checkboxes, OnChange for textboxes, OnClick for buttons etc., ASP doesn't have any such events for Form elements.

    Yes, a button can be disabled when a page is visited for the 1st time for which these 2 HTML tags will suffice:

    Code:
    <input type=text name="text1" disabled>
    or

    Code:
    <input type=text name="text1" readonly>
    But you can't enable/disable a submit button (or, for that matter, even a normal button) when any of the checkboxes is checked using ASP unless you force the page to submit back to itself but for posting the page back to itself (without using the conventional submit button), you have to use JavaScript. For e.g. make a checkbox call a JavaScript function on the onClick event of the checkbox & then add the JavaScript code to post the page back to itself something like this:

    Code:
    <script language="JavaScript">
    function postBack(){
        document.forms[0].action="CheckboxesPage.asp"
        document.forms[0].method="post"
        document.forms[0].submit()
    }
    </script>
    <%
        Dim strChecks
        strChecks=Request.Form("chk")
    %>
    <form action="NextPage.asp" method=post>
    <input type=checkbox name="chk" value="9" onClick="postBack()">
    <%
        'if strChecks is just an empty string, which will be the case when a user comes
        'to the checkboxes page for the first time, keep the submit button disabled
        If(strChecks="") Then
    %>
    <input type=submit name="btn" value="SUBMIT" disabled>
    <%
        'if strChecks is not an empty string, that means atleast one checkbox has been checked
        'by the user which is why the page posted back to itself; so enable the submit button
        Else
    %>
    <input type=submit name="btn" value="SUBMIT">
    <%
        End If
    %>
    But this will involve additional calls to the server & if a user turns out to be fickle-minded, then just imagine the no. of additional calls to the server. This is the reason why I have posted my query in this JavaScript forum since I wanted a JavaScript solution.

    Also some browsers like Netscape don't support this disabled property. Hence a user using Netscape will still be able to check/uncheck the checkbox. Of course, one workaround to this is to use the readonly property instead of the disabled property. Moreover I have been into website development since last 8 years or so (don't add JavaScript during this period though I intermittently use JavaScript which is why my JavaScript isn't strong enough) but I haven't come across any internet surfer who has disabled JavaScript in his browser. In fact, most people aren't even aware of the fact that JavaScript can be turned off from the browser!

    The checkboxes can be enabled/disabled according to the date in the same manner but it won't involve any extra calls to the server since the checkboxes page gets the date from the calendar page & for taking users from one page to another, it is the server which serves the page back to the browser. I don't know why this didn't strike me earlier before I posted my follow-up post.

    Anyway, THANKS A LOT, R.J., for all the help & co-operation you have extended towards me. You definitely must have invested quite a lot of your time & energy to help me out for which I am highly obliged to you. I genuinely appreciate efforts from the bottom of my heart.

    Regards,

    Arpan

  • #12
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A mistake in my previous post - the readonly attribute works only with text, password & file Form elements; not with checkboxes, radios, select lists, buttons, submit buttons.....

  • #13
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    I want the JavaScript code only to disable/enable the checkboxes & the submit button
    You only need JS to disable the submit button...You can use server side code (ASP or PHP) to disable the checkboxes. Go to this link. I reconfigured the app to use as little JS as possible. Take a look at the JS code and see if you find any code that disables any checkbox. You won't find any because all of the checkboxes (if they denote events that have already occurred) are disabled with PHP.

    Also some browsers like Netscape don't support this disabled property. Hence a user using Netscape will still be able to check/uncheck the checkbox.
    If that is true, and I don;t know for sure because I don;t test my code in Netscape any more (I test in FF, IE 6, IE 7, and Opera 9 -- the main browsers in use today), then simply use server side code to disable dates and times that are in the past. Then no one will ever be able to RSVP for an event that has already occurred. Again, refer to this link to see what I'm talking about.

    Remember, "graceful degradation" dictates that your code should work with or without JS enabled. If you disable JS in your browser at this link, you'll see that the app still works. So, in fact, you don;t need JS for anything.

    I haven't come across any internet surfer who has disabled JavaScript in his browser. In fact, most people aren't even aware of the fact that JavaScript can be turned off from the browser!
    That is a trap that many "web developers" fall into. First of all, FireFox has an extension that actually turns off JS in ALL sites except for the sites that you specify. Link to the FF extension. The reason for wanting to turn of JS in your browser is generally for security reasons. In an ideal world, everyone would code JS the right way, but because they don't, JS introduces the possibility of all kinds of unintentional (and sometimes intentional) security problems. This applies to individuals and to corporations and everyone in-between.

    Just because you haven;t encountered anyone who disables JS does not mean that people aren;t doing it. And for the people who turn off JS, don;t you want them to have the same or almost the same experience as JS users? Web development is all about "accessibility". Just like we test our code in different browsers to maintain accessibility, we must also test our code with JS on and off.
    Last edited by chump2877; 05-20-2007 at 10:09 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

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