JavaScript in HTML parameters

Question

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.

Does the SwitchTab function get called? Maybe there's a layering issue with your HTML. — sg.cc
– sg.cc, Commented Oct 6, 2015 at 19:52
of course you can use external file and should...it's called separation of concerns — charlietfl
– charlietfl, Commented Oct 6, 2015 at 19:53
@sg.cc it doesn't appear so but again I believe its a parameter issue in the list. onclick="SwitchTab(e)" I don't think e means anything here but I am not sure what to use. — Bystander001
– Bystander001, Commented Oct 6, 2015 at 19:54
@charlietfl I set up an external js file and called it in the header but again I have to call the individual functions with the correct parameter which I don't know. In the snippet above I can't figure out what to replace e with — Bystander001
– Bystander001, Commented Oct 6, 2015 at 19:55
e in this case means click event. It is automatically passed into the function on click. The only reason your function needs it is to prevent the default action of the click, and the <li> element has no default action. So you can get rid of e and e.preventDefault() and try that. However, if your function isn't being called at all, that's a bigger issue, and should be investigated with console.log and somesuch. — sg.cc
– sg.cc, Commented Oct 6, 2015 at 19:56

rmNyro · Accepted Answer · 2015-10-06 20:19:19Z

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.

charlietfl · Accepted Answer · 2015-10-06 20:03:54Z

0

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

answered Oct 6, 2015 at 20:03

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

JavaScript in HTML parameters

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related