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

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>

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

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(); });

Collectives™ on Stack Overflow

Jquery Hide the element after input

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related