CODEWITHSUNDEEP
jquerytwitter-bootstrap
TrioHaydos
TrioHaydos

Reputation: 41

Href onclick Function Bootstrap

In a bootstrap container...i used this code:

<div class="panel-heading">
  <div class="row">
    <div class="col-xs-6 text-center">
      <a href="" class="active" id="loginFormLink" onclick="LoginFormOpen()"> Login </a>
    </div>

    <div class="col-xs-6 text-center">
      <a href="" id="registerFormLink" onclick="alert('here....')"> Register </a>
    </div>

</div>
</div>

the onclick alert funtion works on register but the function i am trying to execute in onclick for login does not....why?...

this is the 

function LoginFormOpen()
{
    alert('Testing....');
    /*$('#loginForm').delay(100).fadeIn(100);
    $('#registerForm').fadeOut(100);
    $('#registerFormLink').removeClass('active');
    $(this).addClass('active');
    e.preventDefault();
    });*/
}

Upvotes: 4

Views: 4880

Answers (2)

Ionut Necula
Ionut Necula

Reputation: 11480

It's all matter of scope. If you define the function inside the $(document).ready scope it can be called only inside it. Move the function outside the $(document).ready and it should work.

So if you have:

$(document).ready(function() {
  function LoginFormOpen() {
    alert('Testing....');
    /*$('#loginForm').delay(100).fadeIn(100);
    $('#registerForm').fadeOut(100);
    $('#registerFormLink').removeClass('active');
    $(this).addClass('active');
    e.preventDefault();
    });*/
  }
});

It really should be:

$(document).ready(function() {

});

function LoginFormOpen() {
  alert('Testing....');
  /*$('#loginForm').delay(100).fadeIn(100);
  $('#registerForm').fadeOut(100);
  $('#registerFormLink').removeClass('active');
  $(this).addClass('active');
  e.preventDefault();
  });*/
}

Upvotes: 0

Rana Ghosh
Rana Ghosh

Reputation: 4674

This might happening because you are using onclick attribute as well as href attribute. If you are using onclik you don't need to put href. That's why might page is redirecting to blank page.

I think you are usning href attribute because of that hand sign, so please follow the below code::

href="javascript:void(0);"

SO, Your final html should be like this::

<div class="panel-heading">
  <div class="row">
    <div class="col-xs-6 text-center">
      <a href="javascript:void(0);" class="active" id="loginFormLink" onclick="LoginFormOpen()"> Login </a>
    </div>

    <div class="col-xs-6 text-center">
      <a href="javascript:void(0);" id="registerFormLink" onclick="alert('here....');"> Register </a>
    </div>

</div>
</div>

Upvotes: 1

Related Questions