How to hide an empty form field while the form load

**Mamadou** · 08-22-2012, 11:32 AM

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>

**WestWeb** · 08-22-2012, 02:56 PM

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.

**Mamadou** · 08-22-2012, 03:34 PM

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>

**WestWeb** · 08-22-2012, 03:38 PM

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.

**Mamadou** · 08-22-2012, 03:48 PM

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>

**WestWeb** · 08-22-2012, 04:24 PM

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.

**Mamadou** · 08-22-2012, 06:57 PM

Thank you so much. It's working.

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

Thread Tools

Display

How to hide an empty form field while the form load

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions