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.