Java Script Help Auto Enable/Disable on Load

Question

fabzster 0 Light Poster

9 Years Ago

Hi

I am having issues with a function that I created, I execute the below function on load on another page.
I would like it to enable all the inputs if a check box is selected or disable all inputes if it is not.

This works but it only works wih the first checkbox, so it's as if the code does not hit the next If Statement, If I move the Dep2 If statement above one then 2 it works an all others dont

//This function is used on the loading of the page so that if any of the dependant check boxes are ticked that the forms stay enabled
function autoenabledisableinput()
    {
             document.getElementById("DepID").style.display= 'none'; //hide div element on load


            if(document.getElementById('Dep1').checked)
                    { 
                        document.getElementById("DepID").style.display = ''; //show element when clicked

                        document.getElementById('Dep1Name').disabled = false;
                        document.getElementById('Dep1Surname').disabled = false;
                        document.getElementById('Dep1IDNumber').disabled = false;
                        document.getElementById('Dep1DOB').disabled = false;
                        document.getElementById('Dep1Passport').disabled = false;  
                    }

            if(document.getElementById('Dep2').checked)
                    {
                        document.getElementById("DepID").style.display = ''; //show element when clicked

                        document.getElementById('Dep2Name').disabled = false;
                        document.getElementById('Dep2Surname').disabled = false;
                        document.getElementById('Dep2IDNumber').disabled = false;
                        document.getElementById('Dep2DOB').disabled = false;
                        document.getElementById('Dep2Passport').disabled = false;  
                    }
            if(document.getElementById('Dep3').checked)
                    {
                        document.getElementById("DepID").style.display = ''; //show element when clicked

                        document.getElementById('Dep3Name').disabled = false;
                        document.getElementById('Dep3Surname').disabled = false;
                        document.getElementById('Dep3IDNumber').disabled = false;
                        document.getElementById('Dep3DOB').disabled = false;
                        document.getElementById('Dep3Passport').disabled = false;  
                    }
            if(document.getElementById('Dep4').checked)
                    {
                        document.getElementById("DepID").style.display = ''; //show element when clicked

                        document.getElementById('Dep4Name').disabled = false;
                        document.getElementById('Dep4Surname').disabled = false;
                        document.getElementById('Dep4IDNumber').disabled = false;
                        document.getElementById('Dep4DOB').disabled = false;
                        document.getElementById('Dep4Passport').disabled = false;  
                    }
            if(document.getElementById('Dep5').checked)
                    {
                        document.getElementById("DepID").style.display = ''; //show element when clicked

                        document.getElementById('Dep5Name').disabled = false;
                        document.getElementById('Dep5Surname').disabled = false;
                        document.getElementById('Dep5IDNumber').disabled = false;
                        document.getElementById('Dep5DOB').disabled = false;
                        document.getElementById('Dep5Passport').disabled = false;  
                    }
            if(document.getElementById('Dep6').checked)
                    {
                        document.getElementById("DepID").style.display = ''; //show element when clicked

                        document.getElementById('Dep6Name').disabled = false;
                        document.getElementById('Dep6Surname').disabled = false;
                        document.getElementById('Dep6IDNumber').disabled = false;
                        document.getElementById('Dep6DOB').disabled = false;
                        document.getElementById('Dep6Passport').disabled = false;  
                    }
        }

I would appreciate the assistance

java javascript

3 Contributors
4 Replies
356 Views
3 Weeks Discussion Span
Latest Post 9 Years Ago Latest Post by Dhugalmac

All 4 Replies

mangel.murti 5 Helps you in some way

9 Years Ago

As i understand you need to call function onclick of checkboxes. hope its help you.

<html>
    <head>
        <title>Angular JS Controller</title>
    </head>
    <body onload="autoenabledisableinput()">
        <div id="DepID">
             <input type="text" id="Dep1Name" name="Dep1Name">
             <input type="text" id="Dep1Surname" name="Dep1Surname">

             <input type="text" id="Dep2Name" name="Dep2Name">
             <input type="text" id="Dep2Surname" name="Dep2Surname">

             <input type="text" id="Dep3Name" name="Dep3Name">
             <input type="text" id="Dep3Surname" name="Dep3Surname">
        </div>

        <input type="checkbox" id="Dep1" name="Dep1" onclick="autoenabledisableinput();">
        <input type="checkbox" id="Dep2" name="Dep2" onclick="autoenabledisableinput();">
        <input type="checkbox" id="Dep3" name="Dep3" onclick="autoenabledisableinput();">
        <script>
            //This function is used on the loading of the page so that if any of the dependant check boxes are ticked that the forms stay enabled
            function autoenabledisableinput()
            {
                document.getElementById("DepID").style.display = 'none'; //hide div element on load


                if (document.getElementById('Dep1').checked)
                {

                    document.getElementById("DepID").style.display = ''; //show element when clicked

                    document.getElementById('Dep1Name').disabled = false;
                    document.getElementById('Dep1Surname').disabled = false;

                }

                if (document.getElementById('Dep2').checked)
                {
                    document.getElementById("DepID").style.display = ''; //show element when clicked

                    document.getElementById('Dep2Name').disabled = false;
                    document.getElementById('Dep2Surname').disabled = false;

                }
                if (document.getElementById('Dep3').checked)
                {
                    document.getElementById("DepID").style.display = ''; //show element when clicked

                    document.getElementById('Dep3Name').disabled = false;
                    document.getElementById('Dep3Surname').disabled = false;

                }
            }
        </script>
    </body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

fabzster 0 Light Poster · Answer 1 · 2014-12-20T03:17:23+00:00

many thanks fro the reply.

I already call another function "enabledisableinput" which enables or disables the inputs based on clicking the tickbox.

function enabledisableinput(Checkbox,Name,Surname,IDNumber,DOB,Passport)
    {
        if(document.getElementById(Checkbox).checked)
                    {   
                        //enables the inputs when tickbox is checked
                        document.getElementById(Name).disabled = false;
                        document.getElementById(Surname).disabled = false;
                        document.getElementById(IDNumber).disabled = false;
                        document.getElementById(DOB).disabled = false;
                        document.getElementById(Passport).disabled = false;
                    }
                else
                    {
                       //Disables the inputs if checkbox is unticked
                        document.getElementById(Name).disabled = true;
                        document.getElementById(Surname).disabled = true;
                        document.getElementById(IDNumber).disabled = true;
                        document.getElementById(DOB).disabled = true;
                        document.getElementById(Passport).disabled = true;


                        //This clears the inputs for the relevant dependant when the checkbox is unticked 
                        document.getElementById(Name).value = '';
                        document.getElementById(Surname).value = '';
                        document.getElementById(IDNumber).value = '';
                        document.getElementById(DOB).value = '';
                        document.getElementById(Passport).value = '';

                    }

        }

So Basically I need to enable/disable the inputs by ticking the check box and also if the page loads it needs to check that if the box is ticked and either enable or disable the input

see html below

<tr>
            <tr><td class="DepTitle"><input type="checkbox" tabindex=18  onclick="enabledisableinput('Dep1','Dep1Name','Dep1Surname','Dep1IDNumber','Dep1DOB','Dep1Passport')" id="Dep1" name="Dep1" value="1" <?php if($_SESSION['Dep1'] == 1) print "checked='checked'"?> >Dependant 1</td></tr>    
            <td class="<?php print $Dep1Name_error;?>">Dependant 1 Name</td>
            <td><input name="Dep1Name" type="text" id="Dep1Name" tabindex=19 style="color: <?php print $TextColour;?>;" value="<?php print $_SESSION['Dep1Name'] ;?>" size="30" disabled/></td>

            <td class="<?php print $Dep1Surname_error;?>">Dependant 1 Surname</td>
            <td><input name="Dep1Surname" type="text" id="Dep1Surname" tabindex=20 style="color: <?php print $TextColour;?>;" value="<?php print $_SESSION['Dep1Surname'] ;?>" size="30" disabled /></td>

        </tr>

        <tr>
            <td class="<?php print $Dep1IDNumber_error;?>">Identity Number</td>
            <td><input name="Dep1IDNumber" type="text" id="Dep1IDNumber" tabindex=21 style="color: <?php print $TextColour;?>;" value="<?php print $_SESSION['Dep1IDNumber'] ;?>" size="30" disabled/></td>

            <td class="<?php print $Dep1DOB_error;?>">Date Of Birth</td>
            <td><input name="Dep1DOB" type="text" id="Dep1DOB" tabindex=22 style="color: <?php print $TextColour;?>;" value="<?php print $_SESSION['Dep1DOB'] ;?>" size="30" readonly disabled /><img src="./images/cal.gif" onclick="javascript:NewCssCal('Dep1DOB','yyyyMMdd','dropdown',false,'24',true)" style="cursor:pointer"/></td>
        </tr>

fabzster 0 Light Poster · Answer 2 · 2014-12-24T06:07:29+00:00

fabzster 0 Light Poster

9 Years Ago

can anyone else offer some assistance?

Dhugalmac 0 Newbie Poster · Answer 3 · 2015-01-09T21:04:36+00:00

Perhaps the following can help (note, not all code shown)...

var elemInputs = document.getElementsByTagName("input");
for(var i = 0; i < (elemInputs.length-1); i++) 
{
 var inputField = elemInputs[i].name;
 if (document.getElementById(inputField).checked) {
   // Checked
   document.getElementById(priceField).disabled = false;  // ENABLE the Price Field
   document.getElementById(priceField).style.display = '';  // SHOW the Price Field
 } else {
   // NOT Checked
   document.getElementById(priceField).disabled = true;  // DISABLE the Price Field
   document.getElementById(priceField).style.display = 'none';  // HIDE the Price Field
 }
}

Java Script Help Auto Enable/Disable on Load

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers