checkbox if checked hide submit button and display message

Hello experts, i've been trying to modify this but no luck.  Currently the checkbox "turns on" the button, i want the button displayed unless user checks the box, at which point button should disapear and be replaced with a message.

Thanks so much,
K

=========================================================================
 <strong>Is this part of the commission hierarchy?</strong> <br>
Check if YES <input name="commission" type="checkbox" value="y" onclick="document.getElementById('btnSubmit').style.display=(this.checked?'inline':'none')">  <br><br>
<!---If yes, display an alert that they cannot submit and hide the button below. --->
<input style="display:none" id="btnSubmit" type="submit" value="Continue >>" name="btnSubmit">
whaleykAsked:
Who is Participating?
 
mvan01Connect With a Mentor Commented:
Hi whaleyk,

Try this:

<strong>Is this part of the commission hierarchy?</strong> <br>
Check if YES <input name="commission" type="checkbox" value="y" onclick="document.getElementById('btnSubmit').style.display=(this.checked?'none':'inline');document.getElementById('btnSubmitMsg').style.display=(this.checked?'inline':'none')">  <br><br>
<!---If yes, display an alert that they cannot submit and hide the button below. --->
<input style="display:inline" id="btnSubmit" type="submit" value="Continue >>" name="btnSubmit">
<span style="display:none" id="btnSubmitMsg">You cannot submit!</span>

Peace and joy.  mvan
0
 
hemebondCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
      <head>
            <title>Disable submit button with checkbox</title>
      </head>
      <body>
            <form action="" method="post">
                  <fieldset>
                        <div>
                              <label for="commission">This is part of the commission hierarchy</label>
                              <input id="commission" name="commission" type="checkbox" value="y">
                        </div>
                        <input id="commission-submit" type="submit" value="continue">
                  </fieldset>
            </form>
            
            <script type="text/javascript">
                  var checkbox = document.getElementById('commission');
                  checkbox.addEventListener('click',toggleSubmit,false);
                  
                  function toggleSubmit()
                  {
                        document.getElementById('commission-submit').disabled = checkbox.checked;
                  }
            </script>
      </body>
</html>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.