I need help figuring out how to display a div after checking if all input fields are filled. Specifically, I want to only check the inputs within the #intro-info section. Can someone provide guidance on what to include in the else statement so that the button #intro-button will appear when all inputs are filled?
Here is a fiddle link for reference
$(function () {
var intro = $('.intro');
intro.on('keypress', function() {
if ($(this).val().length > 1) {
$(this).next('.intro').addClass('block');
}
/* else {
$('.intro').hide();
}*/
});
var allEmpty = true;
$('#intro-info :input').each(function() {
if ($(this).val() !== '') {
allEmpty = false;
return false; // stop iterating once a non-empty input is found
} else
});
return allEmpty;
});.intro {
opacity: 0;
padding: 10px 15px;
margin: 20px auto;
}
.intro:first-child {
display: block;
opacity: 1;
}
.block {
display: block;
opacity: 1;
-webkit-animation: fadein 1s ease-in;
-moz-animation: fadein 1s ease-in;
animation: fadein 1s ease-in;
}
.next {
display: none;
}
#intro-button {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="intro-info">
<input id="name" type="text" class="intro">
<input id="email" type="email" class="intro">
<input id="title" type="text" class="intro">
<button id="intro-button">Proceed</button>
</div>
<a class="next">show div</a>