Javascript DOM Form CheckBox

Description

Javascript DOM Form CheckBox

View in separate window 

<!DOCTYPE html> 
<html lang="en"> 
<body> 
      <form action="" name="form1"> 
          <p> 
              Tick all of the components you want included on your computer 
          </p> 
          <p> 
              <label for="chkDVD">DVD-ROM</label> 
              <input type="checkbox" id="chkDVD" name="chkDVD" value="DVD-ROM" /> 
          </p> 
          <p> 
              <label for="chkBluRay">Blu-ray</label> 

            <input type="checkbox" id="chkBluRay" name="chkBluRay" value="Blu-ray" /> 
        </p> 

        <p> 
            Select the processor speed you require 
        </p> 
        <p> 
            <input type="radio" name="radCpuSpeed" checked="checked" value="3.2 ghz" /> 
            <label>3.2 GHz</label> 
            <input type="radio" name="radCpuSpeed" value="3.7 ghz" /> 
            <label>3.7 GHz</label> 
            <input type="radio" name="radCpuSpeed" value="4.0 ghz" /> 
            <label>4.0 GHz</label> 
        </p> 
        <input type="button" value="Check form" name="btnCheck" /> 
        // w ww  .  j av a  2s.c o m
        <p id="demo"></p>
    </form> 
    <script> 
        let myForm = document.form1; 

        function getSelectedSpeedValue() { 
            let radios = myForm.radCpuSpeed; 

            for (let index = 0; index < radios.length; index++) { 
                if (radios[index].checked) { 
                    return radios[index].value; 
                } 
            } 

            return ""; 
        } 

        function findIndexOfSpeed(radio) { 
            let radios = myForm.radCpuSpeed; 

            for (let index = 0; index < radios.length; index++) { 
                if (radios[index] == radio) { 
                    return index; 
                } 
            } 

            return -1; 
        } 

        function radCpuSpeedClick(e) { 
            let radIndex = findIndexOfSpeed(e.target); 

            if (radIndex == 1) { 
                e.preventDefault(); 
                document.getElementById("demo").innerHTML = "Sorry that processor speed is currently unavailable"; 

                // to fix an issue with IE 
                myForm.radCpuSpeed[0].checked = true; 
            } 
        } 

        function btnCheckClick() { 
            let numberOfControls = myForm.length; 
            let compSpec = "Your chosen processor speed is "; 
            compSpec = compSpec + getSelectedSpeedValue(); 
            compSpec = compSpec + "\nWith the following additional components:\n"; 

            for (let index = 0; index < numberOfControls; index++) { 
                let element = myForm[index]; 
                if (element.type == "checkbox") { 
                    if (element.checked) { 
                        compSpec = compSpec + element.value + "\n"; 
                    } 
                } 
            } 

            document.getElementById("demo").innerHTML =  compSpec; 
        } 

        for (let index = 0; index < myForm.radCpuSpeed.length; index++) { 
            myForm.radCpuSpeed[index].addEventListener("click", radCpuSpeedClick); 
        } 

        myForm.btnCheck.addEventListener("click", btnCheckClick); 
    </script> 
</body> 
</html>



PreviousNext

Related