SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Location
    Kuching, Sarawak
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript function not working

    Hi there,


    I have a javascript function which I do not know why is it not working.

    Here is the function:
    Code:
    detailTableDept.prototype.changeVisibility = function()
    {
      if(document.getElementById('userDept') == "OTHERS"){
      //show
      document.getElementById('otherDept').style.visibility = "visible";
      document.getElementById('otherDept').style.display = "";
      }else{
      //hide
      document.getElementById('otherDept').style.visibility = "hidden";
      document.getElementById('otherDept').style.display = "none";
      document.getElementById('otherDept').value ="";
      }
      this.renderDetailTableDept();
    }
    HTML code

    HTML Code:
        segTable += "<tr>"; else segTable += "<tr class='trAlt2'>";
        segTable += "<td>"+no+".</td>";
        segTable += "<td nowrap width='50%'>";
        segTable += '<textarea name="'+userDept+'" id="'+userDept+'" style="height:40px;" size = "95" maxlength = "95" onChange="detailTableDept.changeValue('+i+',\'userDept\',this.value);   detailTableDept.changeVisibility();">'+userDeptSelected+'</textarea></td>';
        segTable += "<td nowrap width='50%'>";
        segTable += '<textarea name="'+otherDept+'" id="'+otherDept+'" style="height:40px; visibility:hidden;" size = "95" maxlength = "95" onChange="detailTableDept.changeValue('+i+',\'otherDept\',this.value);">'+otherDeptSelected+'</textarea></td>';
        segTable += "<td><input type=\"button\" name=\"Remove\" value=\"X\" onClick=\"detailTableDept.remove('"+i+"', false);\" class=\"remove\"></td>";
        segTable += '</tr>';
    I need to hide and display the second textarea based on the value enter on the 1st textarea. The purpose of the js function above is to display the 2nd textarea when the value of "OTHERS"
    entered into the 1st textarea, or else hide the 2nd textarea.

    But the javascript is not functioning as I want it to.

    Please advise. Thanks in advance.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,000
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I think you'll need to change the line that checks the textfield's value to this:

    Code JavaScript:
    if(document.getElementById('userDept').value == "OTHERS")

    and you'll need to include a display property if the other text field was previously hidden:

    Code JavaScript:
    document.getElementById('otherDept').style.display = "block";

    Here's a quick example of a function that does what you describe above.
    Maybe playing around with this will help you.

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Show text area</title>
        <style>#hiddenTextArea{display:none;}</style>
      </head>
      
      <body>
        <textarea id="userDept"></textarea>
        <textarea id="hiddenTextArea"></textarea>
        
        <script>
          var t1 = document.getElementById('userDept');
          var t2 = document.getElementById('hiddenTextArea');
          
          t1.oninput = function(){
            if (t1.value == "OTHER"){
              t2.style.display = "block";
            };
          }
        </script>
      </body>
    </html>


Tags for this Thread

Bookmarks

Posting Permissions

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