Validar si valor de un select esta repetido

shakaran · #1 (**permalink**) 20/06/2006, 14:43

Hola, tengo un formulario con 3 select que todos tienen las mismas opciones. Pero tengo que validar que el usuario no elija de los 3 select las misma opcion.

Se que el valor puedo obtenerlo por selected index y a lo garrulo se me ha ocurrido hacer un if con cada option que mirara si el valor es igual a uno de todos los demas...pero saldria un pegote de codigo. Se podria simplificar?

Mi ejemplo:

Código:

<form name="colores" action="colores.php" METHOD="post">
Color 1:
<select name="color1" >
      <option selected >Elige color</option>
      <option >Rojo</option>
      <option >Verde</option>
      <option >Azul</option>
</select>

Color 2:
<select name="color2" >
      <option selected >Elige color</option>
      <option >Rojo</option>
      <option >Verde</option>
      <option >Azul</option>
</select>

Color 3:
<select name="color3" >
      <option selected >Elige color</option>
      <option >Rojo</option>
      <option >Verde</option>
      <option >Azul</option>
</select>

</form>

Gracias, espero vuestra ayuda.

Ruben_adap · #2 (**permalink**) 20/06/2006, 15:29

Hola,

yo creo que no es un pegote de codigo:

var objForm = document.colores;

if (objForm.color1.value == objForm.color2.value || objForm.color1.value == objForm.color3.value || objForm.color2.value == objForm.color3.value) {
alert('aqui lo que tengas que hacer');
}

shakaran · #3 (**permalink**) 20/06/2006, 15:34

Vale...pero ese ejemplo lo he puesto para 3...pero en realidad tengo 9!!

El if k has puesto...es para comprobar con el color1...ahora pon hasta 9!! se juntan 50 o 60 lineas!! No hay otra manera mas sencillota??

Cap.Buscapina · #4 (**permalink**) 20/06/2006, 17:13

holas se me ocurren varias formas (casi todas con bucles) pero hay una que es bastante simple, es utilizando arrays asociativos (una de las tantas cosas que aprendí del amigo Caricatos(

)).

Cita:

<html>
<head>
<script>
var anterior;
color=new Array()
color["Rojo"]=true;
color["Verde"]=true;
color["Azul"]=true;

function verif(s){
if(!color[s.value] && s.selectedIndex>0){
alert("El color "+s.value+" ya ha sido seleccionado.");
s.selectedIndex=0;
}else{
color[s.value]=false;
if(anterior!=""){color[anterior]=true};
anterior=s.value;
}
}
</script>
</head>

<body>
<form name="colores" action="colores.php" METHOD="post">
Color 1:
<select name="color1" onchange="verif(this)">
<option selected >Elige color</option>
<option value="Rojo">Rojo</option>
<option value="Verde">Verde</option>
<option value="Azul">Azul</option>
</select>

Color 2:
<select name="color2" onchange="verif(this)">
<option selected >Elige color</option>
<option value="Rojo">Rojo</option>
<option value="Verde">Verde</option>
<option value="Azul">Azul</option>
</select>

Color 3:
<select name="color3" onchange="verif(this)">
<option selected >Elige color</option>
<option value="Rojo">Rojo</option>
<option value="Verde">Verde</option>
<option value="Azul">Azul</option>
</select>

</form>
</body>
</html>

si tenes mas opciones que rojo,azul y verde , solo tenes que agregarlas siguiendo el ejemplo(las lineas en rojo)

creo que es la mas sencilla y bastante efectiva (no te olvides de ponerle el value a cada options, que me hizo dar varios dolores de cabeza hasta que me di cuenta )

saludos

shakaran · #5 (**permalink**) 21/06/2006, 06:13

Muchas gracias, era justo a lo que me referia! ;) Me ha ayudado muchismo era lo que estaba buscando.

Aunque me gustaria entender bien la funcion(soy uno de esos maniaticos que le gusta saber el porque de las cosas XD)

Veo que llamas a la funcion con el evento onchange (mejor aun, xq yo la llamaba cuando se enviaba el formulario).Lo de la matriz lo entiendo...pero luego el if primero de la funcion verif es lo que no acabo de entender.

Dice algo como que si el valor de la matriz color (tomando el valor del select con s.value)es distinto y si la opcion selecionada es distinta de la primera (selecteIndex>0, que es la de Elige color), entonces muestre el mensaje...esto no lo entiendo...porque si es distinto muestra el alert? No me cuadra...yo creia que habia que poner si es igual a la otro seleccionado (insisto que me ha funcionado el script, pero kiero entender esta parte)

Y bueno despues ya del else no entiendo el "porque" de nada XD. Te agradeceria que me lo explicaras. Gracias

Cap.Buscapina · #6 (**permalink**) 21/06/2006, 10:00

je,je, retiro lo de sencillo (que dije mas arriba). Me ha dado varios dolores de cabeza, ya que el codigo que publiqué mas arriba contiene un bug.

Ahora creo que este es mejor:

Cita:

<html>
<head>
<script>
var anterior;
color=new Array()
color["Rojo"]=true;
color["Verde"]=true;
color["Azul"]=true;

function verif(s){
if(!color[s.value] && s.selectedIndex>0){
alert("El color "+s.value+" ya ha sido seleccionado.");
s.value=(anterior=="")?"Elige color":anterior;
return false
}
color[s.value]=false;
if(anterior!="Elije color"){color[anterior]=true;}
}
</script>
</head>

<body>
<form name="colores" action="colores.php" METHOD="post">
Color 1:
<select name="color1" onchange="verif(this)" onclick="anterior=this.value;">
<option selected >Elige color</option>
<option value="Rojo">Rojo</option>
<option value="Verde">Verde</option>
<option value="Azul">Azul</option>
</select>

Color 2:
<select name="color2" onchange="verif(this)" onclick="anterior=this.value;">
<option selected >Elige color</option>
<option value="Rojo">Rojo</option>
<option value="Verde">Verde</option>
<option value="Azul">Azul</option>
</select>

Color 3:
<select name="color3" onchange="verif(this)" onclick="anterior=this.value;">
<option selected >Elige color</option>
<option value="Rojo">Rojo</option>
<option value="Verde">Verde</option>
<option value="Azul">Azul</option>
</select>

</form>
</body>
</html>

testealo bien (sobre todo luego de elegir todas las opciones, intentá cambiarlas nuevamente, ya que ese era el problema del otro codigo), y luego si funciona correctamente charlamos y "destripamos" el script.

saludos

shakaran · #7 (**permalink**) 21/06/2006, 11:16

El anterior...el unico bug que me ha dado...es que si actualizas...das atras en el navegador o similar...la opcion que se haya quedado puesta por ejemplo Verde (en el primer color) y luego vuelves a poner en el segundo o tercero Verde tambien y no te lo detecta.

He probado el segundo script que exponias tambien...pero me gusta menos...porque si cojes y seleccionas el mismo color...no te pone el Index=0 si no el que habia elegido anteriormente (y en el caso de mi script, tambien hago la validacion para que si es el index=0 no deje enviar el formulario y con el segundo script...si me deja el index en el mismo...pues se podrian pasar 2 opciones iguales.

Por otro lado no me ha salido una vez la frase "Elige color"....en que caso sale ese?

Saludos

Cap.Buscapina · #8 (**permalink**) 21/06/2006, 16:12

aquí te dejo el script definitivo (al menos yo creo que es el mejor).
es este codigo con el mismo html del último.

Cita:

Cita:

He probado el segundo script que exponias tambien...pero me gusta menos...porque si cojes y seleccionas el mismo color...no te pone el Index=0 si no el que habia elegido anteriormente (y en el caso de mi script, tambien hago la validacion para que si es el index=0 no deje enviar el formulario y con el segundo script...si me deja el index en el mismo...pues se podrian pasar 2 opciones iguales.

esto último creo que no ocurre en ningún caso (lo probé y nunca ocurrió).

Ademas no interfiere en la validación que estás utilizando para que ningún select quede sin color elegido (es mas, creo que es lo correcto).

saludos

SiR.CARAJ0DIDA · #9 (**permalink**) 21/06/2006, 17:25

esto no esta mejor?

Código:

<html>
<head>
    <script type="text/javascript">
    	function verify(s1) {
    		var s2;
    		for (var i=1;i<=3;i++) {
    			s2 = document.getElementById('color' + i);
    			if (s1.value == s2.value && s1 != s2) {
    				alert('Valor repetido');
    				s1.options[0].selected = true;
    				return;
    			}
    		}
    	}
    </script>

</head>

<body>
	<form name="colores" action="colores.php" method="POST">
		Color 1:
		<select name="color1" id="color1" onchange="verify(this)">
		<option selected>Elige color</option>
		<option value="Rojo">Rojo</option>
		<option value="Verde">Verde</option>
		<option value="Azul">Azul</option>
		</select>
		
		Color 2:
		<select name="color2" id="color2" onchange="verify(this)">
		<option selected>Elige color</option>
		<option value="Rojo">Rojo</option>
		<option value="Verde">Verde</option>
		<option value="Azul">Azul</option>
		</select>
		
		Color 3:
		<select name="color3" id="color3" onchange="verify(this)">
		<option selected>Elige color</option>
		<option value="Rojo">Rojo</option>
		<option value="Verde">Verde</option>
		<option value="Azul">Azul</option>
		</select>
	</form>
</body>
</html>

Cap.Buscapina · #10 (**permalink**) 21/06/2006, 17:47

supongo que tambien funcionaría, solo restaría cambiarle el numero de bucles (ya que en realidad son 9 los select) y respetar que todos los select sean iguales y las opciones en el mismo orden.

saludos.

shakaran · #11 (**permalink**) 22/06/2006, 04:07

Cap.Buscapina:

Sigo encontrando en el ultimo que planteabas el siguiente bug, te lo comento para que lo compruebes tu mismo:

Eliges rojo, eliges verde y eliges azul. (no hay ninguno repetido...todo perfecto)...pero ahora...pulsemos F5 y actualizamos...bien..pues ahora...en el color 1...vamos a poner verde o azul...en teoria nos daria k esta repetido...pero NO...no lo detecta...con lo cual podriamos hacer trampa y elegir 2 colores iguales.

El inconveniente tambien del codigo es que es algo pesado tener que declarar el array y poner todos sus campos, es mas si cambias alguno tendrias que ir a modificar la funcion porque no valdria. Pero aun asi esta muy bien y es otra alternativa, solo le falta arreglar ese pequeño bug.

SiR.CARAJ0DIDA:

He probado todas las combinaciones...funciona perfecto...y tambien con actualizar. Cierto es que es un for, consume mas recursos, pero sin embargo la complejidad del algoritmo es "n". Y tal vez consume menos que declarar una matriz. De momento lo veo la opcion mas correcta.

Muchas gracias a los dos