Becky Becky - 4 months ago 11
CSS Question

Changing next value breaking code

I have a system that allows a user to type in inputs and then a new one appears under it when filled in. The issue I am running into is I am attempting to add labels to the inputs and when I changed the code, it no longer adds new inputs.

The snippet is without the labels. This is a Fiddle with my attempt at adding the labels.

Does anyone see what I am doing wrong?



$(function () {
var elems = $('.intro').on('input', function() {

if ( this.value.trim().length > 2 ) {
$(this).next('input').addClass('block');
}


$('#intro-button').toggle(
elems.filter(function() {
return this.value.trim() !== "";
}).length === elems.length
)

});
});

.intro {
opacity: 0;
padding: 10px 15px;
margin: 40px auto;
visability: hidden;
}
.intro:first-child {
display: block;
opacity: 1;
}
.block {
display: block;
visability: visible;
opacity: 1;
-webkit-animation: fadein 1s ease-in;
-moz-animation: fadein 1s ease-in;
animation: fadein 1s ease-in;
}
.next {
display: none;
}
.button-center {
margin: 40px auto;
text-align: center;
}
#intro-button {
display: none;
padding: 10px 15px;
}

<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">
<div class="button-center">
<button id="intro-button">Proceed</button>
</div>
</div>




Answer

You need add handler to input and move on parent of input

$(function() {
  var elems = $('.intro input').on('keypress', function() {

    if ($(this).val().trim().length > 2) {
      $(this).parent().next('label').addClass('block');
    }


    $('#intro-button').toggle(
      elems.filter(function() {
        return this.value.trim() !== "";
      }).length === elems.length
    )

  });
});

https://jsfiddle.net/xfbLskhn/3/