Foros del Web » Programando para Internet » Javascript »

comparar longitud de dos input con javascript

Estas en el tema de comparar longitud de dos input con javascript en el foro de Javascript en Foros del Web. Hola, tengo un formulario que se construye dinamicamente con php con un foreach, pero necesito validar dos input dentro del form, es decir; si el ...
  #1 (permalink)  
Antiguo 29/11/2018, 16:52
 
Fecha de Ingreso: noviembre-2015
Mensajes: 52
Antigüedad: 3 años, 1 mes
Puntos: 2
comparar longitud de dos input con javascript

Hola, tengo un formulario que se construye dinamicamente con php con un foreach, pero necesito validar dos input dentro del form, es decir;
si el select-option LADA tiene dos dígitos, entonces el input telefono_1 deberá tener 8 dígitos.
si el select-option LADA tiene 3 dígitos, entonces el input telefono_1 deberá tener 7 dígitos. Para lo anterior realicé el siguiente código de javascript, pero no me ha funcionado:
Código PHP:
for (var 1<= 5i++) {
    for (var 
1<= 5j++) {
        var 
telUno "telefono_1" i;
        var 
lad_1 "lada" j;
        
telUno document.getElementById(telUno);
        
lad_1 document.getElementById(lad_1);
        
console.log(telUno);
        
console.log(lad_1);
        if ((
lad_1.value.length == 2) && (telUno.value.length != 8)) {
            
alert('Teléfono 1 de alguno de los domicilios es diferente de 8 dígitos');
            return 
false;
        }
if ((
lad_1.value.length == 3) && (telUno.value.length != 7)) {
            
alert('Teléfono 1 de alguno de los domicilios es diferente de 7 dígitos');
            return 
false;
        }
    } 
Alguien me puede ayudar a corregirlo?

Este es mi formulario de index.php:
Código PHP:
//estos son los datos generales del usuario
<form>
Apellido Paterno<input type='text' id='apellido_paterno' style='width:150px;' name='apellido_paterno' onkeypress='return validarletras(event)' value='".$registro['5']."'</input>
Apellido Materno<input type='text' id='apellido_materno' style='width:150px;' name='apellido_materno' onkeypress='return validarletras(event)' value='".$registro['6']."'</input>
Primer Nombre<input type='text'  id='nombre_1' style='width:150px;' name='nombre_1' onkeypress='return validarletras(event)' value='".$registro['7']."'</input>
Segundo Nombre<input type='text' id='nombre_2' style='width:150px;' name='nombre_2' onkeypress='return validarletras(event)' value='".$registro['8']."'</input>
//------------------campo de teléfono se construye dinámicamente---------------
//generamos la consulta para recuperar los valores de los teléfonos
$consulta mysqli_query($con"SELECT telefono_1 FROM usuario WHERE u.usuario = '$oper'");


                        
$i 1;
            foreach (
$consulta as $fila) {
//este es el campo de clave lada que se construye por select-option
echo"LADA<select style='margin-left:50px;' name='lada[$i]' id='lada[$i]'>";       
                echo
"<option value='".$fila['lada']."'>".$fila['lada']."</option>";
                
$sql_lada=mysqli_query($con"SELECT DISTINCT * FROM cat_lada ORDER BY lada ASC");
                    while (
$lada=mysqli_fetch_row($sql_lada)) {    
                echo
" <option value='".$lada['0']."'>".$lada['0']."</option>";
                            }
                echo
"</select>";
//estos son los teléfonos del usuario, puede tener más de un telefono_1 y más de un telefono_2
Teléfono 1<input type='text' name='telefono_1[$i]' id='telefono_1[$i]' onkeypress='return justNumbers(event)' style='width:70px;' value='".$fila['telefono_1']."'</input>
Teléfono 2<input type='text' name='telefono_2[$i]' id='telefono_2[$i]' onkeypress='return justNumbers(event)' style='width:70px;' value='".$fila['telefono_2']."'</input>
$++;
}
</
form
Espero que se entienda.
__________________
paco alonso
  #2 (permalink)  
Antiguo 29/11/2018, 20:09
Avatar de alvaro_trewhela  
Fecha de Ingreso: octubre-2012
Ubicación: localhost
Mensajes: 933
Antigüedad: 6 años, 1 mes
Puntos: 106
Respuesta: comparar longitud de dos input con javascript

a tu form dale id y luego


Código Javascript:
Ver original
  1. function lengthOfSelects(id){
  2. var f = document.getElementById(id);
  3. var sels = f.getElementsByTagName("select");
  4. var values = [];
  5.     for(var k=0;k<sels.lenght;k++){
  6.     values.push([sels[k].getAttribute("id"), sels[k].value.length]);
  7.     }
  8. return values;
  9. }

Esta función te entrega una matriz con el id y largo de c/select de un elemento con alguna id (que la pasas por parametro)
  #3 (permalink)  
Antiguo 10/12/2018, 18:28
Avatar de manuparquegiralda  
Fecha de Ingreso: junio-2012
Ubicación: Barcelona
Mensajes: 235
Antigüedad: 6 años, 5 meses
Puntos: 36
Respuesta: comparar longitud de dos input con javascript

Es muy simple hacerlo con JavaScript.

Código Javascript:
Ver original
  1. (() => {
  2.     var selects = document.querySelectorAll( "select"  );
  3.     for( var i = 0; i < selects.length; i++ ) {
  4.         selects[ i ].addEventListener( "change", adjustLength( ev ));
  5.     }
  6. })();
  7.  
  8. function adjustLength( ev ) {
  9.     var select = ev.currentTarget;
  10.     var form = select.parentElement;
  11.  
  12.     form.telefono_1.value = "";
  13.  
  14.     if ( select.value.length === 2 ) {
  15.         form.telefono_1.setAttribute( "maxlength", "8" );
  16.     } else {
  17.         form.telefono_1.setAttribute( "maxlength", "7" );
  18.     }
  19. }

Cómo puedes ver, en la función encapsulada lo que hacemos es poner a la escucha los cambios en los selects a través de un bucle. Es posible que tengas que ajustar el selector según tu código.

Cuando algún select cambia llama a la función "adjustLength" que lo que hace es medir la longitud del valor y en función a este limita el máximo de caracteres que se pueden añadir al input de teléfono y elimina su valor por si estuviese escrito.

Ahora lo que tendrías es que adaptar el código al tuyo. Añadiendo por ejemplo un atributo data-index para poder identificar correctamente la relación entre el select que cambia con el imput del teléfono_1 que tienes que limitar ya que al generarlos en el bucle imagino que tendrás muchos selects y muchos telefono_1.
__________________
Diseño Web - Arisman Web



La zona horaria es GMT -6. Ahora son las 14:36.