Becky Becky - 4 months ago 8
CSS Question

Showing next input field when filled in using next()

I am attempting to

show
the next input field after the previous one has been filled in. My attempt is working. If the first input is filled in, then the second should appear and the first should still be viable and so on. Right now, the first input is appearing on page load (like I want it to), but after it is filled in it doesn't do anything.

Here it is in a fiddle if this helps



$(function () {
var intro = $('.intro');

intro.on('keypress', function() {
if (intro.filter(function (){return $(this).val().length }).length == intro.length) {
$('input').next('.intro').fadeIn(500);
}
/* else {
$('.intro').hide();
}*/
});
});

.intro {
display: none;
}
.intro:first-child {display: block;}
.next { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="name" type="text" class="intro">
<input id="email" type="email" class="intro">
<input id="title" type="text" class="intro">


<a class="next">show div</a>




Answer

I just logged the filter output length and intro length, filter output length will be always 1 and intro length is 3, so that why your condition is not satisfying and didnt come inside the loop, Can you check whether below satisfies your requirement

$(function () {   
    var intro = $('.intro');

    intro.on('keypress', function() {
        if ($(this).val().length > 0) {
            $(this).next('.intro').fadeIn(500);
        }         
       /* else {
            $('.intro').hide();
        }*/
    });
});
.intro {
  display: none;
}
.intro:first-child {display: block;}
.next { display: none; }
<input id="name" type="text" class="intro">
<input id="email" type="email" class="intro">
<input id="title" type="text" class="intro">