cambiar función js de evento segun select

[matak]

Buenas compañeros

Tengo este html

Código html:

<SELECT id="clicon" name="clicon">
          <OPTION value="CO" onclick="javascript:asignaFuncion('funcion1(arg1,arg2,...,argX);');" SELECTED>Contacto&nbsp;&nbsp;</OPTION>
          <OPTION value="CL" onclick="javascript:asignaFuncion('funcion2(arg1,arg2,...,argX);');">Cliente&nbsp;&nbsp;</OPTION>
        </SELECT>
 
<INPUT type="text" id="nom_clicon" SIZE="35" MAXLENGTH="35" value="" onclick="funcion1(arg1,arg2,...,argX);"/>
 

lo que necesito es que cuando se seleccione una opción del select se actualice el onclick en el input text. Que intrucciones debería poner en la función asignaFuncion()

Muchas gracias

Saludos

[AlvaroG]

Primero que nada, te aconsejo usar el evento onSubmit del select, no el evento onclick de cada opción.

Luego, dado que Javascript es funcional, lo que pedís es bastante simple.

Código html:

<SELECT id="clicon" name="clicon" onsubmit="aplicacion.asignar(this.value)">
          <OPTION value="CO" SELECTED>Contacto&nbsp;&nbsp;</OPTION>
          <OPTION value="CL">Cliente&nbsp;&nbsp;</OPTION>
        </SELECT>
 
<INPUT type="text" id="nom_clicon" SIZE="35" MAXLENGTH="35" value="" onclick="aplicacion.asignada(arg1,arg2,...,argX);"/>
 

Código javascript:

<script>
aplicacion = {
    funcion1 : function() {
        // lo que querés que haga la funcion1
    },
 
    funcion2 : function() {
        // lo que querés que haga la funcion2
    },
 
    asignada : funcion1, // por defecto, usar la funcion1
 
    asignar : function(valor) {
        if (valor == 'CO') {
            aplicacion.asignada = aplicacion.funcion1;
        } else  if (valor == 'CL') {
            aplicacion.asignada = aplicacion.funcion2;
        }
    }
};
</script>
 

[matak]

Primero de todo, gracias por contestar

traslade el código a un archivo

Código html:

<script>
aplicacion = {
    funcion1 : function() {
        // lo que querés que haga la funcion1
        alert('funcion1');
    },
 
    funcion2 : function() {
        // lo que querés que haga la funcion2
        alert('funcion2');
    },
 
    asignada : funcion1, // por defecto, usar la funcion1
 
    asignar : function(valor) {
        if (valor == 'CO') {
            aplicacion.asignada = aplicacion.funcion1;
        } else  if (valor == 'CL') {
            aplicacion.asignada = aplicacion.funcion2;
        }
    }
};
</script>
<SELECT id="clicon" name="clicon" onsubmit="aplicacion.asignar(this.value)">
          <OPTION value="CO" SELECTED>Contacto  </OPTION>
          <OPTION value="CL">Cliente  </OPTION>
        </SELECT>
 
<INPUT type="text" id="nom_clicon" SIZE="35" MAXLENGTH="35" value="" onclick="aplicacion.asignada();"/>
 

me da el siguiente error el firebug del firefox

funcion1 is not defined
PRUEBA_SELCLICON()()PRUEBA_SELCLICON (línea 13)
[Break on this error] asignada : funcion1, // por defecto, usar la funcion1

Por otroladomesurge la duda de como pasar los parametros a las funciones,ya que en una llamada son unos y en otra otros.

Gracias alvlin

[AlvaroG]

en la línea 112, debería ser

Código javascript:

asignada : aplicacion.funcion1
 

En cuanto a los parámetros, ya depende de cuáles sean cuál es la mejor forma de obtenerlos.


Saludos.

[matak]

Hice el cambio y ahora me da este error

aplicacion is not defined
PRUEBA_SELCLICON()()PRUEBA_SELCLICON (línea 13)
[Break on this error] asignada : aplicacion.funcion1, // por defecto, usar la funcion1

Muchas gracias por la molestia que te estas tomando

Saludos

[AlvaroG]

Si, bueno, tenía algunos errores de lógica
También te comenté mal el evento que tenés que usar, debería ser onchange y no onsubmit (este último es solamente para formularios)

También voy a explicar un poco lo que hace el código

1.- El motivo para declarar un objeto "aplicacion" es evitar las variables globales. Usando un objeto para alojar tus funciones y variables, no usás más que 1 variable global.

2.- Al momento de la carga de la página se asignan aplicacion.lista y aplicacion.campoTexto, para que correspondan al select y a la caja de texto, respectivamente.
Luego se les asignan los eventos correspondientes.
A la lista se le asigna una función que cambiará el manejador de eventos de la caja de texto según su valor, y también se ejecuta esa funcion para que la caja tenga una función inicial.

3.- El resto es igual que antes, si tenés alguna duda simplemente preguntá. Traté de hacer un código JS correcto, no invasivo (separado del HTML) y que siga las buenas prácticas de javascript. Aunque eso requiera utilizar algunas variables de más.

Código javascript:

var aplicacion = {
 
    campoTexto : null,
    lista : null,
 
    funcion1 : function() {
        // lo que querés que haga la funcion1
        alert('funcion1');
    },
 
    funcion2 : function() {
        // lo que querés que haga la funcion2
        alert('funcion2');
    },
 
    asignarFuncion : function() {
        var valor = aplicacion.lista.value;
 
        if (valor === 'CO') {
            aplicacion.campoTexto.onclick = aplicacion.funcion1;
        } else  if (valor === 'CL') {
            aplicacion.campoTexto.onclick = aplicacion.funcion2;
        }
    },
    
    asignarEventos : function() {
        aplicacion.lista.onchange = aplicacion.asignarFuncion;
        aplicacion.asignarFuncion();
    }
};
 
window.onload = function() {
    aplicacion.campoTexto = document.getElementById('nom_clicon');
    aplicacion.lista = document.getElementById('clicon');
    aplicacion.asignarEventos();
}
 

El HTML ya no necesita javascript:

Código HTML:

<SELECT id="clicon" name="clicon">
          <OPTION value="CO" SELECTED>Contacto  </OPTION>
          <OPTION value="CL">Cliente  </OPTION>
        </SELECT>
 
<INPUT type="text" id="nom_clicon" SIZE="35" MAXLENGTH="35" value="" /> 

Saludos.

[matak]

Muchas gracias tio por tu paciencia y buen hacer.

Me ha sido de gran ayuda, y no sólo para mi aplicación,también para entender un poco más js con objetos, ¿Asi se programa Js Orientado a Objetos?

Gracias de veras, Saludos

[AlvaroG]

Es que JS es orientado a objetos, es difícil escaparse.

Esta es una forma "pura" de POO en Javascript, hay muchas otras formas que intentan convertirlo en algo similar a Java, que personalmente no me gustan. Pero como siempre cada maestrito con su librito: otras personas podrían ver este código y considerarme un hereje

Si podés leer en inglés, te recomiendo este sitio creado por Douglas Crockford, el "Senior Javascript Architect" de Yahoo!: http://www.crockford.com/