Remove From My Forums

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

0

Sign in to vote
User-158764254 posted

The default behavior of a button is to submit the form.
The flashing you see is your form posting back

update 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
0

Sign in to vote
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

Asked by:

Javascrip or CSS Not Working Under Form Tag

Question

All replies