Tick checkbox then submit and then pop up window

Question

I will appreciate if somebody could help me to find how to solve out one problem, probably I need very simple thing but I don't know how to put it in one, so what I need - Section which include tick box, then button submit, but if you don't tick the check box and push the button appear window which says You must do....,

I've done it but I need this

but if you tick and push button should smoothly appear pop up window with just text information! I don't know how to get that, This is thats section with checkbox and button

    <form name="form" method="post" action="#" onSubmit="return checkme();">
    <input type="checkbox" name="agree" value="agree_terms" class="terms">
    &nbsp;I&acute;ve read terms and conditions and I&acute;m ready to shop
    <input type="submit" name="submit" value="" class="submit">
    </form>

and this is javascript

    function checkme() {
        missinginfo = "";
        if (!document.form.agree.checked) {
            missinginfo += "You must agree to the Terms and Conditions";
        }
        if (missinginfo != "") {
            missinginfo ="" +
            "\n" +
            missinginfo + "" +
            "\n Please tick the box and try again.";
            alert(missinginfo);
            return false;
        }
        else {
            return true;
        }
    }

I tried in Different Way

    <body>
    <title>LIGHTBOX EXAMPLE</title>
    <style>
    .black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    }
    .white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
    }
    </style>
    </head>
    <body>


    <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)"
    onclick = "document.getElementById('light').style.display='block';        document.getElementById('fade').style.display='block'">here</a></p>

    <div id="light" class="white_content">This is the lightbox content. <a href =                 "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';                document.getElementById('fade').style.display='none'">Close</a></div>
    <div id="fade" class="black_overlay"></div>
    </body>
    </html>

But when I tick check box on the background appear window with the content but I need pop up window appear only after when I tick the box and push the button

While I understand what you want. You haven't given us much here. Can you at least show us the HTML code you have now? — Codeguy007, Nov 15 '12 at 12:45
`missinginfo += "You must agree to the Terms and Conditions";` is only used to trigger the send if it exists. Should `missinginfo =""` be `missinginfo +=""`? either way it's redundant. I don't know you have two if statements when one would do. Do you have more code? also `!=` should be `!==' — Codeguy007, Nov 15 '12 at 13:34

score 2 · Accepted Answer · answered Nov 15 '12 at 13:48

"f you tick and push button should smoothly appear pop up window with just text information" - you've almost did it. Just add alert to the second branch. Try this code:

<!DOCTYPE html>
<html>
  <!-- [[[ head -->

  <head>
    <title>element</title>
<script type="text/javascript">
  function checkme() {
        if (!document.form.agree.checked) {
            missinginfo = "You must agree to the Terms and Conditions\n Please tick the box and try again.";
            alert(missinginfo);
            return false;
        }
        else {
            alert("Text information");
            return true;
        }
    }
</script>
  </head>
  <!-- ]]] -->

  <body>
    <form name="form" method="post" action="#" onSubmit="return checkme();">
      <input type="checkbox" name="agree" id="agree" value="agree_terms" class="terms">
      <label for="agree">&nbsp;I&acute;ve read terms and conditions and I&acute;m ready to shop</label>
      <input type="submit" name="submit" value="Submit" class="submit">
    </form>
  </body>
</html>

Thank you very much it helped me a lot, just I will try to style this windows, or it's not possible? — Aleksandrs Krasnovskis, Nov 15 '12 at 14:03
Look here: http://stackoverflow.com/questions/7853130/how-to-change-the-style-of-alert-box — user4035, Nov 15 '12 at 14:08
One questions for just in case, have you got any javascript solution with smooth po up and manual styling? — Aleksandrs Krasnovskis, Nov 15 '12 at 14:18
No. But try jQuery UI. Look into this thread: http://stackoverflow.com/questions/11528845/how-do-i-style-the-alert-box-with-css — user4035, Nov 15 '12 at 14:39

Tick checkbox then submit and then pop up window

1 Answers1

Linked