DHTML - Index of clicked button

Question

I have just started coding my asset management page where admin can manage all assets from the web page. From this page, admin can rename the assets and add the assets (which are not yet added in the db) to the db using the form interface.

Below is the embeded html code in the php file

<tr>

    <td><img src="<?php echo $newAssetsUrl.$asset->name ?>" width="50px" height="50px"/></td>
    <td><span name="inboxImgName"><?php echo $asset->name?></span>
        <input type="button" name="inboxEdit" value="Rename" onclick="alert(this.name),toggleInboxEditSave(<?php echo $i?>)"/>
        <input type="text" style="visibility:hidden"
            name="inboxNewImageName" value="<?php $asset->name ?>"/>
    </td>
    <td><?php echo $asset->getTypeName()?></td>
    <td><input type="checkbox" name="" value="Add"/>
    <input type="hidden" name="imageName[]" value="<?php echo $asset->name ?>"/>

</tr>

Now the javascript which toggles the show/hide the edit box to rename the asset name and toggles the button's text to save/edit

function toggleInboxEditSave(idx){

    btn = document.getElementsByName("inboxEdit")[idx];

    curState = btn.value;

    lbl = document.getElementsByName("inboxImgName")[idx];
    txt = document.getElementsByName("inboxNewImageName")[idx];

    if (curState == "Rename"){

        btn.value = "Save";
        //alert("going to save");
        lbl.style.visibility = "hidden";
        txt.style.visibility = "visible";

    }else{

        btn.value = "Rename";

        lbl.style.visibility = "visible";
        txt.style.visibility = "hidden";

    }

}

I am going to implement the code in "Add"'s click event which will add the entry in the db and remove it from the html page.

This is working fine so for me. How ever, I just want to avoid the seeding of the index number using this code

 toggleInboxEditSave(<?php echo $i?>)

The reason being, I am planning to implement the ajax, and I will remove the rows dynamically after assets are added. which makes my javascript fail because the index numbers wont be valid anymore, except the user clicks on "add" button (which I am going to add).

Can you suggest any better way to get the index of the button being clicked?

Thanks in advance

Answer 1

Try this

<tr>

    <td><img src="<?php echo $newAssetsUrl.$asset->name ?>" width="50px" height="50px"/></td>
    <td><span name="inboxImgName_<?php echo $asset->name?>"><?php echo $asset->name?></span>
        <input type="button" name="inboxEdit_<?php echo $asset->name?>" value="Rename" onclick="alert(this.name),toggleInboxEditSave(this)"/>
        <input type="text" style="visibility:hidden"
            name="inboxNewImageName_<?php echo $asset->name?>" value="<?php $asset->name ?>"/>
    </td>
    <td><?php echo $asset->getTypeName()?></td>
    <td><input type="checkbox" name="" value="Add"/>
    <input type="hidden" name="imageName[]" value="<?php echo $asset->name ?>"/>

</tr>

function toggleInboxEditSave(obj){

btn = obj;

curState = btn.value;
curid = (btn.name).split("_")[1];

lbl = document.getElementsByName("inboxImgName"+curid)[0];
txt = document.getElementsByName("inboxNewImageName"+curid)[0];

if (curState == "Rename"){

    btn.value = "Save";
    //alert("going to save");
    lbl.style.visibility = "hidden";
    txt.style.visibility = "visible";

}else{

    btn.value = "Rename";

    lbl.style.visibility = "visible";
    txt.style.visibility = "hidden";

}

}

Hope this helps you