www.webdeveloper.com
Results 1 to 7 of 7

Thread: How to hide an empty form field while the form load

  1. #1
    Join Date
    Aug 2012
    Posts
    7

    How to hide an empty form field while the form load

    For example, I have the tabel below and would like to know when using java script how the field with value="" be hidden when the form loads.



    <table width="150" height="100" bgcolor="#fffccc" >

    <tr>

    <th>

    <input type="text" value=""id="table1"
    <input type="text" value="1234"id="table2">
    <input type="text" value="12345"id="table3">
    </th>

    </tr>

    </table>

  2. #2
    Join Date
    Jul 2009
    Posts
    184
    If you can use JQuery it's super easy:

    Code:
    ​$('#yourForm input[value=""]').hide();​
    With just javascript you could try this:

    Code:
    var inputs = document.getElementById('yourForm').getElementsByTagName('input');
    
    for(i = 0; i < inputs.length; i++)
    {
        if(inputs[i].value=="")
        {
            inputs[i].style.display = "none";
        }
    }
    Note that both examples assume you have a form with id="yourForm" for the inputs you want to manipulate.

  3. #3
    Join Date
    Aug 2012
    Posts
    7
    I've tried what u said but for some reason, it still does not work.


    <!DOCTYPE html>
    <html>
    <script>
    funcrion Hideme(){
    var inputs = document.getElementById('table1').getElementsByTagName('input');

    for(i = 0; i < inputs.length; i++)
    {
    if(inputs[i].value=="")
    {
    inputs[i].style.display = "none";
    }
    }
    }
    </script>

    <body onload="HideMe();">


    <table width="150" height="100" bgcolor="#fffccc" >

    <tr>

    <th>

    <input type="text" value=""id="table1">
    <input type="text" value="1234"id="table2">
    <input type="text" value="12345"id="table3">
    </th>

    </tr>

    </table
    </body>
    </html>

  4. #4
    Join Date
    Jul 2009
    Posts
    184
    The first thing I see is that your table does not have id="table1", so the code won't be able to find the table without that.

    The second thing I noticed is this typo: "funcrion Hideme()". That's not how you spell "function".

    Try making those changes.

  5. #5
    Join Date
    Aug 2012
    Posts
    7
    Thank you so much for your help but still not working. I made the changes you suggested.
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function Hideme(){
    var inputs = document.getElementById('table1').getElementsByTagName('input');

    for(i = 0; i < inputs.length; i++)
    {
    if(inputs[i].value=="")
    {
    inputs[i].style.display = "none";
    }
    }
    }
    </script>
    </head>
    <body onload="HideMe();">


    <table width="150" height="100" bgcolor="#fffccc" id="table1" >

    <tr>

    <th>

    <input type="text" value=""id="table4">
    <input type="text" value="1234"id="table2">
    <input type="text" value="12345"id="table3">
    </th>

    </tr>

    </table
    </body>
    </html>

  6. #6
    Join Date
    Jul 2009
    Posts
    184
    Ok, you definitely need to watch those typo's, no offense or anything: but, that seems to be the only issue you are having.

    The problem was that you are calling a function named "HideMe()" in your body tags onload action, but the functions name is actually "Hideme()" (ie lower case "me" should be capitalized to "Me").

    Make sure those match and it should work fine.

    Also, for future reference, when you are pasting code into a post, use the little code button(looks like a #) to wrap your code in [CODE] tags, so people trying to help you can read your code better.
    Last edited by WestWeb; 08-22-2012 at 05:28 PM.

  7. #7
    Join Date
    Aug 2012
    Posts
    7
    Thank you so much. It's working.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles