Question

I have the following code snippet in my page.

<script type="text/javascript">
      function expandCollapse(id){
        var produtos;
        if(id != null){
            produtos = document.getElementById("produtos_str21");
            if(produtos != null){ 
                if(produtos.style.display != "none"){
                    id.src="imgs/minus.png";
                    produtos.style.display = "none";
                }else{
                       id.src="imgs/plus.png";
                    produtos.style.display = "block";
                }
            }
        }
        return false;
    }
</script>
    <td>
       <input type="checkbox" name="pedidosSelected" value="str26" id="selectPedido_str26">
       <input type="image" name="" src="imgs/plus.png" onclick="javascript:expandCollapse(this)"                 id="colExpPedido_str21">
    </td>
    <td>str1</td>
    <td>str26</td>

*->The table is inside a form

Every time that i click in the image , i go to the expandCollapse function like is expected but when i enter in the if statement that checks if the display is “block” or “none” , the page makes a post and it never “expand” or “collapse” the table.Even that i comment the code id.src=”imgs/minus.png” the post happen.Why is happening the post ?
And if this does not happen , every time that i change the src attribute of the img , it will make a POST or a GET to download de image ?If yes how can i switch between two images without download them everytime that i change the src attribute

Answer 1

An input type="image" is a form submission element. You appear to have no form but one is probably being created implicitly by the renderer to make your HTML actually valid. Then, you’re doing nothing to prevent the form submission from taking place.

What’s wrong with the <img> tag?