search textbox inside div

Question

search textbox inside div

Navigation

#1 by (3 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

2

I have the following

<div class="d1" id="div1">
 <input type="text" class="t1">
 <input type="text" class="t1">
 <input type="text" class="t1">
 <input type="text" class="t1">
</div>
<div class="d1" id="div2">
 <input type="text" class="t1">
 <input type="text" class="t1">
 <input type="text" class="t1">
 <input type="text" class="t1">
</div>

What I want to do is go through all the textboxes in order to change the class to the empty spaces and also the class to the div that has empty textboxes ...

try this:

   var inputs = $("#div1 > input");

// una vez tenemos el array, podemos iterar 
for (var i = 0; i < inputs.length; i++) {
   var in = inputs[i].val();
   if (in.length > 0) {
 // no está vacío 
  }
}

but it does not work ... any advice?

thank you very much!

jquery php

asked by Alf 25.05.2018 в 00:04

source

4 answers

3

I leave you an example code, with comments on each line.

That it serves you

//Cuando el DOM esté listo
$(function(){
  
  //Hacer algo cuando el botón sea clickeado
  $(document).on('click','#btn',function(){
    
    //Recorrer todos los elementos con clase t1
    $('.t1').each(function(){
        
        //capturar valor
        let val = $(this).val();
        
        //Validar si está vacio o no, trim quita espacios en blanco
        if( !val || val.trim() == '' ){
           //Si está vacio añadir clase
           $(this).addClass('sin-valor');
           $(this).removeClass('con-valor');
        }
        
        else{
          //Si no está vacio añadir otra clase
           $(this).addClass('con-valor');
           $(this).removeClass('sin-valor');
        }
    });
  });
});

.con-valor{
  background-color: green;
}

.sin-valor{
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="d1" id="div1">
 <input type="text" class="t1">
 <input type="text" class="t1">
 <input type="text" class="t1">
 <input type="text" class="t1">
</div>
<div class="d1" id="div2">
 <input type="text" class="t1">
 <input type="text" class="t1">
 <input type="text" class="t1">
 <input type="text" class="t1">
</div>

<button id="btn">Valorar</button>

answered by 25.05.2018 в 00:16

0

Try to put Ids to identify each input , and put this in your JavaScript :

(function (window, document, $, undefined) {

var inp;
$('#div1 > input').each(function() {
   inp = $(this).val();
   if (inp.length > 0) {
       console.log( $(this).attr("id") + 'no esta vacio' );
  }
});
})(window, document, window.jQuery);

answered by 25.05.2018 в 00:39

0

Using Jquery
- To change the class you can use the toggleClass function, with this you eliminate the css that match the current ones and add those that are not.
In this case if you want to eliminate t1 and add t2 it would be toggleClass ('t1 t2');
- To select the empty elements use the function filter, applying it to all inputs and selecting those that meet the condition val == false, if you find one that meets the condition that val is empty, you change the class to the element and its parent .

Combining this would be

$(":input").filter(function () {  
      return !this.value; 
}).toggleClass('t1 t2').parent('div').toggleClass('d1 d2');**

answered by 25.05.2018 в 04:20

Bring current date and time Collect value of multiple select with jquery

score 0 · Accepted Answer

You are not using the entire jQuery arsenal. You can validate all the inputs and their containers like this:

function validar() {
  var inputs = $("input");

  $.each(inputs, function(i, input) {
    if ($(this).val() == "") {
      $(this).addClass("empty");
      $(this).parent().addClass("empty");
    }
  });
}

.empty {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d1" id="div1">
 <input type="text" class="t1">
 <input type="text" class="t1">
 <input type="text" class="t1">
 <input type="text" class="t1">
</div>
<div class="d1" id="div2">
 <input type="text" class="t1">
 <input type="text" class="t1">
 <input type="text" class="t1">
 <input type="text" class="t1">
</div>
<button onclick="validar()">Validar</button>