how to show and hide using javascript on image button and link button's on client click event

Question

I am working on job portal project.In that project,I am having one post resume form.In that form i have to add education information.To add post graduation information i have one image button,i want to show div on clicking the image button.I have used following java script for this

enter code here<script type="text/javascript">

    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if (e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
    }

</script>

I am calling this script on click of following controls

enter code here
<div class="tdBorder" style="height: 18px; width: 170px">
                                <asp:ImageButton ID="imgBtnMasters" runat="server" ImageUrl="~/images/brownAdd.png"
                                    Height="15px" Width="15px" OnClientClick="javascript:toggle_visibility('divMasters')" />
                                <asp:LinkButton ID="lnkBtnMasters" runat="server" Text="Add Masters Education" ForeColor="#663300"
                                    OnClientClick="javascript:toggle_visibility('divMasters')"></asp:LinkButton>
                            </div>

The following is the div that I want to open .

<div id="divMasters">
                                <table style="width: 80%" align="left">
                                    <tr>
                                        <td style="width: 20%">
                                            Your Masters Education:
                                        </td>
                                        <td style="width: 40%">
                                            <asp:DropDownList ID="drpMasters" runat="server" CssClass="TextBox1" Width="150px"
                                                Height="24px">
                                                <asp:ListItem Selected="True">Select</asp:ListItem>
                                                <asp:ListItem Value="1">CA</asp:ListItem>
                                                <asp:ListItem Value="2">CS</asp:ListItem>
                                                <asp:ListItem Value="3">ICWA</asp:ListItem>
                                                <asp:ListItem Value="4">Integrated PG</asp:ListItem>
                                                <asp:ListItem Value="5">LLM</asp:ListItem>
                                                <asp:ListItem Value="6">M.A</asp:ListItem>
                                                <asp:ListItem Value="7">M.Arch</asp:ListItem>
                                                <asp:ListItem Value="8">M.Com</asp:ListItem>
                                                <asp:ListItem Value="9">M.Ed</asp:ListItem>
                                                <asp:ListItem Value="10">M.Pharma</asp:ListItem>
                                                <asp:ListItem Value="11">M.Sc</asp:ListItem>
                                                <asp:ListItem Value="12">M.Tech</asp:ListItem>
                                                <asp:ListItem Value="13">MBA/PGDM</asp:ListItem>
                                                <asp:ListItem Value="14">MCA</asp:ListItem>
                                                <asp:ListItem Value="15">MS</asp:ListItem>
                                                <asp:ListItem Value="16">PG Diploma</asp:ListItem>
                                                <asp:ListItem Value="17">MVSC</asp:ListItem>
                                                <asp:ListItem Value="18">MCM</asp:ListItem>
                                                <asp:ListItem Value="19">Other</asp:ListItem>
                                            </asp:DropDownList>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 20%">
                                            Specialization:
                                        </td>
                                        <td style="width: 40%">
                                            <asp:TextBox ID="txtMstSpecialization" runat="server" CssClass="TextBox1" Width="250px"></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </div>

I have tried with the above javascript, div get open but the problem is page get postback so the div get hide again. I am not getting what is going wrong with this script.Suggest me any solution for this. Thanks in advance.

Sain Pradeep · Accepted Answer · 2013-09-03 05:20:48Z

3

You need return false from javascript to stop post back the page.

OnClientClick="javascript:toggle_visibility('divMasters'); return false;"

or

 function toggle_visibility(id) {
        var e = document.getElementById(id);
        if (e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
         return false;
    }

answered Sep 3, 2013 at 5:20

Sain Pradeep

3,1351 gold badge24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sain Pradeep Over a year ago

If answer solves the problem then you should mark the answer accepted so other can pick this answer.

Collectives™ on Stack Overflow

how to show and hide using javascript on image button and link button's on client click event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related