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
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with Html Please?

    Hi All

    I am new to html. I would like to know how can I edit the code below so that when you click on the first checkbox1 a message also appears in the letterbox below? How can I change the code so that every time you click on a different checkbox a different message appears in the letterbox below?

    Any help would be really appreciated.

    <HTML>
    <BODY>
    <H2>What tools needs fixing?</H2>
    <FORM>
    <INPUT
    TYPE = checkbox
    NAME = "check1"
    VALUE = 99
    onClick= "litterbox.value='new brushes or the chord is broken.'</H2">
    Drill
    <BR>
    <INPUT
    TYPE = checkbox
    NAME = "check2"
    Value=99
    onClick = "litterbox.value ='new brushes or the chord is broken.'">
    Grinder
    <BR>
    <INPUT
    TYPE = checkbox
    NAME="check3"
    VALUE = 99
    onCLICK ="litterbox.value= 'new brushes or the chord is broken.'">
    Big Grinder
    <BR>
    <INPUT
    TYPE=text
    NAME="litterbox"
    VALUE=""
    SIZE=40>
    </FORM>
    </BODY>
    </HTML>

  • #2
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Your going to have to use JavaScript. I'm a beginner in JavaScript, so don't know how to do this of the top of my head, but if you have a little look on Google for "Show/Hide div on Radio Button", I'm sure you'll find what your looking for.

    Here's a little example if you wanted a link to show/hide a div:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >Show/Hide</a>
    
    <div class="mid" id="HiddenDiv" style="DISPLAY: none" >
    This text was hidden
    </div>
    
    <script language="JavaScript">
    function ShowHide(divId)
    {
    	if(document.getElementById(divId).style.display == 'none')
    	{
    	document.getElementById(divId).style.display='block';
    	}
    	else
    	{
    		document.getElementById(divId).style.display = 'none';
    	}
    }
    </script>
    </body>
    </html>

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there CyberSpaceman,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    body {
        background-color:#f0f0f0;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
     }
    form {
        width:400px;
        padding:20px;
        border:1px solid #999;
        margin:auto;
        background-color:#fff;
        box-shadow:5px 5px 10px #666;
     }
    h1 {
        font-size:100%;
        text-align:center;
     }
    label {
        display:block;
     }
    #message {
        line-height:26px;
        border:1px solid #999;
        margin-top:20px;
        color:#900;
        text-align:center;   
     }
    .hide {
        display:none;
     }
    </style>
    
    <script>
    
    function init(el){
     
       test=[];
       j=0;
       k=0;
    
       msg=['Message for Drill','Message for Grinder','Message for Big Grinder'];
    
       df=document.forms[0];
       inps=df.getElementsByTagName('input');
       obj=document.getElementById('message');
       obj.className='hide';
    
    for(c=0;c<inps.length;c++) {
    
    if(inps[c].type=='checkbox') {
       inps[c].checked=false;
       inps[c].number=k++;
       test[j++]=false;
    if(inps[el]!=undefined) {
       inps[el].checked=true;
       obj.className='';
     }
    
    inps[c].onclick=function() {
    
    if(test[this.number]==true){
       init();
       test[this.number]=false;
     }
    else {
    if(msg[this.number]==undefined){
       alert('no message has been added to the msg array');
     }
       obj.firstChild.nodeValue=msg[this.number];
       init(this.number);
       test[this.number]=true; 
         }
        }
       }
      }
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    </head>
    <body>
    
    <form action="#">
    
    <h1>What tools needs fixing?</h1>
    
    <div>
     <label><input type="checkbox" value=""> Drill</label>
     <label><input type="checkbox" value=""> Grinder</label>
     <label><input type="checkbox" value=""> Big Grinder</label>
    </div>
    
    <div id="message" class="hide">&nbsp;</div>
    
    </form>
    
    </body>
    </html>
    
    coothead
    Last edited by coothead; 07-29-2012 at 03:59 PM. Reason: typing error


  •  

    Posting Permissions

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