Steph wrote:
[...]
For example, i would to check one condition and display dynamically a
button if the condition is checked on the same page.
The script below uses an onload function to fire the click when the
document loads. This is for two reasons:
1. If the user has javascript disabled or their browser does not
support it, the text box will still display and they can use it.
Otherwise, it will not be shown when the checkbox is checked.
2. You can set the checkbox to checked or not and the text input will
display/not display on opening the page without you having to change
the properties of the checkbox.
One note of caution: if the user puts something into the input then
unchecks the checkbox, the inupt is hidden but the text in it will
still be submitted. So maybe you want to disable it when it is not
displayed.
You can also use:
inp.style.visibility = 'visible' or 'hidden'
if you want the text box to still take up space on the page when
hidden.
Lastly, if the page is big, the onload will fire after all content is
loaded, so your text box may appear the disappear. To prevent that,
move the onload to a script immediately after the input so the body tag
becomes:
<body>
and put:
<script type="text/javascript">
clickIt('aForm','aCheckbox');
</script>
immediately after the text input. I think putting it in the body
onload is cleaner, but obviously having the input flash on then off may
be disconcerting for users.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>Dynamic text box</title>
<script type="text/javascript">
function showHide(chk,inp){
if (chk.checked) {
inp.style.display = '';
} else {
inp.style.display = 'none';
}
}
function clickIt(frm,chk) {
var x = document.forms[frm].elements[chk];
if (x) x.click();
}
</script>
</head>
<body onload="clickIt('aForm','aCheckbox');">
<form action="" name="aForm">
<label for="aCheckbox">Click me <input type="checkbox"
name="aCheckbox" id="aCheckbox" onclick="
showHide(this,this.form.txtInput);
">
</label><br>
<input type="text" size="30" name="txtInput">
</form>
</body></html>