Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        DOM Basics
    </title>
​
</head>
​
<body>
    <form onsubmit="validate()">
        <h1>
            What Vehiacles do you own(Checkbox Example)
        </h1>
        <input class="someCheckBox" type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
        <input class="someCheckBox" type="checkbox" name="vehicle2" value="Car"> I have a car<br>
        <input class="someCheckBox" type="checkbox" name="vehicle3" value="Boat" checked> I have a boat<br>
​
        <h1>
            Primary Mode of transportation(Radio Example)
        </h1>
        <input class="someRadio" type="radio" name="vehicle" value="Bike"> I have a bike<br>
        <input class="someRadio" type="radio" name="vehicle" value="Car"> I have a car<br>
        <input class="someRadio" type="radio" name="vehicle" value="Boat" checked> I have a boat<br>
​
        <h1>
            This is going to be the button for validation
        </h1>
        <input class="someCheckBox" type="submit" value="Submit">
​
    </form>
</body>
​
<script>
    function validate() {
        var CurrentSelected = [];
        //Doing the same thing for checkBox selection
        var GetAllCheckBoxNodes = document.getElementsByClassName("someCheckBox");
        var InputNodesSize = GetAllCheckBoxNodes.length;
        for (var i = 0; i < InputNodesSize; i++) {
            var CurrentCheckBox = GetAllCheckBoxNodes[i];
            if (CurrentCheckBox.checked) {
                CurrentSelected.push(CurrentCheckBox.value);
            }
        }
        //Doing the same thing for radio selection
        var GetAllRadioNodes = document.getElementsByClassName("someRadio");
        var GetAllRadioNodesLength = GetAllRadioNodes.length;
        for (var i = 0; i < GetAllRadioNodesLength; i++) {
            var CurrentRadioNode = GetAllRadioNodes[i];
            if (CurrentRadioNode.checked) {
                CurrentSelected.push(CurrentRadioNode.value);
            }
        }
        //Displaying what is Selected...
        CurrentSelected.forEach(item => { console.log(item); });
    }
</script>
​
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
MrFinipro
0viewers