Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    enable links after set amount of clicks

    After the user clicks a required amount of links, I want this to enable another button to be clicked (which was previously disabled).

  • #2
    New Coder
    Join Date
    Jan 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Provide more information of what you're trying to do. Or, show me a Web site that does it. (I doubt you do it with HTML and/or CSS though.)

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want to require users to click 3 links. After they do so, I will allow them to be able to click a new link. If they don't click the required 3 links, they cannot click this new link. A bit confusing, I know. Please ask more if you don't understand. Thanks.
    Also, html/javascript will work.

  • #4
    New Coder
    Join Date
    Jan 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone?

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is this anything relative to a terms of service check box or something? They check all the check boxes and then a link shows up? Will that work or do you need a text link?

  • #6
    New Coder
    Join Date
    Jan 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That may work.

  • #7
    New Coder
    Join Date
    Jan 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Kind of when you're installing a program and the user needs to check a box before they can continue. Except, instead of checking a box, I need them to click a certain amount of links before continuing.

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Louisville, KY
    Posts
    279
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think we still need a bit more information. When the user clicks these 3 links, will they stay on the same page each time, or will each of these 3 links send them to a new page each time?

    If they transport to a new page each time, I would use some sort of server side scripting to log session variables.

    If not transporting to a new page each time, you can probably still use the checkbox method, but hide the checkboxes and use the label tag to associate text with the checkbox, styling it as if it were a link.

  • #9
    New Coder
    Join Date
    Jan 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It actually sends them to a point lower down on the page. How could I do it with checkboxes?

  • #10
    New Coder
    Join Date
    Jan 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also, I would need to have multiple text boxes since the user needs to click multiple links in order to continue.

    If anyone knows how to make the code requiring users to check off multiple checkboxes in order to continue, this would be very helful.

    Something like this, but I need multiple check boxes:

    <SCRIPT language="JavaScript" type="text/javascript">
    <!--
    function checkCheckBoxAgree(c){
    if (c.agree_text.checked == false )
    {
    alert("Please check the box to continue");
    return false;
    }else
    return true;
    }
    //-->
    </SCRIPT>

    <form name="agreeform" action="#">
    I accept: <input name="agree_text" type="checkbox" value="0">
    <a href="index.html" onclick="return checkCheckBoxAgree(document.forms['agreeform'])">
    Last edited by bvdman89; 01-26-2007 at 10:48 PM.

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Try this: It does this as you originally requested (with hyperlinks). I added a few unnecessary decorations to the code since I was experimenting.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en-US">
      <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="Author" content="Patrick Garies">
        <title>HTML 4.01 Strict Document</title>
    
        <style type="text/css">
          ul { list-style-type: decimal; }
          a { color: gray; cursor: default; }
          a:link, a:visited { color: blue; text-decoration: underline; }
          a:link:hover, a:visited:hover { color: navy; cursor: pointer; }
          li::before, li::before { content: "★ "; visibility: hidden; color: navy; }
          li:hover::before, li:hover::before { visibility: visible; }
          li#special:hover::before { visibility: hidden; }
        </style>
    
        <script type="text/javascript">
          var counter = 0;
          document.defaultView.addEventListener("load", basic, false);
          function basic() {
            var anchors = document.getElementsByTagName("a");
            for (var i = 0; i < anchors.length - 1; i++) {
              anchors[i].addEventListener("click", verify, false);
              }
            }
          function verify() {
            if (!this.nextSibling) {
              this.parentNode.appendChild(document.createTextNode(" ✓"));
              counter++;
              }
            if (counter == 3) {
              var special = document.getElementById("special");
              special.lastChild.data = " ☺";
              special.firstChild.setAttribute("href", "http://edition.cnn.com/");
              document.styleSheets[0].deleteRule(document.styleSheets[0].cssRules.length - 1);
              }
            }
        </script>
    
        <!--[if IE]>
          <script type="text/javascript">
            window.onload = basicIE;
            function basicIE() {
              var anchors = document.getElementsByTagName("a");
              for (var i = 0; i < anchors.length - 1; i++) {
                anchors[i].onclick = verifyIE;
                }
              }
            function verifyIE() {
              if (!this.className) {
                this.className = "clicked";
                this.parentNode.appendChild(document.createTextNode("✓"));
                counter++;
                }
              if (counter == 3) {
                var special = document.getElementById("special");
                special.lastChild.data = " ☺";
                special.firstChild.setAttribute("href", "http://edition.cnn.com/");
                }
              }
        </script>
        <![endif]-->
    
      </head>
      <body>
    
        <ul>
          <li id="intro"><a href="#inner">Hyperlink</a></li>
          <li id="inner"><a href="#final">Hyperlink</a></li>
          <li id="final"><a href="#special">Hyperlink</a></li>
          <li id="special"><a>Hyperlink</a> (Disabled)</li>
        </ul>
    
      </body>
    </html>
    Quote Originally Posted by bvdman89 View Post
    <SCRIPT language="JavaScript" type="text/javascript">
    <!--
    function checkCheckBoxAgree(c){
    if (c.agree_text.checked == false )
    {
    alert("Please check the box to continue");
    return false;
    }else
    return true;
    }
    //-->
    </SCRIPT>

    <form name="agreeform" action="#">
    I accept: <input name="agree_text" type="checkbox" value="0">
    <a href="index.html" onclick="return checkCheckBoxAgree(document.forms['agreeform'])">
    The code in red should be avoided:

    • The language attribute is deprecated (obsolete) in favor of the type attribute. Unless you’re coding for ancient browsers, it’s pointless and redundant.
    • “commenting out” your scripts is only necessary for ancient browsers that don’t understand what a script element is. That’s also unnecessary.
    • Unless you intend to use the action attribute or something else specific to the form element, you can leave it out or replace it with a simple div since it’s pointless.
    • The name attribute is deprecated on the form element in favor of the id attribute.

    Code:
    <script type="text/javascript">
      /* (IE‐compatible) */
      function checkCheckBoxAgree(c) {
        if (!document.getElementById(c).checked) {
          alert("Please check the box to continue");
          return false;
          }
        else return true;
        }
    </script>
    
    
    
    I accept: <input type="checkbox" id="agree_text" value="0">
    <a href="index.html" onclick="return checkCheckBoxAgree('agree_text');">
    I would also move the onclick attribute to an embedded or external script so that you keep the JavaScript and HTML markup separate; this makes things easier to maintain.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    New Coder
    Join Date
    Jan 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    WOW!!! Thanks a lot. It works PERFECTLY

    Just one thing: if I wish to add more required links, how would I do that?
    Last edited by bvdman89; 01-27-2007 at 01:31 AM.

  • #13
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Add the links and change both instances of counter == 3 to match the number of links that must be clicked. The script is pretty specific, so if you intend to do anything more than basic with it, it’ll need some modification.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #14
    New Coder
    Join Date
    Jan 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great! It still works perfectly. Thanks a lot!
    Last edited by bvdman89; 01-27-2007 at 05:16 PM.

  • #15
    New Coder
    Join Date
    Jan 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just one thing: is it hard to make the links images instead of text links?
    And also, is it possible to get rid of the numbering (I tried both but it messed everything up)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •