CODEWITHSUNDEEP
jqueryformshidejquery-focusout
Stuart Robson
Stuart Robson

Reputation: 1149

hide form on click/out of element

I've got a couple of forms on one page. Each need to hide when I click outside

div class="login">
  <p><a title="Entrar" href="static-login.html">Entrar</a></p>
  <form action="" class="disabled" method="post" id="login">
    <p class="close"><a title="Cerrar" href="static.html">Cerrar</a></p>
    <h2>¿Es usted ya cliente?</h2>
    <p class="email">
      <label for="email">Su correo electrónico</label>
      <input id="email" name="email" type="text" placeholder="Su correo electrónico" />
    </p>
    <p class="password">
      <label for="password">Su contraseña</label>
      <input id="password" name="password" type="text" placeholder="Su contraseña" />
    </p>
    <p class="button">
      <input type="submit" value="Entrar" />
    </p>
  </form>
</div>

So the jquery I've got for this is 

$(document).ready(function() {
  $('.layer').hide();
  $('.login form').hide();
  $('.login a').click(function(){
    $('.login form').toggle();
    $('.layer').toggle();
    $(".login form input:text").first().focus();
  });
  $(".login form input").focusout(function() {
    $('.login form').hide();
    $('.layer').hide();
  });
});

but as soon as I move from email to password it hides everything so .focusout doesn't work

I have tried $('body').click(function() { instead of .focusout but it breaks other jquery :-/

Any ideas?

Upvotes: 0

Views: 324

Answers (1)

tymeJV
tymeJV

Reputation: 104795

Use :not in the selector

$(":not(.login form input)").click(function() {
    $('.login form').hide();
    $('.layer').hide();
});

Upvotes: 0

Related Questions