Silent Ninja
26/06/2006, 13:00
Primero revisamos el código:
<script type="text/javascript">
function CambiarValores(nombre){
switch (nombre){
case "1":
document.forms['test1'].elements['fname'].value = "Pepe"
document.forms['test1'].elements['sname'].value = "Juarez"
break
case "2":
document.forms['test1'].elements['fname'].value = "Carlos"
document.forms['test1'].elements['sname'].value = "Mendez"
break
default:
document.forms['test1'].elements['fname'].value = "Nombre"
document.forms['test1'].elements['sname'].value = "Apellido"
}
}
</script>
Si te fijas, veras que hay 3 opciones, la opcion 1, la 2 y la "por defecto". En la opción uno, cambiamos un formulario de texto, por "Pepe" y el segundo por "Juarez". Los demás son lo mismo, pero con otros nombres.
La forma de llamar a un input es:
document . forms [' id del form '] . elements [' id del input '] . value
Document, llama al documento, forms, llama a algun formulario html en el documento, elements llama a algo dentro del formulario (un input, un boton, etc). Usando value, cambias el contenido del input; pero también puedes cambiar otros valores como el tamaño, el ancho, el largo, etcétera, utilizando el valor del html que quieres cambiar, en lugar de poner value al final.
Ahora, te preguntarás dónde estan estos formularios?
Estos formularios tienen que estar en un HTML:
<body>
<form name="test1" id="test1">
Test:
<select id="blah" onchange="CambiarValores(document.forms['test1'].e lements['blah'].value)">
<option value="0"></option>
<option value="1">Pepe</option>
<option value="2">Carlos</option>
</select><br/>
<input type="text" id="fname" value="Nombre"><input type="text" id="sname" value="Apellido"><br/>
<input type="reset" name="Reset" id="Reset" value="RESET!">
</form>
</body>
Presta atención a las casillas "id" y "name" de cada una.
Verás que aparecen "test1" en el nombre del formulario, "fname" en el nombre del primer input de texto, y "sname" en el segundo. Estos son por First Name (nombre) y Surname (Apellido), pero puedes poner los que quieras. Sólo fíjate que en el JavaScript tengas los mismos datos dentro de "elements".
Y además, en el select, verás que hay un value 0, 1 y 2, que son justamente lo que mandaremos al javascript para que realice el cambio. Tienes un ejemplo de como funciona esto en varias opciones del cPanel o sino descargando el archivo adjunto que tiene este mismo código para probar.
Lo bueno de javascipr es que no es necesario que lo subas a algun servidor o que hagas algun servidor local, puedes testearlo desde tu pc directamente con Windows o con Linux.
<script type="text/javascript">
function CambiarValores(nombre){
switch (nombre){
case "1":
document.forms['test1'].elements['fname'].value = "Pepe"
document.forms['test1'].elements['sname'].value = "Juarez"
break
case "2":
document.forms['test1'].elements['fname'].value = "Carlos"
document.forms['test1'].elements['sname'].value = "Mendez"
break
default:
document.forms['test1'].elements['fname'].value = "Nombre"
document.forms['test1'].elements['sname'].value = "Apellido"
}
}
</script>
Si te fijas, veras que hay 3 opciones, la opcion 1, la 2 y la "por defecto". En la opción uno, cambiamos un formulario de texto, por "Pepe" y el segundo por "Juarez". Los demás son lo mismo, pero con otros nombres.
La forma de llamar a un input es:
document . forms [' id del form '] . elements [' id del input '] . value
Document, llama al documento, forms, llama a algun formulario html en el documento, elements llama a algo dentro del formulario (un input, un boton, etc). Usando value, cambias el contenido del input; pero también puedes cambiar otros valores como el tamaño, el ancho, el largo, etcétera, utilizando el valor del html que quieres cambiar, en lugar de poner value al final.
Ahora, te preguntarás dónde estan estos formularios?
Estos formularios tienen que estar en un HTML:
<body>
<form name="test1" id="test1">
Test:
<select id="blah" onchange="CambiarValores(document.forms['test1'].e lements['blah'].value)">
<option value="0"></option>
<option value="1">Pepe</option>
<option value="2">Carlos</option>
</select><br/>
<input type="text" id="fname" value="Nombre"><input type="text" id="sname" value="Apellido"><br/>
<input type="reset" name="Reset" id="Reset" value="RESET!">
</form>
</body>
Presta atención a las casillas "id" y "name" de cada una.
Verás que aparecen "test1" en el nombre del formulario, "fname" en el nombre del primer input de texto, y "sname" en el segundo. Estos son por First Name (nombre) y Surname (Apellido), pero puedes poner los que quieras. Sólo fíjate que en el JavaScript tengas los mismos datos dentro de "elements".
Y además, en el select, verás que hay un value 0, 1 y 2, que son justamente lo que mandaremos al javascript para que realice el cambio. Tienes un ejemplo de como funciona esto en varias opciones del cPanel o sino descargando el archivo adjunto que tiene este mismo código para probar.
Lo bueno de javascipr es que no es necesario que lo subas a algun servidor o que hagas algun servidor local, puedes testearlo desde tu pc directamente con Windows o con Linux.