Javascript Display label for an unhidden text box

  MS35 20:25 03 Jun 08
Locked

I'm just trying to get to grips with a simple example in javascript to unhide a text box depending on a selection from a drop down.

In the following example if you select "yes" a new input box appears, but i'd like it to be prefixed by the statement "Please enter your meter reading here"

And secondly how could I change the No/Yes dropdown to a checkbox with the same result?

Thanks

head>
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
title>Untitled Document /title>

script type="text/javascript">

function toggleMeter(chosen) {
if (chosen == 'Yes') {
document.Electric.Meter.style.visibility = 'visible';
} else {
document.Electric.Meter.style.visibility = 'hidden';
document.Electric.Meter.value = ';
}
}
/script>

/head>

body>
form id="Electric" name="Electric">
Do you have a Water Meter?
select name="values" size="1"
onchange="toggleMeter( document.Electric.values.options[ document.Electric.values.selectedIndex ].value );">
option value="No" selected="selected">No /option>
option value="Yes">Yes /option>

/select>
p>
input type="text" name="Meter" size="25" maxlength="20" style="visibility:hidden" />
/form>

/body>
/html>

  MS35 19:00 04 Jun 08

But would still like to know who I can hide the label for the input box until the checkbox is ticked.

Any thoughts?

<head>
<script type="text/javascript">

function changeIt() {
if(document.Water.chk.checked){
document.Water.MeterReading.style.visibility="visible"; //set to visible
}else{
document.Water.MeterReading.style.visibility="hidden"; //set to hidden
}
}
</script>
</head>

<body>
<form name="Water">
<p>Does the property have a water meter?
<input name="chk" type="checkbox" onClick="changeIt()" value="">
</p>
Please enter Meter reading here: <input type="text" name="MeterReading" style="visibility: hidden">
</p>
</form>
</html>

  Kemistri 02:05 05 Jun 08

If you want to use a function more than once, there's nothing stopping you. How you do that is up to you, but the least code heavy option tends to involve classes. Just like CSS.

Read up some more about JS before you worry too much about trying to do things like this (of all things, a form must rank as one of the most important things in which to avoid bugs). And keep in mind the accessibility issues with JS.

This thread is now locked and can not be replied to.

Nintendo Switch review: Hands-on with the intuitive modular console and its disappointing games…

1995-2015: How technology has changed the world in 20 years

New Corel ParticleShop plugin now available: 11 new brushes & 6 new brush packs

Apple AirPods review: Apple's beautiful new Bluetooth headphones bring true intelligence to…