comparar longitud de dos input con javascript

[madison_sg]

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 i = 1; i <= 5; i++) { 
    for (var j = 1; j <= 5; j++) { 
        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.

[alvaro_trewhela]

a tu form dale id y luego

Código Javascript:

function lengthOfSelects(id){
var f = document.getElementById(id);
var sels = f.getElementsByTagName("select");
var values = [];
    for(var k=0;k<sels.lenght;k++){
    values.push([sels[k].getAttribute("id"), sels[k].value.length]);
    }
return values;
}
 

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)

[manuparquegiralda]

Es muy simple hacerlo con JavaScript.

Código Javascript:

(() => {
    var selects = document.querySelectorAll( "select"  );
    for( var i = 0; i < selects.length; i++ ) {
        selects[ i ].addEventListener( "change", adjustLength( ev ));
    }
})();
 
function adjustLength( ev ) {
    var select = ev.currentTarget;
    var form = select.parentElement;
 
    form.telefono_1.value = "";
 
    if ( select.value.length === 2 ) {
        form.telefono_1.setAttribute( "maxlength", "8" );
    } else {
        form.telefono_1.setAttribute( "maxlength", "7" );
    }
}
 

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.