If Statement Checkbox Modal

Question

Code below

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />

<div class="w3-col" id="login" style="width:300px">
  Subscribe to receive more interesting science experiments
  <p></p>
  Email  
  <input type="email" name="email" id="email">
  <p>I agree to the Terms and Conditions
    <input type="checkbox" />
    <button onclick="document.getElementById('id01').style.display='block'" class="w3-grey">Sign Up</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">&times;</span> 
        <p>Thank you for signing up!</p>
        <p>We will deliver the monthly experiment on the 1st of every Month</p>
      </div>
    </div>
  </div>
</div>

So i am trying to add an IF statement to the checkbox so that if its not ticked, the modal will come up with an error box instead of confirmation

Thanks in advance

Answer 1

The logic is that when the user clicks on the button Sign Up you need to check if the checkbox (I was marked as #agree) is checked. If so, display the modal. Read the code and let me know if something not clear.

function subscribe() {
  var cb = document.getElementById('agree');
  if (cb.checked) {
      document.getElementById('id01').style.display='block';
  }
  else {
    alert('please agree to the terms');  
  }
}

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />

<div class="w3-col" id="login" style="width:300px">
  Subscribe to receive more interesting science experiments
  <p></p>
  Email  
  <input type="email" name="email" id="email">
  <p>I agree to the Terms and Conditions
    <input type="checkbox" id="agree" />
    <button onclick="subscribe()" class="w3-grey">Sign Up</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">&times;</span> 
        <p>Thank you for signing up!</p>
        <p>We will deliver the monthly experiment on the 1st of every Month</p>
      </div>
    </div>
  </div>
</div>