How to enable/disable multiple textfield with same name using checkbox

cash1981 · 02-13-2007, 03: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:

Code:

<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, 03: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

MikeFoster · 02-13-2007, 10:09 PM

Hi Cash,

Welcome to Coding Forums!

Code:

<!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, 10:12 PM

Thanks a million!

sarahshafawati · 05-08-2009, 03:39 AM

how to make the texfield and the textarea disabled/enabled at the same time or name by using the checkbox? any idea?

Code:

<!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, 05:43 AM

Code:

<!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.

02-13-2007, 03:42 PM	PM User \| #1
cash1981 New Coder Join Date: Feb 2007 Posts: 70 Thanks: 0 Thanked 0 Times in 0 Posts	How to enable/disable multiple textfield with same name using checkbox 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: Code: <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.

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread:

02-13-2007, 03:58 PM	PM User \| #2
cash1981 New Coder Join Date: Feb 2007 Posts: 70 Thanks: 0 Thanked 0 Times in 0 Posts	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

02-13-2007, 10:12 PM	PM User \| #4
cash1981 New Coder Join Date: Feb 2007 Posts: 70 Thanks: 0 Thanked 0 Times in 0 Posts	Thanks a million!