Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

  • #2
    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

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    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>

  • #4
    New Coder
    Join Date
    Feb 2007
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a million!

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to enable/disable textfield and textarea with same name using checkbox

    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>

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •