Search code examples
javascripthtmlinputsubmitchecked

is it possible in html to unhide a submit button on the 2nd input box thats checked but not the fist box checked


Here's what I'm working on! i cant get it to show the submit button on the 2nd checkbox checked - it works just fine on the 1st one checked but not the 2nd one - i want it to stay hidden until a 2nd checkbox is selected -i hope that makes sense - is there a reason why i cant get this to run on other browsers??????? can anyone help me please.

<!DOCTYPE html>
<html lang="en">
  <head>
  
    
<style>
    p {
    font-family:'Lato', sans-serif;
}
.button-orange {
    text-shadow: 2px 2px #321;
    float:left;
    width: 100%;
    border: #fbfbfb solid 4px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 3px #999;
    cursor:pointer;
    background-color: #E74700;
    color:white;
    font-size:34px;
    padding-top:22px;
    padding-bottom:22px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin-top:-4px;
    font-weight:700;
}
.button-orange:hover {
    background-color: red;
}
.button-grey {
    text-shadow: 2px 2px #321;
    float:left;
    width: 100%;
    border: #fbfbfb solid 4px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 3px #999;
    cursor:pointer;
    background-color: #999;
    color:white;
    font-size:24px;
    padding-top:22px;
    padding-bottom:22px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin-top:-4px;
    font-weight:700;
}
</style>
  </head>
  <body>
  <p>is there a way to unhide the submit button when any 2nd number is checked???</p>
<form action="/action_page.php" method="get">
    <input type="checkbox" value="checkbox" onchange="checkedChanged(this)" />01
    <input type="checkbox" value="checkbox" onchange="checkedChanged(this)" />02
    <input type="checkbox" value="checkbox" onchange="checkedChanged(this)" />03
    <input type="checkbox" value="checkbox" onchange="checkedChanged(this)" />04
    <br><br><br>
    <input disabled="disabled" type="button" id="accept" class="button-grey" value=" SUBMIT " 
 onclick="getElementById('accept')">
     </form>
    <script>
function checkedChanged(element) {
 
    var myLayer = document.getElementById('accept');
        if (element.checked == true) {
            myLayer.className = "button-orange";
            myLayer.disabled = "";
        } else {
            myLayer.className = "button-grey";
            myLayer.disabled = "disabled";};}
        
    var checked_val = "null";
    $(".no_option").on("click", function(){
      if($(this).val() == checked_val){
        $('input[name=group][value=null]').prop("checked",true);
        checked_val = "null";
      }else{
        checked_val = $(this).val();
      }

});
  </script>
  </body>
</html>

Solution

  • Test if at least two checkboxes are selected

    code pen link https://codepen.io/pranaynailwal/pen/oNBXWgR

    function checkedChanged() {
      var inputs = document.getElementsByTagName("input");
      var myLayer = document.getElementById('accept');
      var count = 0;
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == "checkbox" && inputs[i].checked) {
          count++;
        }
      }
      if (count >= 2) {
        myLayer.className = "button-orange";
        myLayer.disabled = "";
      } else {
        myLayer.className = "button-grey";
        myLayer.disabled = "disabled";
      }
    }