...

View Full Version : How to enable/disable multiple textfield with same name using checkbox



cash1981
02-13-2007, 04:42 PM
Hello.

I have a for loop, that automatically creates textfields and checkboxes.
These of course have the same name and I am using request.getParameterValues to retrieve them.

However, I am struggling on this rather simple issue. I am no javascript guru, so maybe you guys could help me out. I have tried googling for this answer, but havent found anything that can help my problem exactly.


I have three text fields on each row and one checkbox.
I would like for each checkbox I click, that the textfields to be enabled.
A sample code here:



<td><input type="text" size="10" name="pris" disabled="disabled"></td>
<td><input type="text" size="10" name="toppfart" disabled="disabled"></td>
<td><input type="text" size="10" name="motorinstallasjon" disabled="disabled"></td>

<td><input type="checkbox" name="motorCheckbox" value="<%=motor.getId()%>"
onclick="(pris.disabled=!this.checked)&
(toppfart.disabled=!this.checked)&
(motorinstallasjon.disabled=!this.checked)">
</td>

However this doesnt quite work :-)
I have tried with document.Form.pris but that didnt help either.

cash1981
02-13-2007, 04:58 PM
Sorry for this reply, but I forgot to put email notification on, and I couldnt figure out how I put it on again without writing a reply :p

MikeFoster
02-13-2007, 11:09 PM
Hi Cash,

Welcome to Coding Forums!



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Enable/Disable</title>
<script type='text/javascript'>
if (typeof window.onload == 'function') {motorCheckbox_OL = window.onload;}
window.onload = function()
{
if (window.motorCheckbox_OL) motorCheckbox_OL();
var i, ca;
ca = document.getElementsByName('motorCheckbox');
for (i = 0; i < ca.length; ++i) {
ca[i].onclick = motorCheckbox_click;
}
}
function motorCheckbox_click()
{
// find parent TR
var tr = this.parentNode;
while (tr && tr.nodeName.toLowerCase() != 'tr') {
tr = tr.parentNode;
}
if (tr) {
// get all inputs contained by TR
var i, ia = tr.getElementsByTagName('input');
for (i = 0; i < ia.length; ++i) {
if (ia[i].type.toLowerCase() == 'text') { // filter out 'text' inputs
ia[i].disabled = !this.checked;
}
}
}
}
</script>
</head>
<body>
<h3>Enable/Disable All Text Inputs On Same Row As Checkbox</h3>
<table>
<tr><td><input type="text" size="10" name="pris" disabled="true"></td>
<td><input type="text" size="10" name="toppfart" disabled="true"></td>
<td><input type="text" size="10" name="motorinstallasjon" disabled="true"></td>
<td><input type="checkbox" name="motorCheckbox" value="<%=motor.getId()%>">
</td></tr>
<tr><td><input type="text" size="10" name="pris" disabled="true"></td>
<td><input type="text" size="10" name="toppfart" disabled="true"></td>
<td><input type="text" size="10" name="motorinstallasjon" disabled="true"></td>
<td><input type="checkbox" name="motorCheckbox" value="<%=motor.getId()%>">
</td></tr>
<tr><td><input type="text" size="10" name="pris" disabled="true"></td>
<td><input type="text" size="10" name="toppfart" disabled="true"></td>
<td><input type="text" size="10" name="motorinstallasjon" disabled="true"></td>
<td><input type="checkbox" name="motorCheckbox" value="<%=motor.getId()%>">
</td></tr>
</table>
</body>
</html>

cash1981
02-13-2007, 11:12 PM
Thanks a million! :thumbsup:

sarahshafawati
05-08-2009, 04:39 AM
how to make the texfield and the textarea disabled/enabled at the same time or name by using the checkbox? any idea?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Enable/Disable</title>
<script type='text/javascript'>
if (typeof window.onload == 'function') {motorCheckbox_OL = window.onload;}
window.onload = function()
{
if (window.motorCheckbox_OL) motorCheckbox_OL();
var i, ca;
ca = document.getElementsByName('motorCheckbox');
for (i = 0; i < ca.length; ++i) {
ca[i].onclick = motorCheckbox_click;
}
}
function motorCheckbox_click()
{
// find parent TR
var tr = this.parentNode;
while (tr && tr.nodeName.toLowerCase() != 'tr') {
tr = tr.parentNode;
}
if (tr) {
// get all inputs contained by TR
var i, ia = tr.getElementsByTagName('input');
for (i = 0; i < ia.length; ++i) {
if (ia[i].type.toLowerCase() == 'text') { // filter out 'text' inputs
ia[i].disabled = !this.checked;
}
}
}
}
</script>
</head>
<body>
<h3>Enable/Disable All Text Inputs On Same Row As Checkbox</h3>
<table width="50%" border="1">
<tr>
<th scope="col"><table width="100%">
<tr>
<td width="72"><span class="fieldname">Applicable?</span></td>
<td width="1014">Condition</td>
<td width="70">Score</td>
</tr>
<tr>
<td><input type="checkbox" name="motorCheckbox" value="<%=motor.getId()%>"></td>
<td><textarea name="toppfart" cols="10" disabled style="width:100%">Good: Latest audited annual financial statements are signed off less than 90 days after the financial year end</textarea></td>
<td><input type="text" size="10" name="motorinstallasjon" disabled="true"></td>
</tr>
<tr>
<td><input name="motorCheckbox2" type="checkbox" id="motorCheckbox" value="<%=motor.getId()%>"></td>
<td><textarea name="toppfart" cols="10" disabled id="toppfart" style="width:100%">Acceptable: Latest audited annual financial statements are signed off from 90 to less than 120 days after the financial year end </textarea></td>
<td><input type="text" size="10" name="motorinstallasjon3" disabled="true"></td>
</tr>
<tr>
<td><input name="motorCheckbox2" type="checkbox" id="motorCheckbox" value="<%=motor.getId()%>"></td>
<td><textarea name="toppfart" cols="10" disabled id="toppfart" style="width:100%">Poor: Latest audited annual financial statements are signed off from 120 to less than 180 days after the financial year end </textarea></td>
<td><input type="text" size="10" name="motorinstallasjon2" disabled="true"></td>
</tr>
<tr>
<td><input name="motorCheckbox2" type="checkbox" id="motorCheckbox" value="<%=motor.getId()%>"></td>
<td><textarea name="toppfart" cols="10" disabled id="toppfart" style="width:100%">Unacceptable: Latest audited annual financial statements are signed off 180 days or more after the financial year end or latest audited annual financial statements are not available </textarea></td>
<td><input type="text" size="10" name="motorinstallasjon4" disabled="true"></td>
</tr>
</table></th>
</tr>
</table>
</body>
</html>

adios
05-08-2009, 06:43 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Enable/Disable</title>
<script type='text/javascript'>
if (typeof window.onload == 'function') {motorCheckbox_OL = window.onload;}
window.onload = function()
{
if (window.motorCheckbox_OL) motorCheckbox_OL();
var i, ca;
ca = document.getElementsByName('motorCheckbox');
for (i = 0; i < ca.length; ++i) {
ca[i].onclick = motorCheckbox_click;
}
}
function motorCheckbox_click()
{
// find parent TR
var tr = this.parentNode;
while (tr && tr.nodeName.toLowerCase() != 'tr') {
tr = tr.parentNode;
}
if (tr) {
// get all inputs contained by TR
var i, ipts = tr.getElementsByTagName('input'), tas = tr.getElementsByTagName('textarea');
for (i = 0; i < ipts.length; ++i) {
if (ipts[i].type.match('text')) { // filter out 'text' inputs
ipts[i].disabled = !this.checked;
}
}
for (i = 0; i < tas.length; ++i) {
tas[i].disabled = !this.checked;
}
}
}
</script>
</head>
<body>
<h3>Enable/Disable All Text Inputs On Same Row As Checkbox</h3>
<table width="50%" border="1">
<tr>
<th scope="col"><table width="100%">
<tr>
<td width="72"><span class="fieldname">Applicable?</span></td>
<td width="1014">Condition</td>
<td width="70">Score</td>
</tr>
<tr>
<td><input type="checkbox" name="motorCheckbox" value="foo"></td>
<td><textarea name="toppfart" cols="10" disabled style="width:100%">Good: Latest audited annual financial statements are signed off less than 90 days after the financial year end</textarea></td>
<td><input type="text" size="10" name="motorinstallasjon" disabled="true"></td>
</tr>
<tr>
<td><input name="motorCheckbox" type="checkbox" id="motorCheckbox" value="foo"></td>
<td><textarea name="toppfart" cols="10" disabled id="toppfart" style="width:100%">Acceptable: Latest audited annual financial statements are signed off from 90 to less than 120 days after the financial year end </textarea></td>
<td><input type="text" size="10" name="motorinstallasjon3" disabled="true"></td>
</tr>
<tr>
<td><input name="motorCheckbox" type="checkbox" id="motorCheckbox" value="foo"></td>
<td><textarea name="toppfart" cols="10" disabled id="toppfart" style="width:100%">Poor: Latest audited annual financial statements are signed off from 120 to less than 180 days after the financial year end </textarea></td>
<td><input type="text" size="10" name="motorinstallasjon2" disabled="true"></td>
</tr>
<tr>
<td><input name="motorCheckbox" type="checkbox" id="motorCheckbox" value="foo"></td>
<td><textarea name="toppfart" cols="10" disabled id="toppfart" style="width:100%">Unacceptable: Latest audited annual financial statements are signed off 180 days or more after the financial year end or latest audited annual financial statements are not available </textarea></td>
<td><input type="text" size="10" name="motorinstallasjon4" disabled="true"></td>
</tr>
</table></th>
</tr>
</table>
</body>
</html>

Be sure to give all the 'control' checkboxes the same name.

rinku89
02-02-2011, 10:40 AM
Can I have a radio button intead of a check box? also, is it possible to replace the text field with drop down menus?? please help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum