I want to write this function once. How?

Here's my challenge: I have a list could have one row, it could have several. It's coming in as an array so it looks like this:

                           <td width='".($leftcol-25-100)."'><span class='info'>".$allocatedlist[$i]["shortname"]."</span></td>
                    <td width='75'><span class='info'>$".number_format($allocatedlist[$i]["totalcost"],2)."</span></td>
                    <td width='75'><span class='info'><input type='text' size='10' class='cer' name='allocated' value='$".number_format($allocatedlist[$i]["allocatedamount"],2)."' onchange='visibility()'></span></td>
                    <td>&nbsp;<div id='save_".$i."' style='visibility:hidden; display:inline; vertical-align:center;'><img src='images/save_icon.gif' width='15></div> 

Open in new window

The bottom line is that on every row, I have an input field (allocated). Should my user make any changes to that dollar amount, as soon as they finish, my save icon become visible to the immediate right.

My JavaScript looks like this:

function visibility() {
    document.getElementById('save_1').style.visibility = 'visible';

Open in new window

You'll notice that my ID is "save_1." I started playing with the id on the HTML side and you can see the beginning of that thought process where you see ;<div id='save_".$i."'

I'm thinking that this is possible: I want to pass that "$i" value into my JavaScript function so that it makes the correct row visible and I'm not having to write the same script over and over again, which I couldn't in any case because I'm never going to have the same number of rows.

So, how can I pass that "$i" value into my script so I can have that save icon show up on every row?

Looking forward to getting some input!
brucegustPHP DeveloperAsked:
Who is Participating?
Ken ButtersConnect With a Mentor Commented:
Thinking you should be able to use "this".
<input type='text' size='10' class='cer' name='allocated' value='$".number_format($allocatedlist[$i]["allocatedamount"],2)."' onchange='visibility(this)'>

Open in new window

Then in your javascript routine something like this :

I didn't test... so may not have the relationship between the nodes accurately reflected... but I think you probably get the idea.

function visibility(obj) {
   var objectToChange;
    objectToChange = obj.nextSibling;
    objectToChange = 'visible';

Open in new window

Sar1973Connect With a Mentor Commented:
Try to replace onchange='visibility()' with onchange='visibility(this.name);' and use this function:
function visibility(myObject) {
Otherwise, set:  
onchange="document.getElementById('this.name').style.display='inline';" directly.
All Courses

From novice to tech pro — start learning today.