CODEWITHSUNDEEP
javascripthtml
Von Justine Napalang
Von Justine Napalang

Reputation: 67

Popup Form bug on Onclick

i have these botton that when click should the Popup form show. but what happening is it's poping up for a second then gone when click what im doing wrong? I think my code is alright.

button code:

<button onclick="Openform()">Add New WorkStation</button>

javascript:

 <script>
        function Openform() {
            document.getElementById('popupform').style.display = "block";
        }
    </script>

css:

.divpopup {
                margin-left: auto;
                margin-top: auto;
                display: none;
            }

the div that should popup:

 <div id="popupform" class="divpopup">

            <asp:TextBox ID="txtWorkStation" runat="server" placeholder="WorkStation Name"></asp:TextBox><br />
            <asp:DropDownList ID="ddlWorkStation" runat="server">
                <asp:ListItem Text="Active" Value="1"></asp:ListItem>
                <asp:ListItem Text="InActive" Value="0"></asp:ListItem>
            </asp:DropDownList><br />
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
    </div>

Upvotes: 3

Views: 232

Answers (1)

wazz
wazz

Reputation: 5058

It's because you're using a button, and that causes a postback that resets the page.

You can add a return value that basically cancels the original postback of the button:

<button onclick="Openform(); return false;">Add New WorkStation</button>

Or use an input of type button:

<input type="button" onclick="Openform()" value="Add New WorkStation" />

Or another way of canceling the button's natural postback behavior:

function Openform() {
    event.preventDefault();
    document.getElementById('popupform').style.display = "block";
}

Upvotes: 2

Related Questions