CODEWITHSUNDEEP
javascripthtmlasp.net
Bystander001
Bystander001

Reputation: 121

JavaScript in HTML parameters

I am attempting to make a similar page to this.

The problem is that I can't use the external JS file in ASP.net (as far as I know) so I am defining the functions and trying to use them in the HTML page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="authenticate.aspx.cs" Inherits="authenticate" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Flitter Authentication</title>
     <link href="AuthenticationStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="form">
  <ul class="tab-group">
    <li class="tab active" onclick="SwitchTab(e)"><a href="#signup">Sign Up</a></li>
    <li class="tab" onclick="SwitchTab(e)"><a href="#login">Log In</a></li>
  </ul>

  <div class="tab-content">
    <div id="signup">
      <h1>Sign Up for Free</h1>

      <form action="/" method="post">

        <div class="top-row">
          <div class="field-wrap">
            <label>
              First Name<span class="req">*</span>
            </label>
            <input type="text" required="required" autocomplete="off" />
          </div>

          <div class="field-wrap">
            <label>
              Last Name<span class="req">*</span>
            </label>
            <input type="text" required="required" autocomplete="off" />
          </div>
        </div>

        <div class="field-wrap">
          <label>
            REQFIELD<span class="req">*</span>
          </label>
          <input required="required" autocomplete="off" />
        </div>

        <div class="field-wrap">
          <label>
            Set A Password<span class="req">*</span>
          </label>
          <input type="password" required="required" autocomplete="off" />
        </div>

        <button type="submit" class="button button-block" />Get Started

      </form>

    </div>

    <div id="login">
      <h1>Welcome Back!</h1>

      <form action="/" method="post">

        <div class="field-wrap">
          <label>
            REQFIELD<span class="req">*</span>
          </label>
          <input required="required" autocomplete="off" />
        </div>

        <div class="field-wrap">
          <label>
            Password<span class="req">*</span>
          </label>
          <input type="password" required="required" autocomplete="off" />
        </div>

        <p class="forgot"><a href="#">Forgot Password?</a></p>

        <button class="button button-block" />Log In

      </form>

    </div>

  </div>
  <!-- tab-content -->

</div>
<!-- /form -->
        <script>
            function SwitchTab(e) {

                e.preventDefault();

                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active');

                target = $(this).attr('href');

                $('.tab-content > div').not(target).hide();

                $(target).fadeIn(600);

            };
    </script>
</body>
</html>

Some things I noticed: in on the onclick events I am using SwitchTab(e) I am sure that e is nothing in that context but I am not sure what I should be using. The script (defined at the bottom) should switch the views on the tab group.

Upvotes: 0

Views: 89

Answers (2)

rmNyro
rmNyro

Reputation: 381

First of all, the snippet you linked on codepen doesn't seem to work at all.

I manage to make it work by changing those lines below :

<li class="tab active"><a onclick="ShowTab(this, event)" href="#signup">Sign Up</a></li>
<li class="tab"><a onclick="ShowTab(this, event)" href="#login">Log In</a></li>

And the javascript function showTab() as :

function ShowTab(that, event) {

     event.preventDefault();

    $(that).addClass('active');
    $(that).siblings().removeClass('active');

    target = $(that).attr('href').toString();

    $('.tab-content > div').not(target).hide();

    $(target).fadeIn(600);

};

A bit a an explaination now. "e" means nothing to the javascript engine as it's not been defined in the global scope. Whereas "this" refers to the element you just clicked on and "event" to the event (the click) that just occured. I also put the ShowTab() function in the link instead of it's parent, just because it's a lot simpler that way.

I hope it helped.

Oh well, I forgot to tell about "that". As the "this" keyword already exists in the function ShowTab() and is different to the HTML element we need to change the name to something NOT used in the closure.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

Can do this very simply using jQuery and removing the inline code. The code within the following click handler is identical to that in your function

$('.tab-group a').click(function (e) {    

    e.preventDefault();

    $(this).parent().addClass('active');
    $(this).parent().siblings().removeClass('active');

    var target = $(this).attr('href');

    $('.tab-content > div').not(target).hide();

    $(target).fadeIn(600);

});

If you are going to use jQuery should avoid mixing inline code and unobtrusive jQuery code

Upvotes: 0

Related Questions