user1089345 user1089345 - 3 months ago 7
ASP.NET (C#) Question

Javascript code is not working on putting html code inside 'form' tag. why?

this is my code

I have a aspx file. I have two javascripts code in it. I have a css code also. I need to fade out the label on button click. It is working when I without use form tag and why not working on using form tag.



<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<style type="text/css">
.notification
{
background-color:#006699;
min-height:40px;
width:30%;
margin:0 auto;
text-align:center;
line-height:50px;
color:#fff;
font-size:18px;
box-shadow: 10px 10px 5px #888888;
}
</style>


<script src="google.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(".btn1").click(function () {
$("#dvMsg").fadeOut(5000, 0, 0);
});

});
</script>

</head>
<body>
<form id="form1">
<div id="dvMsg" class="notification" runat="server" visible="true">
<asp:Label ID="lblMsg" runat="server" Text="This is just "></asp:Label>
</div>

<button class="btn1">Fade out</button>
</form>

</body>
</html>


If I remove form tag, label is fading out properly. But if I put html code inside tag label is not fading out. Kindly reply

Answer

As mentioned in this post and in MDN reference, the default type for a button is submit, which behaves differently when the button is in a form. To avoid sumbitting the form and get the result that you expect, you should set the button type to button:

<button class="btn1" type="button">Fade out</button>
Comments