Jquery event in the first input runs on all others

Question

Hello, I have a problem with inputs, see the code below:

// fixar descrição do campo
var campo = $('.campo-formulario');
var descricao = $('.descricao-campo');

campo.on('input',function(){
   if(campo.val().length > 0){
       descricao.addClass('descricao-fixa');
   } else{
       descricao.removeClass('descricao-fixa');
   }
});

It locks the label of my input when it has something typed in it, and even works when I’m with just one input, but when I have more than one it starts the problem.

When I activate the first input and type something, the script runs in all other fields, when it should only work in the first.

Another thing that happens is that the script only activates when I type in the first field, if I type in any other, it doesn’t work.

What I need exactly is that only the input label I typed fix when I typed something, for example:

• entered in input 1, the label went up and fixed
• Label input 2, 3, 4... continues below.

I’ve looked everywhere but I can’t find a solution, please help me, this is my final project of a computer course.

Follow the HTML and CSS:

input {
outline: none;
width: 100%;
border: 1px solid #ccc;
height: 40px;
padding: 0 15px;
font-family: 'Texto';
color: #222;
font-size: 105%;
background: none;
}

.container-campo {
width: 49%;
position: relative;
}

.descricao-campo {
position: absolute;
left: 15px;
top: 7px;
transition: all .2s;
cursor: text;
}

.descricao-fixa {
top: -10px;
left: 8px;
transition: all .2s;
z-index: 3;
background: #fff;
padding: 0 5px;
font-size: 80%;
font-weight: bold;
}

input:focus ~ .descricao-campo {
top: -10px;
left: 8px;
transition: all .2s;
z-index: 3;
background: #fff;
padding: 0 5px;
font-size: 80%;
color: dodgerblue;
font-weight: bold;
}

input:focus {
border: 1.5px solid dodgerblue;
}

.campos-dados-produto {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}

.dados-produto {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

<div class="campos-dados-produto">
  <div class="container-campo">
    <input type="text" name="codigo" class="campo-formulario" id="codigo" required>
    <label class="descricao-campo" for="codigo">Código</label>
  </div>
  <div class="container-campo">
    <input type="text" name="descricao" class="campo-formulario" id="descricao" required>
    <label class="descricao-campo" for="descricao">dsdds</label>
  </div>
</div>

Answer 1

That selector $('.descricao-campo'); applies in its 2 fields. When Voce does this in its function descricao.addClass('descricao-fixa'); what happens and that Voce is manipulating all the elements with the class .descricao-campo, so it affects the 2 fields at the same time.

One way to isolate the field is to find its label from the parent element, in this case the .container-campo.

Important to note the $(this) it points to the current element the .parent() will point to the .container-campo just above, and finally the find('.descricao-campo') will this pointed to the 1 single element.

Follows a functional section of all this together.

// fixar descrição do campo
var campo = $('.campo-formulario');
var descricao = $('.descricao-campo');

campo.on('input',function(){
    var descricaoAtual = $(this).parent().find('.descricao-campo');
   if($(this).val().length > 0){
       descricaoAtual.addClass('descricao-fixa');
   } else{
       descricaoAtual.removeClass('descricao-fixa');
   }
});

input {
outline: none;
width: 100%;
border: 1px solid #ccc;
height: 40px;
padding: 0 15px;
font-family: 'Texto';
color: #222;
font-size: 105%;
background: none;
}

.container-campo {
width: 49%;
position: relative;
}

.descricao-campo {
position: absolute;
left: 15px;
top: 7px;
transition: all .2s;
cursor: text;
}

.descricao-fixa {
top: -10px;
left: 8px;
transition: all .2s;
z-index: 3;
background: #fff;
padding: 0 5px;
font-size: 80%;
font-weight: bold;
}

input:focus ~ .descricao-campo {
top: -10px;
left: 8px;
transition: all .2s;
z-index: 3;
background: #fff;
padding: 0 5px;
font-size: 80%;
color: dodgerblue;
font-weight: bold;
}

input:focus {
border: 1.5px solid dodgerblue;
}

.campos-dados-produto {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}

.dados-produto {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="campos-dados-produto">
  <div class="container-campo">
    <input type="text" name="codigo" class="campo-formulario" id="codigo" required>
    <label class="descricao-campo" for="codigo">Código</label>
  </div>
  <div class="container-campo">
    <input type="text" name="descricao" class="campo-formulario" id="descricao" required>
    <label class="descricao-campo" for="descricao">dsdds</label>
  </div>
</div>

Answer 2

You can use the $(this).next(); to catch the next element

// fixar descrição do campo
var campo = $('.campo-formulario');

campo.on('input',function(){
    var descricao = $(this).next();

   if(campo.val().length > 0){
       descricao.addClass('descricao-fixa');
   } else{
       descricao.removeClass('descricao-fixa');
   }
});

input {
outline: none;
width: 100%;
border: 1px solid #ccc;
height: 40px;
padding: 0 15px;
font-family: 'Texto';
color: #222;
font-size: 105%;
background: none;
}

.container-campo {
width: 49%;
position: relative;
}

.descricao-campo {
position: absolute;
left: 15px;
top: 7px;
transition: all .2s;
cursor: text;
}

.descricao-fixa {
top: -10px;
left: 8px;
transition: all .2s;
z-index: 3;
background: #fff;
padding: 0 5px;
font-size: 80%;
font-weight: bold;
}

input:focus ~ .descricao-campo {
top: -10px;
left: 8px;
transition: all .2s;
z-index: 3;
background: #fff;
padding: 0 5px;
font-size: 80%;
color: dodgerblue;
font-weight: bold;
}

input:focus {
border: 1.5px solid dodgerblue;
}

.campos-dados-produto {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}

.dados-produto {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="campos-dados-produto">
  <div class="container-campo">
    <input type="text" name="codigo" class="campo-formulario" id="codigo" required>
    <label class="descricao-campo" for="codigo">Código</label>
  </div>
  <div class="container-campo">
    <input type="text" name="descricao" class="campo-formulario" id="descricao" required>
    <label class="descricao-campo" for="descricao">dsdds</label>
  </div>
</div>