Asked by:
Javascrip or CSS Not Working Under Form Tag

Question
-
User25455022 posted
Hello,
I added a tab to my page that has 3 buttons. When clicking each button the associated div is shown. This works perfectly if I don't use the form tag. But if I included it, the page will not work properly (flashing).
Here is the code:
(MasterPage)
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="OK2.Site1" %> <!DOCTYPE html> <html lang="en"> <head runat="server"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Key Results</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> body { padding-top: 50px; } .starter-template { padding: 40px 15px; text-align: center; } .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover { background-color:orange; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover { color: #fff; background-color: transparent; } .navbar-inverse { background-color: gray; border-color: #080808; } .navbar-inverse .navbar-nav li a{ color: white !important; } </style> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img src="images/SEC-Logo.png" width="30" height="30" alt=""> </a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="Default.aspx"><span class="glyphicon glyphicon-home"></span> Home</a></li> <li><a href="view.aspx"><span class="glyphicon glyphicon-file"></span> My OKRs</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-3.3.1.min.js"> </script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html>
(ASPX Page) -- I have added text boxes, a label and a button for testing purposes
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="OKREdit.aspx.cs" Inherits="OK2.OKREdit" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <link href="css/tabs.css" rel="stylesheet"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <br /> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <span class="glyphicon glyphicon-user"></span> <b>Basic Information</b> </div> <table class="table table-condensed"> <tr> <th style="width:5%"><span class="label label-info fontSize1">Function</span></th> <td style="width:20%"> <asp:Label Font-Bold="true" ID="lblFunction" runat="server"></asp:Label></td> <th style="width:5%"><span class="label label-info font fontSize1">Owner</span></th> <td style="width:20%"> <asp:Label Font-Bold="true" ID="lblOwner" runat="server"></asp:Label></td> <th style="width:5%"><span class="label label-info fontSize1">Department</span></th> <td style="width:20%"><asp:Label Font-Bold="true" ID="lblDepartment" runat="server"></asp:Label></td> <th style="width:5%"><span class="label label-info fontSize1">Overall Score</span></th> <td style="width:20%"><asp:Label Font-Bold="true" ID="lblOverallScore" runat="server"></asp:Label></td> </tr> </table> </div> </div> </div> </div> <!-- starting tabs section --> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="tab" style="border-radius: 25px; background-color: #337ab7; color:white; "> <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:Button ID="Button1" runat="server" Text="Button" /><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> </div> </div> </div> <script src="js/tabs.js" type="text/javascript"></script> </asp:Content>
(C# Code)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace OK2 { public partial class OKREdit : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { Label1.Text = (int.Parse(TextBox1.Text.Trim()) + int.Parse(TextBox2.Text.Trim())).ToString(); } } }
(tab.css file)
/* Style the tab */ .tab { overflow: hidden; border: 1px solid #ccc; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: gray; } /* Create an active/current tablink class */ .tab button.active { background-color: orange; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; } /* Fade in tabs */ @-webkit-keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } }
(tabs.js file)
function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } document.getElementById("defaultOpen").click();
Appreciate your help.
Regards,
Omar
Sunday, September 15, 2019 6:30 AM
All replies
-
User-158764254 posted
The default behavior of a button is to submit the form.
The flashing you see is your form posting backupdate all your tab buttons to include the keyword "return" like this:
<button class="tablinks" onclick="return openCity(event, 'Tokyo')">Tokyo</button>
then in the very last line of your openCity script, add:
return false;
when a button's onClick script returns false, if prevents the form from being submitted.
Sunday, September 15, 2019 12:43 PM -
User665608656 posted
Hi OmarOumi,
After testing your code, as mbanavige said, when you click the button , after it finishes executing onclick's js events, it will perform its default behavior, that is, submitting pages, which results in page refresh.
To avoid this , you can also add return false after finishing js method to prevent refreshing page.
<button class="tablinks" onclick="openCity(event, 'London');return false;" id="defaultOpen">London</button> <button class="tablinks" onclick="openCity(event, 'Paris');return false;">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo');return false;">Tokyo</button>
Here is the result :
Best Regards,
YongQing.
Monday, September 16, 2019 9:47 AM