pizzy wrote:
thanks for the help i'll clean it up...
This should get you going. The first form has the inputs created
in the HTML, they are hidden and disabled on paged load, that
way they will still be available for non-JavaScript users.
When the checkbox is checked, the input is made visible and
enabled. If it's unchecked again, the input is hidden and
disabled again but whatever text was entered is still in there
so that if it is enabled again, the user doesn't have to re-type
whatever was there before. This feature may not be wanted, you
can get rid of the text by setting the input value to '' when
you disable it.
The onclick is added to each checkbox when the page is loaded to
cut down on code in the page and users without JS won't get a
heap of code that wont work anyway.
The second example is more like your attempt: it adds or removes
inputs depending on whether a checkbox is selected or not when
the 'Add inputs' button is clicked.
Any text entered will be lost when the control is removed.
Functionally, this is no different from the above, but makes the
form dependent on JavaScript (unnecessarily in my view) and may
well make page layout much more difficult.
In the first method, you can use visibility to keep a space on
the page for the hidden control, or display='none' to make it
take up no space at all whilst hidden. With create/remove
method, you have to use a div, table cell or similar if you want
to reserve space in the page.
If you really want the inputs shown all at once, use the first
method in combination with a 'Show inputs' button rather than
an onclick.
I have used getElementById, so there is no support for IE
before 5.5 or Netscape before version 6, checkout DynWrite:
<URL:http://www.jibbering.com/faq/faq_notes/alt_dynwrite.html>
In short, versions of IE that have document.all but not
getElementById can be supported by adding the following to any
script element outside a function and before getElementById is
used:
if((!document.getElementById) && document.all){
document.getElementById =
function(id){return document.all[id];};
}
Note from the very bottom of the DynWrite page:
"It has been observed that IE 4 errors if DynWrite is called
before the onload event is triggered by the browser. So to
maximise cross-browser support for this function it would be
better not to use it prior to that point."
Have a play, come back if you need more help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title> Form stuff </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
</head>
<body>
<p>Hide and disable inputs on page load<br>
Make inputs visible and enabled when checkbox clicked</p>
<form action="" name="formA" id="formA">
<div>
<label for="checkA-1">Check 1
<input type="checkbox" name="checkA-1" id="checkA-1">
</label>
<input type="text" name="inpA-1" id="inpA-1" size="20"><br>
<label for="checkA-2">Check 2
<input type="checkbox" name="checkA-2" id="checkA-2">
</label>
<input type="text" name="inpA-2" id="inpA-2" size="20"><br>
<label for="checkA-3">Check 3
<input type="checkbox" name="checkA-3" id="checkA-3">
</label>
<input type="text" name="inpA-3" id="inpA-3" size="20"><br>
<input type="reset" onclick="initForm(this.form);">
</div>
</form>
<script type="text/javascript">
function initForm(f){
var txt;
var inp = f.elements;
var i = inp.length;
while (i--) {
// Add onclick & ensure checkboxes uncheck
if (/checkbox/i.test(inp[i].type)){
inp[i].onclick = function (){showInput(this);};
inp[i].checked = false;
// Disable and hide the associated input
txt = f.elements['inpA-' + inp[i].id.split('-')[1]];
txt.disabled = true;
txt.style.visibility = 'hidden';
}
}
}
function showInput(c) {
var t = c.form.elements['inpA-'+c.id.split('-')[1]];
if (c.checked) {
t.style.visibility = 'visible';
t.disabled = false;
if (c.blur) c.blur();
if (t.focus) t.focus();
} else {
t.style.visibility = 'hidden';
t.disabled = true;
}
}
initForm(document.forms['formA']);
</script>
<p>Add inputs to the form if the checkbox is checked<br>
when the 'Add inputs' button is clicked</p>
<form action="" name="formB" id="formB">
<table border="1">
<tr>
<td>
<label for="checkB-1">Check 1
<input type="checkbox" id="checkB-1"></label><br>
</td><td><label id="forInp-1"></label></td>
</tr><tr>
<td>
<label for="checkB-2">Check 2
<input type="checkbox" id="checkB-2"></label><br>
</td><td><label id="forInp-2"></label></td>
</tr><tr>
<td>
<label for="checkB-3">Check 3
<input type="checkbox" id="checkB-3"></label><br>
</td><td><label id="forInp-3"></label></td>
</tr><tr>
<td>
<input type="reset" onclick="clearInputs(this.form);">
<input type="submit">
</td><td>
<input type="button" value="Add inputs" onclick="
addInputs(this.form);">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function addInputs(f){
var oTxt, n, tgt;
var inp = f.elements;
var i = inp.length;
while (i--) {
// if element has an id and is a checkbox
if ( (n=inp[i].id.split('-')[1])
&& /checkbox/i.test(inp[i].type)) {
tgt = document.getElementById('forInp-'+n);
// if it's checked and it doesn't have an input, add one
if ( inp[i].checked && !f.elements['inpB-'+n]){
oTxt = document.createElement('input');
oTxt.id = 'inpB-' + n;
oTxt.name = oTxt.id;
tgt.appendChild(oTxt);
if (f.elements[oTxt.name].focus) oTxt.focus();
// if not checked and it does have an input, remove it
} else if (!inp[i].checked && f.elements['inpB-'+n]){
tgt.removeChild(f.elements['inpB-'+n]);
}
}
}
}
function clearInputs(f){
var n, tgt;
var inp = f.elements;
var i = inp.length;
while (i--) {
inp[i].checked = false;
if ( (n=inp[i].id.split('-')[1])
&& /checkbox/i.test(inp[i].type)
&& f.elements['inpB-'+n]) {
tgt = document.getElementById('forInp-'+n);
tgt.removeChild(f.elements['inpB-'+n]);
}
}
}
document.forms['formB'].reset();
</script>
</body>
</html>
--
Fred
