• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 581
  • Last Modified:

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">
0
whaleyk
Asked:
whaleyk
1 Solution
 
mvan01Commented:
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now