Question

I have on this page a clickable +/- icon that will expand and collapse a table of information when the user clicks on it in the jsp page, but the issue is that if the user tabs to this icon and try to expand/collapse it by pressing the enter button, the javascript won’t run; it only works with mouse click for some reason. Here’s what I have on the jsp page:

<td>
<a onclick="hideShowTable(${count}, this.id)" style="cursor:hand"
title="Expand/Collapse Table" tabindex="40"
id="eCTable${count}"
>+  
</a>
</td>

That executes this function in the js file:

function hideShowTable(tableCounter, id)
{
    //Loop through all rows of the month
    for(i=1; i<=12; i++)
    {
    var tableElm = document.getElementById("tableMonth"+ i +"_"+tableCounter);

    //Hide or show the div tag
    if (tableElm .style.display == "block"){
        tableElm .style.display = "none";
        document.getElementById(id).innerText="+";
    }
    else{
        tableElm .style.display = "block";
        document.getElementById(id).innerText="-";
    }

}

}

Answer 1

The description says:

The onclick event occurs when the pointing device button is clicked over an element. This attribute may be used with most elements.

I think you can try using form’s onsubmit() rather than onclick() . Give a try..