Jquery Hide the element after input

Question

JS/Jquery Disappear on focus next element / jquery on focus on element hide previous element after there has been an input

I have the code:

<script>
$(document).ready(function(){
$("div").click(function(){
$("#hide").hide();
});
);
</script>

The above hides the element 'div' onclick. What I am really looking for is when I have filled the first field, and click on the second one, then it should hide the first one. The div should slide out. For eg I have 5 fields as Name, Email, DOB, Address, Post Code. So when I have entered my Name, and click on Email, the Name DIV should disappear by sliding out. I am new to JQuery.

How can I do this?

Thanks

You could hide your fields on blur but from a UX point of view it's very bad. How do you get back to the field you've just filled to change it in case you made a mistake? — Capsule
– Capsule, Commented Feb 6, 2015 at 0:24

taesu · Accepted Answer · 2015-02-06 00:27:54Z

1

Here is a very simple answer that you can easily extend:

$('input#email').click(function(){
    if ($('input#name').val().length > 0 ){
        $('input#name').hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='name' placeholder="name"></input><br>
<input id='email' placeholder="email"></input><br>

answered Feb 6, 2015 at 0:27

taesu

4,5905 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Artur Filipiak · Accepted Answer · 2015-02-07 00:25:45Z

Although it's not a good idea to hide fields from the user, you could fadeOut each not empty field when focus is set on another field. This way you have at least possibility to get back to field when you click outside the form (it will be visible until any other field is not clicked).

$(".txt").focus(function(){
  var inputs = $(".txt").not($(this)).not(".txt:hidden");
  if($(".txt").not(".txt:hidden").length == 2){
    $(".txt").focusout(function(){
      if($(this).val()){
        $(this).fadeOut();     
      }
    });
  }
  inputs.each(function(){
    if($(this).val()){
      $(this).fadeOut();
    }
  });
});

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

<div><input type="text" class="txt" placeholder="Name"/></div>
<div><input type="text" class="txt" placeholder="Email"/></div>
<div><input type="text" class="txt" placeholder="DOB"/></div>
<div><input type="text" class="txt" placeholder="Address"/></div>
<div><input type="text" class="txt" placeholder="Post Code"/></div>

JSFiddle

godswearhats · Accepted Answer · 2015-02-06 00:27:34Z

0

You can bind an event using jQuery's on() or bind() methods. The event you care about is blur which triggers when an element loses focus.

Something like:

$('#name').on('blur', function() {
    $(this).hide();
});

answered Feb 6, 2015 at 0:27

godswearhats

2,2551 gold badge15 silver badges6 bronze badges

Collectives™ on Stack Overflow

Jquery Hide the element after input

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related