I was created a table with <table> tag and id is 'calendarid'. In this each td contains a textbox and an image. Some textboxes contain value and some are empty. I want to hide the image where textbox contains no value(or empty).I have used following java script code to do this, but not working.Here all images are hiding with the following code.

var table = document.getElementById( 'calendarid' ); 
    var inputs = table.getElementsByTagName( 'input' ); 

    //get all inputs inside a table
    for(var z=0;z<inputs.length;z++){    
        var input_id =  String(inputs[z].id); 
        var splitVal = input_id.split("_");

        var image_id = String(splitVal[0] + '_' + splitVal[2] + '_' + splitVal[1]);             
        var spentHrs = document.getElementById(input_id).value;             

        if(spentHrs == 0) {
            document.getElementById(image_id).style.display = "none";
            }
        else { }    

    }

If I use alert then code is working fine(see below code). But I dont want to show alert. What is the reason for this behaviour ? and how to solve this?

var table = document.getElementById( 'calendarid' ); 
        var inputs = table.getElementsByTagName( 'input' ); 

        //get all inputs inside a table
        for(var z=0;z<inputs.length;z++){    
            var input_id =  String(inputs[z].id); 
            var splitVal = input_id.split("_");

            var image_id = String(splitVal[0] + '_' + splitVal[2] + '_' + splitVal[1]);             
            var spentHrs = document.getElementById(input_id).value;             
                **alert(spentHrs);**
            if(spentHrs == 0) {
                document.getElementById(image_id).style.display = "none";
                }
            else { }    

        }

Hi venkyb47,

Can you put your script at the end of the body tag. Like this:

<body>

    ... some wierd HTML stuff


    <script>

    ...put your javascript here

    </script>
</body>

Then tell me if this works.

I have written js code on .js file and html code is inside .php file. I am calling java script code on php page load.

can you place your html code here? (if no one object in this forum)
so that i will answer your question very soon.

userpage.php

<table cellpadding="0" cellspacing="0" class="calendar" id="calendarid">
<tr>
    <td class="calendar-day"><input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$mon.'"  class="timetracktb"></input><img id="'.$parentID.'_'.$mon.'_'.$activityid.'" src="phpimages/trash.png" title="delete timelog" alt="trash icon" style="border:none;cursor:pointer;margin:0 0 0 5px"></img></td>
    <td class="calendar-day"><input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$tue.'"  class="timetracktb"></input><img id="'.$parentID.'_'.$tue.'_'.$activityid.'" src="phpimages/trash.png" title="delete timelog" alt="trash icon" style="border:none;cursor:pointer;margin:0 0 0 5px"></img></td>
    <td class="calendar-day"><input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$wed.'"  class="timetracktb"></input><img id="'.$parentID.'_'.$wed.'_'.$activityid.'" src="phpimages/trash.png" title="delete timelog" alt="trash icon" style="border:none;cursor:pointer;margin:0 0 0 5px"></img></td>
    <td class="calendar-day"><input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$thu.'"  class="timetracktb"></input><img id="'.$parentID.'_'.$thu.'_'.$activityid.'" src="phpimages/trash.png" title="delete timelog" alt="trash icon" style="border:none;cursor:pointer;margin:0 0 0 5px"></img></td>
    <td class="calendar-day"><input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$fri.'"  class="timetracktb"></input><img id="'.$parentID.'_'.$fri.'_'.$activityid.'" src="phpimages/trash.png" title="delete timelog" alt="trash icon" style="border:none;cursor:pointer;margin:0 0 0 5px"></img></td>
    <td class="calendar-day"><input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$sat.'"  class="timetracktb"></input><img id="'.$parentID.'_'.$sat.'_'.$activityid.'" src="phpimages/trash.png" title="delete timelog" alt="trash icon" style="border:none;cursor:pointer;margin:0 0 0 5px"></img></td>
    <td class="calendar-day"><input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$sun.'"  class="timetracktb"></input><img id="'.$parentID.'_'.$sun.'_'.$activityid.'" src="phpimages/trash.png" title="delete timelog" alt="trash icon" style="border:none;cursor:pointer;margin:0 0 0 5px"></img></td>
</tr>
</table> 

    echo "<SCRIPT LANGUAGE='javascript'>loadData();</SCRIPT>"; 

Like this when form loads first table was drawn with textboxes and image.After that loaddata() function will be called.Some textboxes contain value like 3.40 or 2.00 only decimal value and I try to hide image in which td textbox doesnot contain value.

   globalcode.js  \\java script file

function loadData()
{

    \\ here json code to get value and place it in corresponding textbox.

    /* get all input id inside a table */
var table = document.getElementById( 'calendarid' ); 
    var inputs = table.getElementsByTagName( 'input' ); 
    //get all inputs inside a table
    for(var z=0;z<inputs.length;z++)
    {    
        var input_id =  String(inputs[z].id); 
        var splitVal = input_id.split("_");
        var image_id = String(splitVal[0] + '_' + splitVal[2] + '_' + splitVal[1]);             
        var spentHrs = document.getElementById(input_id).value;             
        if(spentHrs == 0) {
            document.getElementById(image_id).style.display = "none";
            }
        else { }    
    }
}   

instead of line15 at userpage.php
try to plcae the following code

<script type="text/javascript"> setTimeout(your_function_name,3000) </script>

and let me know the status after modifying the code

and also there will be some synchronization problem with the code which is relating (at line 6 ) to the json data

please first you try to replace code then we will sort out the answer

Another option is to execute the function on page load, like this:

window.onload = function() {
    loadData();
};

Just a suggestion, instead of concat the ID's in different orders for the input and for img, wouldn't it be easier to add a sufix?
IE.:

// Set IDs
<td class="calendar-day">
    <input type="text" size=5 id="'.$parentID.'_'.$activityid.'_'.$mon.'"  class="timetracktb" />
    <img id="'.$parentID.'_'.$activityid.'_'.$mon.'_IMG" src="phpimages/trash.png" title="delete timelog" alt="trash icon"  />
</td>

// And to get the Img
var inputId = inputs[i].id;
var imgId = inputId + '_IMG';

Another thing, you don't have to add closing tags for <input> and <img>, they can close themselfs, like <img id="a" /> and <input id="b" />

Also, avoid using those inline styles. Use the css classes that you already have.

AleMonteiro, got the best option for executing a script after page loads.

Although, here;s another option if you're looking for executing scripts in different document states.

document.onreadystatechange = function(){
    if(document.readyState == "complete"){
        // ...
        // Call your function here or do something
        // ...
    }
};

Or, placing your script at the end of the Body tag.
Anyway, it's your choice, it depends on what you're doing or strategy.

Let us know if you've found and fixed the bugs or still needs a hand.

I agree to AleMonteiro and gon1387, you should try using what they suggested. Make sure the elements are loaded first before manipulating them.

can you show how you get the json data to your page?

i think thats doing the major part of your problem

check once whether you getting json data in synchronization mode or not

Thanks to all.
I was changed code like that by default I make image as display none using css. After getting json data in java script I make image as display block by checking condition.Now code works fine.
Thanks for your reply.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.