How to disable toggle function when clicking inside of the element in the bootstrap

Question

I'm using bootstrap with jquery. It shows a login form in dropdown menu, but it's closing when you click inside of the form.

This is my code: http://www.codeply.com/go/dvPYU6GHpo

$('#profili').click(function() {
  $('#prof').addClass("open");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<ul class="nav navbar-nav pull-right" style="width: 100%;">

  <li style="height: 57px;  float: right">
    <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="padding-left: 10px; padding-right: 5px; padding-top: 13px;">
      <img src="https://www.materialui.co/materialIcons/navigation/arrow_drop_down_grey_192x192.png" alt="">
    </a>

    <div class="dropdown-menu dropdown-usermenu pull-right" style="width: 300px; height: 200px; padding-top: 10px;  padding-left: 10px;  padding-right: 10px;">

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

        <div class="form-group">
          <input class="form-control" type="email" name="user_email" style="padding-left: 10px" minlength="6" maxlength="40" placeholder="Email &nbsp;*" required="">
        </div>
        <div class="form-group">
          <input class="form-control" type="password" name="user_password" style="padding-left: 10px" minlength="6" maxlength="20" placeholder="Password &nbsp;*" required="">
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" name="user_remember">
          </label>Remember Me
        </div>

        <div class="form-group">
          <input class="btn btn-primary btn-md" type="submit" name="login" value="Log In" style="margin-top: 0px; width: 80px">
          <a href="#" class="btn btn-primary btn-md" style="margin-top: 0px; width: 80px" value="Sign Up">Sign Up</a>
          <br> <a href="recover.php" style="margin-left: 20px;">Recover Password</a>
        </div>

      </form>

    </div>
  </li>
</ul>

How to disable closing if user clicks inside the form?

Thanks in advance!

Possible duplicate of [Twitter Bootstrap - Avoid dropdown menu close on click inside](http://stackoverflow.com/questions/25089297/twitter-bootstrap-avoid-dropdown-menu-close-on-click-inside) — JSelser, Jun 18 '16 at 02:41

Gleb Kemarsky · Accepted Answer · 2016-06-18T09:19:39.290

Try to use the event.stopPropagation():

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$('#profili form').click(function(e){
  e.stopPropagation();
});

I've copied the HTML-code from your codeply becouse it difeers a little bit. Please check the result: http://www.codeply.com/go/ewpVXkZWCy

$('#profili form').click(function(e) {
  e.stopPropagation();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<ul class="nav navbar-nav pull-right" style="width: 100%;">

  <li style="height: 57px; float: right" id="prof">
    <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="padding-left: 10px; padding-right: 5px; padding-top: 13px;">
      <img src="https://www.materialui.co/materialIcons/navigation/arrow_drop_down_grey_192x192.png" alt="">
    </a>

    <div class="dropdown-menu dropdown-usermenu pull-right" style="width: 300px; height: 200px; padding-top: 10px;  padding-left: 10px;  padding-right: 10px;" id="profili">

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

        <div class="form-group">
          <input class="form-control" type="email" name="user_email" style="padding-left: 10px" minlength="6" maxlength="40" placeholder="Email &nbsp;*" required="">
        </div>
        <div class="form-group">
          <input class="form-control" type="password" name="user_password" style="padding-left: 10px" minlength="6" maxlength="20" placeholder="Password &nbsp;*" required="">
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" name="user_remember">
          </label>Remember Me
        </div>

        <div class="form-group">
          <input class="btn btn-primary btn-md" type="submit" name="login" value="Log In" style="margin-top: 0px; width: 80px">
          <a href="#" class="btn btn-primary btn-md" style="margin-top: 0px; width: 80px" value="Sign Up">Sign Up</a>
          <br> <a href="recover.php" style="margin-left: 20px;">Recover Password</a>
        </div>

      </form>

    </div>
  </li>
</ul>

Glad to be helpful. Welcome to the Stack Overflow! – Gleb Kemarsky Jun 18 '16 at 13:07 — Gleb Kemarsky, Jun 18 '16 at 13:07

How to disable toggle function when clicking inside of the element in the bootstrap

1 Answers1