CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
oversoon
oversoon

Reputation: 360

'a' link without href in bootstrap

I'm using bootstrap for a login page, I've seen people use the tag without the 'href' in bootstrap but it's not working for me, any ideas?

I'm just trying a simple alert atm before finishing, I will have the link switch between login and sign-up pages when I can get this working. At the moment it just appears as plain text. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Secret Diary</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
  <body>
    <section id="login">
      <div class="container">
        <div class="center">
          <div class="col-md-12 mx-auto">
            <h1>Secret Diary</h1>
            <h2>Store you thoughts</h2>
            <div class="error"><?php echo $error; ?></div>
            <form method="post" id="signupForm">
              <input type="email" class="form-control" name="email" id="email" placeholder="email">
              <input type="password" class="form-control" name="password" id="password" placeholder="password">
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
                </label>
              </div>
              <input type="hidden" name="signUp" value="1">
              <input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Sign Up!">
              <p><a id="showLogInForm">Log In</a></p>
            </form>

            <form method="post" id="loginForm">
              <input type="email" class="form-control" name="email" id="email" placeholder="email">
              <input type="password" class="form-control" name="password" id="password" placeholder="password">
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
                </label>
              </div>
              <input type="hidden" name="signUp" value="0">
              <input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Log in!">
            </form>
          </div>
        </div>
      </div>
    </section>


    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>

    <script type="text/javascript">
    $("#showLogInForm").click(function(){
      alert("hi!");
    });
    </script>

  </body>
</html>

Upvotes: 7

Views: 11702

Answers (4)

vikrant
vikrant

Reputation: 2257

you can just use the a tag without href like this: <a id="showLogInForm">Log In</a> please refer to the code below for details: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Secret Diary</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/style.css">
</head>
  <body>
    <section id="login">
      <div class="container">
        <div class="center">
          <div class="col-md-12 mx-auto">
            <h1>Secret Diary</h1>
            <h2>Store you thoughts</h2>
            <div class="error"><?php echo $error; ?></div>
            <form method="post" id="signupForm">
              <input type="email" class="form-control" name="email" id="email" placeholder="email">
              <input type="password" class="form-control" name="password" id="password" placeholder="password">
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
                </label>
              </div>
              <input type="hidden" name="signUp" value="1">
              <input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Sign Up!">
              <p><a id="showLogInForm">Log In</a></p>
            </form>

            <form method="post" id="loginForm">
              <input type="email" class="form-control" name="email" id="email" placeholder="email">
              <input type="password" class="form-control" name="password" id="password" placeholder="password">
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
                </label>
              </div>
              <input type="hidden" name="signUp" value="0">
              <input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Log in!">
            </form>
          </div>
        </div>
      </div>
    </section>


    

    <script>
$( document ).ready(function() {
     $("#showLogInForm").click(function(){ alert("hi!"); });
});
</script>

  </body>
</html>

Upvotes: 0

l2aelba
l2aelba

Reputation: 22167

You have to use <button> with some classes

<button class="btn btn-link p-0">Button</button>

Upvotes: 5

user5060975
user5060975

Reputation:

Try this:

<a href="javascript:void(0)" id="showLogInForm">Log In</a>

Upvotes: 9

Ozan
Ozan

Reputation: 3739

You probably need need a href attribute, most browsers' default styling is setup to display a tags without href as plain text.

<a>some link</a>
<br />
<a href="#">some other link</a>

Upvotes: 1

Related Questions