Need help with Html Please?

CyberSpaceman

07-29-2012, 08:14 AM

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>

MrTIMarshall

07-29-2012, 09:31 AM

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:
<!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>

coothead

07-29-2012, 03:53 PM

Hi there CyberSpaceman,

and a warm welcome to these forums. ;)

Try it like this...
<!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"> </div>

</form>

</body>
</html>

coothead