HTML form

This site is best viewed in a modern browser with JavaScript enabled.

alev

Hi
I need some one to help me with my little problem
I have a payment form Pay field has dropdown OPTION amount list.
Here what I need to all the amounts can be in the list so I create input field that will allow user input amount by heand nf using check box JavaScript I hide this field so if box is checked input field is visible, but so as dropdown one.
So what I need is help with check box hidin one field ( dropdown) and unhiode input field.
I hope some one know how to do this

Thanx

Fang

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<link rel="StyleSheet" href="../../reset.css" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
window.onload=function() {
document.getElementsByName('paymentvariable')[0].style.visibility = 'hidden';
var aObj=document.getElementsByName('cbox')[0].onclick = function(){toggle(this);};
};

function toggle(obj) {
var paymentfixed = document.getElementsByName('paymentfixed')[0].style;
var paymentvariable = document.getElementsByName('paymentvariable')[0].style;
if(obj.checked) {
    paymentfixed.visibility = 'hidden';
    paymentvariable.visibility = 'visible';
    }
else {
    paymentfixed.visibility = 'visible';
    paymentvariable.visibility = 'hidden';
    }
}
</script>

<style type="text/css">
body {
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:0.8em;
}
</style>

</head>
<body>
<form name="form1">
<select name="paymentfixed">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>check for variable payment<input type="checkbox" name="cbox"></label>
<input type="text" name="paymentvariable">
</form>
</body>
</html>

interfacetricks

You can use the checkox's "onclick" event to call a function. This event will fire even if the user uses the spacebar to tick/untick the box.

I've made an example of hiding a drop-down box and showing a textbox in its place when you click a checkbox. You can see it here:

http://webinterfacetricks.com/checkbox_changes/

In theory it would be the onchange event, but some browsers don't fire this until the checkbox loses focus, so it wouldn't happen as soon as you check or uncheck it.

interfacetricks

I should also mention there's a decision to make between using "element.style.visibility = 'hidden';" to hide the drop-down box, or using "element.style.display = 'none';".

Each is suited for a diferent purpose. visibility='hidden' will mean the element still takes up the same space it would otherwise take up, it's just invisible. display='none' means it looks as if the element were never there.

So it depends what effect you're going for. You can see an example of the first method in Fang's post, and my example uses the second method.

Hope this helps.