Blocking links in a DIV unless checkbox is checked

**donatello** · 08-08-2012 11:17 AM

What I would like to do is to force users to accept a "TOS" (Terms of Service) before allowing them to download files.

I have this working with forms & buttons here:
http://jsfiddle.net/LFqcJ/

Here it is again, working in a different fashion.
http://jsfiddle.net/QdyXe/2/
(This way is less desirable as the button simply fades and does not work - the user is not prompted [as above] to action and is left to guess why the link will not work.)

What I would like to do is modify the first script so that it works on hyperlinks in a DIV.

I have a number of files that users can select for free download, but want them to first accept my TOS - the disable method makes it hard for the user to understand what is happening (2nd method above); the 1st method makes it simple when the DIV lights up with instructions on click.

HTML Code:

<html>
<head>
<title>Force TOS Acceptance</title>
<script type="text/javascript">
<!--
function CheckboxValidator(theForm) {
    if (
    theForm.toscheckbox.checked == false) 
    {
     var txt=document.getElementById("myDiv")
         txt.innerHTML="<b style=\"color:#f00; font-size:18px; background:#ff0\">&uarr; You MUST check the box that agrees to our Terms of Service! </b>";
     return false;
    } else {     
     document.open;
     document.write('OK. We are satisfied. Good boy.');
     document.close;
     return false;
    }
}
//-->
</script>
</head>
<body>
<h1>Checkbox Must Be Checked for Form Submit</h1>
<p>This script requires that a checkbox is checked before allowing a form to be submitted.
    <p>&nbsp;</p>
<form action="../" onsubmit="return CheckboxValidator(this);">
    <p><input type="checkbox" name="toscheckbox" value="I agree to the Terms of Service."> <label>I agree to the <a href="http://companypolicies.org/terms-of-service" target="_blank">Terms of Service</a> and will do whatever you ask in the future forever and ever and so will my kids and...</label>
            <div id="myDiv"></div>
        <br /><input type="submit" value="Submit!"></p>
    </form>
    <div id="myDiv"></div>
</body>
</html>

Here is the DIV I would like to use:

HTML Code:

<div style="margin:10px 10px 20px 20px;">
<table style="templatedownload">
<tr>
<td><a href="http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.docx"  title="Download a sample Internet Use Policy in MS Word DOCX format"><img src="http://companypolicies.org/images/docx.png" border="0" /></a></td>
<td><a href="http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.docx"  title="Download a sample Internet Use Policy in MS Word DOCX format">Internet Use Policy Template MS Word DOCX File</a></td>
</tr>
<tr>
<td><img src="http://companypolicies.org/images/doc.png" /></td>
<td><a href="http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.doc" onclick="javascript:_gaq.push(['_trackEvent','download','http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.doc']);">Internet Use Policy Template MS Word DOC</a> <br /><em>(Older versions of MS Word) File</em></td>
</tr>
<tr>
<td><img src="http://companypolicies.org/images/dot.png" /></td>
<td><a href="http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.dot" >Internet Use Policy Template Microsoft Word Template File (.dot)</a></td>
</tr>
<tr>
<td><img src="http://companypolicies.org/images/rtf.png" /></td>
<td><a href="http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.rtf" >Internet Use Policy Template RTF File</a></td>
</tr>
<tr>
<td><img src="http://companypolicies.org/images/pdf.png" /></td>
<td><a href="http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.pdf']);">Internet Use Policy Template PDF File</a></td>
</tr>
</table>
<p>&nbsp;</p>
</div>

**JMRKER** · 08-09-2012 04:05 PM

Is this more like what you are looking for?

Code:

<html>
<head>
<title>Force TOS Acceptance</title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=263382

function CheckboxValidator(theForm) {
  var txt=document.getElementById("myDiv")
  if (theForm.toscheckbox.checked == false) {
    txt.innerHTML="<b style=\"color:#f00; font-size:18px; background:#ff0\">&uarr;"
                +" You MUST check the box that agrees to our Terms of Service! </b>";
   return false;
  } else {     
    txt.innerHTML = 'OK. We are satisfied. Good boy.';
    document.getElementById('content').style.display = 'block';
    return false;
  }
}
function checkAgreement(status) {
  if (status.checked == true) {
  } else {
    document.getElementById('content').style.display = 'none';
    document.getElementById("myDiv").innerHTML = '';
  }
}
</script>

</head>
<body>
<h1>Checkbox Must Be Checked for Form Submit</h1>
<p>This script requires that a checkbox is checked before allowing a form to be submitted.
    <p>&nbsp;</p>
<form action="../" onsubmit="return CheckboxValidator(this)">
 <p>
 <input type="checkbox" name="toscheckbox" value="I agree to the Terms of Service."
  onclick="checkAgreement(this)">
 <label>I agree to the <a href="http://companypolicies.org/terms-of-service" target="_blank">
  Terms of Service</a> and will do whatever you ask in the future forever and ever
  and so will my kids and...
 </label>
 <!-- div id="myDiv"></div -->
 <br /><input type="submit" value="Submit!"></p>
</form>
<div id="myDiv"></div>

<div id="content" style="margin:10px 10px 20px 20px;display:none">
<table> <!-- NOT VALID: style="templatedownload" -->
 <tr>
  <td>
   <a href="http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.docx"
      title="Download a sample Internet Use Policy in MS Word DOCX format">
    <img src="http://companypolicies.org/images/docx.png" border="0" />
   </a>
  </td>
  <td>
   <a href="http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.docx"
      title="Download a sample Internet Use Policy in MS Word DOCX format">
    Internet Use Policy Template MS Word DOCX File
   </a>
  </td>
 </tr>
 <tr>
  <td>
   <img src="http://companypolicies.org/images/doc.png" />
  </td>
  <td>
   <a href="http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.doc" 
      onclick="javascript:_gaq.push(['_trackEvent','download','http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.doc']);">
    Internet Use Policy Template MS Word DOC
   </a> <br />
   <em>(Older versions of MS Word) File</em>
  </td>
 </tr>
 <tr>
  <td><img src="http://companypolicies.org/images/dot.png" /></td>
  <td>
   <a href="http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.dot" >
    Internet Use Policy Template Microsoft Word Template File (.dot)
   </a>
  </td>
 </tr>
 <tr>
  <td><img src="http://companypolicies.org/images/rtf.png" /></td>
  <td>
   <a href="http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.rtf" >
    Internet Use Policy Template RTF File
   </a>
  </td>
 </tr>
 <tr>
  <td><img src="http://companypolicies.org/images/pdf.png" /></td>
  <td>
   <a href="http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.pdf"
      onclick="javascript:_gaq.push(['_trackEvent','download','http://companypolicies.org/templates/downloader.php?f=Internet_Use_Policy.pdf']);">
    Internet Use Policy Template PDF File
   </a>
  </td>
 </tr>
</table>
<p>&nbsp;</p>
</div>

</body>
</html>

**donatello** · 08-13-2012 09:12 AM

I put it into a JSFiddle...

Works as promised, but was hoping to get it to fade the visibility and disable links with an on change with the checkbox...

http://jsfiddle.net/eeHeb/

Fiddling with it a bit more now...

Thanks for the help!

Also, a user can uncheck the box and then download the file.

**donatello** · 08-13-2012 10:53 AM

Ignore my previous post... it works, but with an image now...

Here I did it with an image for the button...

This is almost exactly the effect I was after, but I wanted to have text with inactive links that when clicked work this way...

http://jsfiddle.net/uyLA4/4/

I cheated and created an image with the text & image block faded. I would prefer to do it with just text... having a second DIV block that alternates with inactive links that would function exactly like this.

Thread: Blocking links in a DIV unless checkbox is checked

Thread Tools

Display

Blocking links in a DIV unless checkbox is checked

Something to consider ...

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions