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.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    JavaScript check box issue

    Hello

    I have the following images on an HTML page:

    Code:
    <table border="0">
    <tr valign="top" align="center">
    <td width="175">
    <div style="border-right: 1px solid blue;">
    <a href="newXP\imagemenu\page1.html"><img src="WinXp_use.jpg" WIDTH=87 HEIGHT=54 title="XP logo" alt="XP"></a>
    <p><b>Windows XP</b></p>
    </div>
    </td>
    
    <td width="175">
    <div style="border-right: 1px solid blue;">
    <a href="newVista\imagemenu\page1.html"><img src="VistaLo.gif" WIDTH=55 HEIGHT=54 title="Vista logo" alt="Vista"></a>
    <p><b>Windows Vista</b></p>
    </div>
    
    </td>
    
    <td width="175">
    <div style="border-right: 1px solid blue;">
    <a href="win7\imagemenu\page1.html"><img src="7_logo.gif" WIDTH=87 HEIGHT=54 title="Windows 7 logo" alt="Windows 7"></a>
    <p><b>Windows 7</b></p>
    </div>
    </td>
    
    <td width="175">
    <div style="border-right: 1px solid blue;">
    <a href="newMac\imagemenu\page1.html"><img src="logo_Apple1_Red54.jpg" WIDTH=57 HEIGHT=54 title="Apple Mac logo" alt="Apple Mac"></a>
    <p><b>Apple Mac</b></p>
    </div>
    </td>
    
    </tr>
    </table>
    I have some JavaScript which asks the user to agree to the terms and conditions and when they do they move to the next page:

    Code:
    <script type="text/javascript">
    <!--
    
    function checkCheckBoxAgree(c){
    if (c.agree_text.checked == false )
    { 
    alert("Please accept the university's terms and conditions"); 
    return false;
    }else 
    return true;
    }
    //-->
    </script>
    and then this:

    Code:
    <form name="agreeform" action="#">
    I agree to accept the terms and conditions of the MMU: <input name="agree_text" type="checkbox" value="0">
    <a href="demo_tc_done.html" onclick="return checkCheckBoxAgree(document.forms['agreeform'])">click</a>
    Most users will click on the image (above) which is appropriate to their operating system before checking the box asking them to accept the terms and conditions.

    What I would like is when they click whichever image they get an alert box asking them to accept the terms and conditions (unless they have done so already). When they have chekced the 'accept' box, they will then need to click on the image again, but in the JavaScript code I have posted they are
    taken to one particular Web page, namely demo_tc_done.html instead of that Web page appropriate to the image they have clicked on.

    As each image in my code links to a different Web page, how would I do that?

    Thanks for any help.

    Steve

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    If I understand you correctly, this should help you
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
       <title>Title here</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <script type="text/javascript">
          <!--
          function selectOS(sender) {
             var agrfrm = document.getElementById("agreeform");
             if (!agrfrm.agree_text.checked) {
                if (confirm("Do you accept the university's terms and conditions?")) {
                   agrfrm.agree_text.checked = true;
                   document.getElementById("golink").href = sender.href;
                   return false;
                } else {
                   return false;
                }
             } else {return true;}
          }
    
          function checkCheckBoxAgree(c){
             if (c.agree_text.checked == false ) { 
                alert("Please accept the university's terms and conditions"); 
                return false;
             } else return true;
          }
          //-->
       </script>
    </head>
    <body>		
       <table border="0">
          <tr valign="top" align="center">
             <td width="175">
                <div style="border-right: 1px solid blue;">
                   <a href="newXP/cimagemenu/cpage1.html" onclick="return selectOS(this);"><img src="WinXp_use.jpg" WIDTH=87 HEIGHT=54 title="XP logo" alt="XP"></a>
                   <p><b>Windows XP</b></p>
                </div>
             </td>
    
             <td width="175">
                <div style="border-right: 1px solid blue;">
                   <a href="newVista/cimagemenu/cpage1.html" onclick="return selectOS(this);"><img src="VistaLo.gif" WIDTH=55 HEIGHT=54 title="Vista logo" alt="Vista"></a>
                   <p><b>Windows Vista</b></p>
                </div>
             </td>
    
             <td width="175">
                <div style="border-right: 1px solid blue;">
                   <a href="win7/cimagemenu/cpage1.html" onclick="return selectOS(this);"><img src="7_logo.gif" WIDTH=87 HEIGHT=54 title="Windows 7 logo" alt="Windows 7"></a>
                   <p><b>Windows 7</b></p>
                </div>
             </td>
    
             <td width="175">
                <div style="border-right: 1px solid blue;">
                   <a href="newMac/cimagemenu/cpage1.html" onclick="return selectOS(this);"><img src="logo_Apple1_Red54.jpg" WIDTH=57 HEIGHT=54 title="Apple Mac logo" alt="Apple Mac"></a>
                   <p><b>Apple Mac</b></p>
                </div>
             </td>
          </tr>
       </table>
    
       <form id="agreeform" name="agreeform" action="#">
          I agree to accept the terms and conditions of the MMU: <input name="agree_text" type="checkbox" value="0">
          <a id="golink" href="demo_tc_done.html" onclick="return checkCheckBoxAgree(document.forms['agreeform'])">click</a>
       </form>
       
    </body>
    
    </html>
    I am still learning English

  • Users who have thanked Amphiluke for this post:

    SteveH (07-16-2009)

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Amphiluke

    Many thanks for your speedy reply!

    I have got it to work, great!

    There are just one or two small things: I have changed the links as follows:

    Code:
    <a href="newMac\imagemenu\page1.html" onclick="return selectOS(this);"><img src="logo_Apple1_Red54.jpg" WIDTH=57 HEIGHT=54 title="Apple Mac logo" alt="Apple Mac"></a>
    It is not:

    Code:
     <a href="newMac/cimagemenu/cpage1.html" onclick="return selectOS(this);"><img src="logo_Apple1_Red54.jpg" WIDTH=57 HEIGHT=54 title="Apple Mac logo" alt="Apple Mac"></a>
    I am developing these pages on my desktop - they won't be used on a server so I think your use of / needs to be \.

    The other thing, is the

    <a href="demo_tc_done.html" onclick="return checkCheckBoxAgree(document.forms['agreeform'])">click</a>

    in my original script simply made redundant? Do I just ignore it?

    Many thanks again for all your help.

    Steve


  •  

    Posting Permissions

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