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 13 of 13
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple text field disabling and enabling.

    Task:
    I have 4 text fields within a form: fullName, givenName, surname, and AKA. These fields need to be disabled/enabled accordingly:

    When users enter data into the fullName text field, the givenName, surname, and AKA text fields should become disabled-clearing out any text.

    When users enter data into either the givenName, surname, or AKA text fields the fullName text field should become disabled-clearing out any text.

    When text from any of the text fields is cleared out, all fields should become available/enabled again on the fly.

    I've come across the following code that performs almost exactly what I need to accomplish, however it will disable any of the fields that does not have data. And I need to tie the givenName, surname, and AKA to the fullName.

    Can anyone figure this one out?

    Code:
    var flg = false;
    function chk() {
        var field = document.getElementById( "QueryForm" );
        if (field.fullName.value.length==0&&
            field.givenName.value.length==0&&
            field.surname.value.length==0&&
            field.indAKA.value.length==0) {
            flg=false;
        }
    }
    Code:
    function disablefield(which) {
        chk();
        if (flg&&which.value.length==0) {
            which.blur();
        } else {
            flg = true;
        }
    }
    Code:
    <td><html:text property="fullName" styleId="fullName" styleClass="inputNormal" size="20" onfocus="disablef(this);" /></td>
    <td><html:text property="givenName" styleId="givenName" styleClass="inputNormal" size="20" onfocus="disablef(this);" /></td>
    <td><html:text property="surname" styleId="surname" styleClass="inputNormal" size="20" onfocus="disablef(this);" /></td>
    <td><html:text property="indAKA" styleId="indAKA" styleClass="inputNormal" size="20" onfocus="disablef(this);" /></td>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function zxcCkInputs(zxcobj){
     var zxcips=zxcobj.getElementsByTagName('INPUT');
     for (var zxc0=0;zxc0<zxcips.length;zxc0++){
      zxcips[zxc0].removeAttribute('disabled');
      if (zxcips[0].value.length>0&&zxc0>0){
       zxcips[zxc0].value='';
       zxcips[zxc0].setAttribute('disabled','disabled');
      }
      else if (zxcips[zxc0].value.length>0&&zxc0>0){
       zxcips[0].value='';
       zxcips[0].setAttribute('disabled','disabled');
       break;
      }
     }
    }
    //-->
    </script></head>
    
    <body>
    <div onmouseout="zxcCkInputs(this);" >
    fullname <input name="fullname" ><br>
    givenName <input name="givenName" >
    surName <input name="surName" >
    AKA <input name="AKA" >
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Javascript Genius...

    Thanks so much for your help Vic. Your function to loop through each of the fields is quite efficient unlike the code I presented. Works like a charm. Your a javascript Genius -

    Thanks again for your help.

  • #4
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pasting of text allowed between disabled fields.

    Performed some more testing, and found a small issue that involves the ability to tab and paste text between all text fields-which seems to be a loop hole within the disabling method. Any ideas around this issue?

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    just done a quick test

    and pasting into first and another textfield gives priority to field 1 and clears/disables the other text fields on mouse out of the parent.

    This is what I would expect.

    Any event call to the funtion will give priority to the first text box if it has a value length and clear/disable the others.

    can you post the code or link, so I can see the problem you discribe.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Works great with mouse movement...however...

    Thanks for responding so quickly. Code is all pretty much as you have written. When testing, I essentially paste some text into the Full Name text field (all the while never touching or moving the mouse), and then TAB over to the other fields, then paste text into any of the Given Name, Surname, and/or AKA text fields and press the Enter key (all the while never touching or moving the mouse). At this point none of the text fields are disabled because I never performed a mouseout. Pressing the Enter key will initiate my desired action (which is essentially a query or search for that particular text field). Any ideas? Thanks again for your help.

  • #7
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Current code...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    
    <script language="JavaScript" type="text/javascript">
          function ckInputs(fieldObj) {
              var txtFld=fieldObj.getElementsByTagName('INPUT');
              for (var i=0;i<txtFld.length;i++) {
                  txtFld[i].removeAttribute('disabled');
                  if (txtFld[0].value.length>0&&i>0) {
                      txtFld[i].value='';
                      txtFld[i].setAttribute('disabled','disabled');
                  } else if (txtFld[i].value.length>0&&i>0) {
                      txtFld[0].value='';
                      txtFld[0].setAttribute('disabled','disabled');
                      break;
                  }
              }
          }
    </script>
    
    </head>
    
    <body>
    
    <div onmouseout="ckInputs(this);" >
        <table cellpadding="0" cellspacing="0">
            <col width="180" span="3" />
            <tbody class="bgColor-Light-Bold">
            <tr>
                <td>Name</td>
                <td>Given Name</td>
                <td>Surname</td>
                <td>AKA</td>
            </tr>
            <tr>
                <td><input name="fullName" ></td>
                <td><input name="givenName" ></td>
                <td><input name="surname" ></td>
                <td><input name="indAKA" ></td>
            </tr>
            </tbody>
        </table>
    </div>
    
    </body>
    
    </html>

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    he Enter key will initiate my
    that is call a function?

    then before calling the function or at the start of the function
    call ckInputs(fieldObj);

    this requires that the DIV is given an ID and use document.getElementById
    of refer to one of the textboxes(objs). obj.parentNode
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    or addit line to accept the DIV object or ID

    edit main difference is the addition of the on focus ip events(belt and braces)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function zxcCkInputs(zxcobj){
     if (typeof(obj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     var zxcips=zxcobj.getElementsByTagName('INPUT');
     for (var zxc0=0;zxc0<zxcips.length;zxc0++){
      zxcips[zxc0].removeAttribute('disabled');
      if (zxcips[0].value.length>0&&zxc0>0){
       zxcips[zxc0].value='';
       zxcips[zxc0].setAttribute('disabled','disabled');
      }
      else if (zxcips[zxc0].value.length>0&&zxc0>0){
       zxcips[0].value='';
       zxcips[0].setAttribute('disabled','disabled');
       break;
      }
     }
    }
    //-->
    </script></head>
    
    <body>
    <div id="Tst1" onmouseout="zxcCkInputs(this);" >
    fullname <input name="fullname" onfocus="zxcCkInputs(this.parentNode)" ><br>
    givenName <input name="givenName" onfocus="zxcCkInputs(this.parentNode)" >
    surName <input name="surName" onfocus="zxcCkInputs(this.parentNode)" >
    AKA <input name="AKA" onfocus="zxcCkInputs('Tst1')" >
    </div>
    </body>
    
    </html>
    Last edited by vwphillips; 01-31-2007 at 08:51 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #10
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Not following exactly...receiving a javascript error...

    Here is my current code that recieves the javascript error as described below:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    
    <script language="JavaScript" type="text/javascript">
          function ckInputs(fieldObj) {
           if (typeof(obj)=='string') { fieldObj=document.getElementById(fieldObj); }
              var txtFld=fieldObj.getElementsByTagName('INPUT');
              for (var i=0;i<txtFld.length;i++) {
                  txtFld[i].removeAttribute('disabled');
                  if (txtFld[0].value.length>0&&i>0) {
                      txtFld[i].value='';
                      txtFld[i].setAttribute('disabled','disabled');
                  } else if (txtFld[i].value.length>0&&i>0) {
                      txtFld[0].value='';
                      txtFld[0].setAttribute('disabled','disabled');
                      break;
                  }
              }
          }
    </script>
    
    </head>
    
    <body>
    
    <div id="Tst1" onmouseout="ckInputs(this);" >
        <table cellpadding="0" cellspacing="0">
            <col width="180" span="3" />
            <tbody class="bgColor-Light-Bold">
            <tr>
                <td>Name</td>
                <td>Given Name</td>
                <td>Surname</td>
                <td>AKA</td>
            </tr>
            <tr>
                <td><input name="fullName" onfocus="ckInputs(this.parentNode)" ></td>
                <td><input name="givenName" onfocus="ckInputs(this.parentNode)" ></td>
                <td><input name="surname" onfocus="ckInputs(this.parentNode)" ></td>
                <td><input name="indAKA" onfocus="ckInputs('Tst1')" ></td>
            </tr>
            </tbody>
        </table>
    </div>
    
    </body>
    
    </html>
    I am receiving a javascript error when attempting to TAB and paste data into supposed disabled multiple text fields (without using the mouse), once I reach the last field (AKA) I receive the following error:
    "fieldObj.getElementsByTagName is not a function" Line: 12.

    I guess I am not following your logic in regards to the additional added code from your earlier post. Could you please elaborate. Sorry, just not following. Again thanks for all your help. I am just getting frustrated with something that just seems rather simple to accomplish.

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    couple of things

    where the mouseout node is not the direct parent of the input the ID must be used

    In your application you could use the TR of the input table row as this is the first common parent in the DOM tree

    also you had a typo in the typeof parameter.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    
    <script language="JavaScript" type="text/javascript">
    function ckInputs(fieldObj) {
     if (typeof(fieldObj)=='string') { fieldObj=document.getElementById(fieldObj); }
     var txtFld=fieldObj.getElementsByTagName('INPUT');
     for (var i=0;i<txtFld.length;i++) {
      txtFld[i].removeAttribute('disabled');
      if (txtFld[0].value.length>0&&i>0) {
       txtFld[i].value='';
       txtFld[i].setAttribute('disabled','disabled');
      }
      else if (txtFld[i].value.length>0&&i>0) {
       txtFld[0].value='';
       txtFld[0].setAttribute('disabled','disabled');
       break;
      }
     }
    }
    </script>
    
    </head>
    
    <body>
    
    <div id="Tst1" onmouseout="ckInputs(this);" >
        <table cellpadding="0" cellspacing="0">
            <col width="180" span="3" />
            <tbody class="bgColor-Light-Bold">
            <tr>
                <td>Name</td>
                <td>Given Name</td>
                <td>Surname</td>
                <td>AKA</td>
            </tr>
            <tr>
                <td><input name="fullName" onfocus="ckInputs(Tst1)" ></td>
                <td><input name="givenName" onfocus="ckInputs(Tst1)" ></td>
                <td><input name="surname" onfocus="ckInputs(Tst1)" ></td>
                <td><input name="indAKA" onfocus="ckInputs('Tst1')" ></td>
            </tr>
            </tbody>
        </table>
    </div>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #12
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Bullseye! That's it! Hail to the JS Guru!

    Your code tweak is perfect, you really know your stuff. Again all my thanks for directing me through this issue. I now have a better understanding of using the DOM with javascript. I can only hope to be as knowledgeable as you someday. I better keep reading up and getting more experience. Again much thanks to you.

  • #13
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Enhancement added...

    Just changed the onfocus event with onkeyup - works great.

    Enhancement:

    Code:
    <td><input name="fullName" onkeyup="ckInputs('Tst1')" ></td>
    <td><input name="givenName" onkeyup="ckInputs('Tst1')" ></td>
    <td><input name="surname" onkeyup="ckInputs('Tst1')" ></td>
    <td><input name="indAKA" onkeyup="ckInputs('Tst1')" ></td>
    Full Code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    
    <script language="JavaScript" type="text/javascript">
    function ckInputs(fieldObj) {
     if (typeof(fieldObj)=='string') { fieldObj=document.getElementById(fieldObj); }
     var txtFld=fieldObj.getElementsByTagName('INPUT');
     for (var i=0;i<txtFld.length;i++) {
      txtFld[i].removeAttribute('disabled');
      if (txtFld[0].value.length>0&&i>0) {
       txtFld[i].value='';
       txtFld[i].setAttribute('disabled','disabled');
      }
      else if (txtFld[i].value.length>0&&i>0) {
       txtFld[0].value='';
       txtFld[0].setAttribute('disabled','disabled');
       break;
      }
     }
    }
    </script>
    
    </head>
    
    <body>
    
    <div id="Tst1" onmouseout="ckInputs(this);" >
        <table cellpadding="0" cellspacing="0">
            <col width="180" span="3" />
            <tbody class="bgColor-Light-Bold">
            <tr>
                <td>Name</td>
                <td>Given Name</td>
                <td>Surname</td>
                <td>AKA</td>
            </tr>
            <tr>
                <td><input name="fullName" onkeyup="ckInputs('Tst1')" ></td>
                <td><input name="givenName" onkeyup="ckInputs('Tst1')" ></td>
                <td><input name="surname" onkeyup="ckInputs('Tst1')" ></td>
                <td><input name="indAKA" onkeyup="ckInputs('Tst1')" ></td>
            </tr>
            </tbody>
        </table>
    </div>
    
    </body>
    
    </html>


  •  

    Posting Permissions

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