Code help (Hide button until checkbox is checked)

  • bluedragon
  • Proficient
  • Proficient
  • bluedragon
  • Posts: 452

Post 3+ Months Ago

Ok I need an html code that for people to enter my forums from my main site, I want them to make them check a check box saying they agree to the terms and when they check it, then I want the "Enter Forums" button to popup under it. But until they check the box, I want ti to be invisible to them.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • click4pardeep
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: india

Post 3+ Months Ago

Hi Bluedragon

The thing u need is possible by use of java script here is the code for it, u can put the image and link for forums in the table:

Code: [ Select ]
<html>
<head>
<script>
function showsearch1(a)
{
    if (a==true)
    {
        var s1 = document.getElementsByName("search2").item(0);
        s1.style.visibility="visible";
    }
    else
    {
        var s1 = document.getElementsByName("search2").item(0);
        s1.style.visibility="hidden";
    }

}
</script>
</head>
<body>
<input type="checkbox" onClick="showsearch1(this.checked)">Terms and Conditios

<table border=0 width=100 bordercolor=#5BB9F0 cellpadding="0" cellspacing="0" width=100% id="search2" style="visibility:hidden;position:relative;border-collapse: collapse"><tr><td>
Forums
</td></tr></table>
</body>
</html>
  1. <html>
  2. <head>
  3. <script>
  4. function showsearch1(a)
  5. {
  6.     if (a==true)
  7.     {
  8.         var s1 = document.getElementsByName("search2").item(0);
  9.         s1.style.visibility="visible";
  10.     }
  11.     else
  12.     {
  13.         var s1 = document.getElementsByName("search2").item(0);
  14.         s1.style.visibility="hidden";
  15.     }
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <input type="checkbox" onClick="showsearch1(this.checked)">Terms and Conditios
  21. <table border=0 width=100 bordercolor=#5BB9F0 cellpadding="0" cellspacing="0" width=100% id="search2" style="visibility:hidden;position:relative;border-collapse: collapse"><tr><td>
  22. Forums
  23. </td></tr></table>
  24. </body>
  25. </html>
  • bluedragon
  • Proficient
  • Proficient
  • bluedragon
  • Posts: 452

Post 3+ Months Ago

Awsome works perfectly. Thanks.
  • Houlala
  • Born
  • Born
  • Houlala
  • Posts: 1
  • Loc: Manchester UK

Post 3+ Months Ago

:oops: Hi everyone,
I'm a beginner. I dont anything about Html. Can u help ? I sthere any good website to help me out ?
I've got my own website >>> http://www.houlala.co.uk it's not as great as urs i guess but it's agood start i think. I'm using things from http://www.freewebs.com.

cheers

bx
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Houlala, there's some good links in This Topic :)
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Bluedragon, if it's just for entering the forums you can handle the function inline,
Code: [ Select ]
<form action="forumIndex.ext">
<input type="checkbox" onclick="this.form.go.style.visibility=this.checked ? 'visible' : 'hidden';" />
<input type="submit" style="visibility:hidden" id="go" value="Enter Forums !" />
</form>
  1. <form action="forumIndex.ext">
  2. <input type="checkbox" onclick="this.form.go.style.visibility=this.checked ? 'visible' : 'hidden';" />
  3. <input type="submit" style="visibility:hidden" id="go" value="Enter Forums !" />
  4. </form>


If you want to use an image for a button replace the submit with an image as usual giving it an id="go" attribute. (or change the "go" part of the onclick to the id/name attribute of your image)
  • bluedragon
  • Proficient
  • Proficient
  • bluedragon
  • Posts: 452

Post 3+ Months Ago

Thanks but I got it.
  • bluedragon
  • Proficient
  • Proficient
  • bluedragon
  • Posts: 452

Post 3+ Months Ago

joebert wrote:
Bluedragon, if it's just for entering the forums you can handle the function inline,
Code: [ Select ]
<form action="forumIndex.ext">
<input type="checkbox" onclick="this.form.go.style.visibility=this.checked ? 'visible' : 'hidden';" />
<input type="submit" style="visibility:hidden" id="go" value="Enter Forums !" />
</form>
  1. <form action="forumIndex.ext">
  2. <input type="checkbox" onclick="this.form.go.style.visibility=this.checked ? 'visible' : 'hidden';" />
  3. <input type="submit" style="visibility:hidden" id="go" value="Enter Forums !" />
  4. </form>


If you want to use an image for a button replace the submit with an image as usual giving it an id="go" attribute. (or change the "go" part of the onclick to the id/name attribute of your image)

Ok I modified it like this but now it shows up wierd:
Code: [ Select ]
<form action="/forum/index.php">
<input type="checkbox" onclick="this.form.go.style.visibility=this.checked ? 'visible' : 'hidden';" /><font face="Morpheus">I Agree To The Rules</font>
<input type="/images/enter.gif" style="visibility:hidden" id="go" value="Enter Forums" />
</form>
  1. <form action="/forum/index.php">
  2. <input type="checkbox" onclick="this.form.go.style.visibility=this.checked ? 'visible' : 'hidden';" /><font face="Morpheus">I Agree To The Rules</font>
  3. <input type="/images/enter.gif" style="visibility:hidden" id="go" value="Enter Forums" />
  4. </form>


And I still cant understand how to show an image.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

You need ot replace this line,
Code: [ Select ]
<input type="/images/enter.gif" style="visibility:hidden" id="go" value="Enter Forums" />

With
Code: [ Select ]
<img src="/images/enter.gif" style="visibility:hidden" id="go" alt="Enter Forums" onclick="this.parentNode.submit();"/>


this.parentNode refers to the object/tag that immediately contains that image, if you wrap that image inside a DIV or anything else the path will change.

for instance,
Code: [ Select ]
<form action="thePage.html">
<div id="container">
<img..... onclick="this.parentNode.parentNode.submit();" ...>
</div>
</form>
  1. <form action="thePage.html">
  2. <div id="container">
  3. <img..... onclick="this.parentNode.parentNode.submit();" ...>
  4. </div>
  5. </form>


The reason it looked weird is you had input type="/image/path, input elements require type to be "button" , "checkbox" , "submit" , ect..
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

:oops: Sorry, I forgot to mention adding the onclick to the image before.
  • bluedragon
  • Proficient
  • Proficient
  • bluedragon
  • Posts: 452

Post 3+ Months Ago

Thanks got it working. And thnks for delting those two posts.
  • DarkDream
  • Born
  • Born
  • DarkDream
  • Posts: 3

Post 3+ Months Ago

Code: [ Select ]
<html>
<head>
<script>
function showsearch1(a)
{
  if (a==true)
  {
   var s1 = document.getElementsByName("search2").item(0);
   s1.style.visibility="visible";
  }
  else
  {
   var s1 = document.getElementsByName("search2").item(0);
   s1.style.visibility="hidden";
  }

}
</script>
</head>
<body>
<input type="checkbox" onClick="showsearch1(this.checked)">Terms and Conditios

<table border=0 width=100 bordercolor=#5BB9F0 cellpadding="0" cellspacing="0" width=100% id="search2" style="visibility:hidden;position:relative;border-collapse: collapse"><tr><td>
Forums
</td></tr></table>
</body>
</html>
  1. <html>
  2. <head>
  3. <script>
  4. function showsearch1(a)
  5. {
  6.   if (a==true)
  7.   {
  8.    var s1 = document.getElementsByName("search2").item(0);
  9.    s1.style.visibility="visible";
  10.   }
  11.   else
  12.   {
  13.    var s1 = document.getElementsByName("search2").item(0);
  14.    s1.style.visibility="hidden";
  15.   }
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <input type="checkbox" onClick="showsearch1(this.checked)">Terms and Conditios
  21. <table border=0 width=100 bordercolor=#5BB9F0 cellpadding="0" cellspacing="0" width=100% id="search2" style="visibility:hidden;position:relative;border-collapse: collapse"><tr><td>
  22. Forums
  23. </td></tr></table>
  24. </body>
  25. </html>


Hey is it possible to do the same thing with 2 radios. eg:
-----------------
O

Ø
text1
-----------------
Ø
text2
O

-----------------
If it is what would the script look like?
cheers DarkDream

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 91 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.