Formulario
Hola. Estoy haciendo un formulario y quiero que se vaya mostrando paso a paso según la selección.
Ejem, elegir:particular o empresa, según elección mostrar distintos campos de formulario.
¿Cómo me aconsejan que lo monte, en Javascript dinámico? ¿En html?
He empezado con javascript generando el código en dos frames, pero no se si voy bien encaminado. He encontrado muchas trabas. Tampoco soy un experto, más bien novato.
Gracias.
Ejem, elegir:particular o empresa, según elección mostrar distintos campos de formulario.
¿Cómo me aconsejan que lo monte, en Javascript dinámico? ¿En html?
He empezado con javascript generando el código en dos frames, pero no se si voy bien encaminado. He encontrado muchas trabas. Tampoco soy un experto, más bien novato.
Gracias.
Respuesta de ikermuriel
1
Si, como dices, todavía no estás muy dentro del desarrollo web mi recomendación es que maquetes (diseñes) el formulario completo, tal como quieres verlo.
Luego tienes en cuenta los elementos de tu formulario que quieres ocultar (las diferentes opciones) y los vas introduciendo en elementos DIV.
Con CSS puedes ocultar y mostrar fácilmente los elementos DIV con la propiedad "display" (que puede tomar valores "block" (visible) y "none" (invisible)).
Una vez que se muestran los elementos que deseas defines los eventos javascript que mostrarán u ocultarán los DIV.
Y a partir de aquí se trata de ir programando en javascript cuales se tienen que ocultar/mostrar cada vez que se selecciona una u otra opción.
Si necesitas más detalles no dudes de preguntarme, estaré encantado de atenderte. Y si necesitas ejemplos de código solo tienes que pedirlos.
Luego tienes en cuenta los elementos de tu formulario que quieres ocultar (las diferentes opciones) y los vas introduciendo en elementos DIV.
Con CSS puedes ocultar y mostrar fácilmente los elementos DIV con la propiedad "display" (que puede tomar valores "block" (visible) y "none" (invisible)).
Una vez que se muestran los elementos que deseas defines los eventos javascript que mostrarán u ocultarán los DIV.
Y a partir de aquí se trata de ir programando en javascript cuales se tienen que ocultar/mostrar cada vez que se selecciona una u otra opción.
Si necesitas más detalles no dudes de preguntarme, estaré encantado de atenderte. Y si necesitas ejemplos de código solo tienes que pedirlos.
buff, y CSS es que ni puta. Lo poco que he visto y hecho algo es un poquito de html y otro poquito de javascript.
Puede que con eso nos podamos apañar.
Si has dado html supondré que sabes que son los atributos de las etiquetas, si no dímelo y empiezo desde algo más básico.
Para el HTML: No necesitas más de lo que ya sabes. Simplemente la etiqueta DIV con un atributo CSS:
<div style="display:block;"> tus elementos de formulario </div>
[block ó none para mostrar u ocultar]
Para el CSS: Nada, porque lo incluimos en el atributo "style" de la etiqueta DIV, simplemente el display:block ó display:none.
Para el Javascript: Aquí se complica un poquito la cosa, pero es fácil. Dependiendo de si es un SELECT o un CHECKBOX o un RADIO deberás escoger un evento diferente (onclick, onchange [si no sabes que escoger preguntamelo]).
A cada evento le asignamos una función, por ejemplo: onclick="ocultar('div3');"
Ocultar() es una función que cambia la propiedad "display" de "div3" y la pone a none. También deberás hacer una función que muestre (que ponga la propiedad a block).
Puedes llamar a la misma función varias veces en un mismo evento. Por ejemplo, si necesito (en un elemento de formulario) mostrar un DIV y ocultar dos puedo hacer:
onclick="mostrar('div1'); ocultar('div2'); ocultar('div3');"
De momento no te voy a poner más. De HTML y CSS no hay más, simplemente maquetar el formulario. De javascript quedan cositas por explicar pero no quiero marearte demasiado por si te pierdes :D
Por cierto, si quieres dime como llevas el javascript. ¿Has dado funciones? Sabes programar (aunque no sea en javascript, en otros lenguajes como C, PHP, Vb...¿)? El que sepas programar ayuda mucho ya que verás que javascript es como todos los demás lenguajes: Facilísimo.
Ya sabes donde estoy para cualquier cosa!
Si has dado html supondré que sabes que son los atributos de las etiquetas, si no dímelo y empiezo desde algo más básico.
Para el HTML: No necesitas más de lo que ya sabes. Simplemente la etiqueta DIV con un atributo CSS:
<div style="display:block;"> tus elementos de formulario </div>
[block ó none para mostrar u ocultar]
Para el CSS: Nada, porque lo incluimos en el atributo "style" de la etiqueta DIV, simplemente el display:block ó display:none.
Para el Javascript: Aquí se complica un poquito la cosa, pero es fácil. Dependiendo de si es un SELECT o un CHECKBOX o un RADIO deberás escoger un evento diferente (onclick, onchange [si no sabes que escoger preguntamelo]).
A cada evento le asignamos una función, por ejemplo: onclick="ocultar('div3');"
Ocultar() es una función que cambia la propiedad "display" de "div3" y la pone a none. También deberás hacer una función que muestre (que ponga la propiedad a block).
Puedes llamar a la misma función varias veces en un mismo evento. Por ejemplo, si necesito (en un elemento de formulario) mostrar un DIV y ocultar dos puedo hacer:
onclick="mostrar('div1'); ocultar('div2'); ocultar('div3');"
De momento no te voy a poner más. De HTML y CSS no hay más, simplemente maquetar el formulario. De javascript quedan cositas por explicar pero no quiero marearte demasiado por si te pierdes :D
Por cierto, si quieres dime como llevas el javascript. ¿Has dado funciones? Sabes programar (aunque no sea en javascript, en otros lenguajes como C, PHP, Vb...¿)? El que sepas programar ayuda mucho ya que verás que javascript es como todos los demás lenguajes: Facilísimo.
Ya sabes donde estoy para cualquier cosa!
Muy bien, muy bien. Muchas gracias mostró.
Aplico lo que me has contado y te cuento.
Respecto a lo que me has preguntado, no tengo puta idea de programación. Y debería saber C ya! Llevo años diciendo que es una asignatura pendiente, pero quiero aprender.
Por ahora estoy intentado hacer algo en JS. Lo poco que se de JS es lo que he ido probando de lo que he leído de foros. Se supone que se hacer funciones, aunque tengo muchas lagunas, y es por no haber aprendido bien.
Si estás dispuesto, te las voy planteando conforme necesite aplicar algo. ¿Te parece?
Deja que aplique esta noche lo que me has dicho por ahora y ya te cuento.
Gracias de nuevo.
Aplico lo que me has contado y te cuento.
Respecto a lo que me has preguntado, no tengo puta idea de programación. Y debería saber C ya! Llevo años diciendo que es una asignatura pendiente, pero quiero aprender.
Por ahora estoy intentado hacer algo en JS. Lo poco que se de JS es lo que he ido probando de lo que he leído de foros. Se supone que se hacer funciones, aunque tengo muchas lagunas, y es por no haber aprendido bien.
Si estás dispuesto, te las voy planteando conforme necesite aplicar algo. ¿Te parece?
Deja que aplique esta noche lo que me has dicho por ahora y ya te cuento.
Gracias de nuevo.
Perfecto, prueba eso (sobre todo fíjate como se muestran y ocultan los DIV), maqueta el formulario, y cuando te surja cualquier duda me cuentas
Con respecto a lo del javascript, intentalo, si no te sale cualquier cosilla, pues ya sabes ande ando :D
De todas maneras javascript es muy facilongo y lo que quieres hacer son 4 lineas de código, así que no vas a tener mayor problema.
Con respecto a lo del javascript, intentalo, si no te sale cualquier cosilla, pues ya sabes ande ando :D
De todas maneras javascript es muy facilongo y lo que quieres hacer son 4 lineas de código, así que no vas a tener mayor problema.
Quieres echar un ojo, ¿a ver que te parece?
Ahora no se como aplicar la función deshabilita, ¿cómo la aplico? ¿Pero lo demás, puede valer, no?
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Datos cliente</title>
<script language="Javascript" type="text/javascript">
<!--
function deshabilita()
{
document.formulario.tipocliente[0].disabled = true;
document.formulario.tipocliente[1].disabled = true;
document.formulario.tipocliente[2].disabled = true;
document.formulario.tipocliente[3].disabled = true;
}
function ver(bloque)
{
obj=document.getElementById(bloque);
obj.style.display=(obj.style.display=="none")?"block":"";
}
//-->
</script>
</head>
<body bgcolor="#3C3C3C">
<p><font size="5" color="#FFFFFF">Datos personales</font></p>
<form name="formulario" method="POST" action="http:///cgi-bin/FormMail.pl">
<input type=hidden name="recipient" [email protected]>
<input type=hidden name="realname" value="Datos cliente">
<input type=hidden name="redirect" value="./ptras/gracias.htm">
<div id="datos" style="display=block">
<p><input type="text" name="nombre" size="20"> <font color="#FFFFFF">Nombre</font></p>
<p><input type="text" name="Tlf" size="20"><font color="#FFFFFF"> Teléfono de contacto</font></p>
<p><font color="#FFFFFF"><b>Seleccione una opción</b></font></p>
<p><input type="radio" name="tipocliente" value="Particular" onclick="ver('vivienda')"><font color="#FFFFFF"> Particular</font>
<input type="radio" name=tipocliente value="Instalador" onclick="ver('instalador')"><font color="#FFFFFF">Instalador</font>
<input type="radio" name=tipocliente value="Construtora" onclick="ver('promotora')"><font color="#FFFFFF">Constructora </font>
<input type="radio" name=tipocliente value="Promotora" onclick="ver('promotora')"><font color="#FFFFFF">Promotora</font></p>
</div>
<div id="vivienda" style="display:none">
<p><input type="checkbox" name="vivienda" value="propia"> <font color="#FFFFFF">Vivienda Propia</font></p>
<input type="text" name="superficie" size="1"><font color="#FFFFFF">m2. Superfie</font></p>
<input type="text" name="Nº de plantas" size="1"> <font color="#FFFFFF">Número de plantas</font>
<input type="text" name="habitaciones" size="1"> <font color="#FFFFFF">Número de habitaciones</font></p>
<input type="submit" value="Enviar"> <input type="reset" value="Restablecer"></div>
<div id="instalador" style="display:none">
<input type="text" name="empresa" size="4"> <font color="#FFFFFF">Nombre Empresa</font></p>
<input type="submit" value="Enviar"> <input type="reset" value="Restablecer"></div>
<div id="promotora" style="display:none">
<input type="radio" name=tipocliente value="Promotora"><font color="#FFFFFF">Promotora</font></p>
<input type="submit" value="Enviar"> <input type="reset" value="Restablecer"></div>
</form>
</body>
</html>
Muchas gracias. La verdad es que era bastante sencillo, pero no tengo ni idea.
Gracias por la "luz"
Ahora no se como aplicar la función deshabilita, ¿cómo la aplico? ¿Pero lo demás, puede valer, no?
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Datos cliente</title>
<script language="Javascript" type="text/javascript">
<!--
function deshabilita()
{
document.formulario.tipocliente[0].disabled = true;
document.formulario.tipocliente[1].disabled = true;
document.formulario.tipocliente[2].disabled = true;
document.formulario.tipocliente[3].disabled = true;
}
function ver(bloque)
{
obj=document.getElementById(bloque);
obj.style.display=(obj.style.display=="none")?"block":"";
}
//-->
</script>
</head>
<body bgcolor="#3C3C3C">
<p><font size="5" color="#FFFFFF">Datos personales</font></p>
<form name="formulario" method="POST" action="http:///cgi-bin/FormMail.pl">
<input type=hidden name="recipient" [email protected]>
<input type=hidden name="realname" value="Datos cliente">
<input type=hidden name="redirect" value="./ptras/gracias.htm">
<div id="datos" style="display=block">
<p><input type="text" name="nombre" size="20"> <font color="#FFFFFF">Nombre</font></p>
<p><input type="text" name="Tlf" size="20"><font color="#FFFFFF"> Teléfono de contacto</font></p>
<p><font color="#FFFFFF"><b>Seleccione una opción</b></font></p>
<p><input type="radio" name="tipocliente" value="Particular" onclick="ver('vivienda')"><font color="#FFFFFF"> Particular</font>
<input type="radio" name=tipocliente value="Instalador" onclick="ver('instalador')"><font color="#FFFFFF">Instalador</font>
<input type="radio" name=tipocliente value="Construtora" onclick="ver('promotora')"><font color="#FFFFFF">Constructora </font>
<input type="radio" name=tipocliente value="Promotora" onclick="ver('promotora')"><font color="#FFFFFF">Promotora</font></p>
</div>
<div id="vivienda" style="display:none">
<p><input type="checkbox" name="vivienda" value="propia"> <font color="#FFFFFF">Vivienda Propia</font></p>
<input type="text" name="superficie" size="1"><font color="#FFFFFF">m2. Superfie</font></p>
<input type="text" name="Nº de plantas" size="1"> <font color="#FFFFFF">Número de plantas</font>
<input type="text" name="habitaciones" size="1"> <font color="#FFFFFF">Número de habitaciones</font></p>
<input type="submit" value="Enviar"> <input type="reset" value="Restablecer"></div>
<div id="instalador" style="display:none">
<input type="text" name="empresa" size="4"> <font color="#FFFFFF">Nombre Empresa</font></p>
<input type="submit" value="Enviar"> <input type="reset" value="Restablecer"></div>
<div id="promotora" style="display:none">
<input type="radio" name=tipocliente value="Promotora"><font color="#FFFFFF">Promotora</font></p>
<input type="submit" value="Enviar"> <input type="reset" value="Restablecer"></div>
</form>
</body>
</html>
Muchas gracias. La verdad es que era bastante sencillo, pero no tengo ni idea.
Gracias por la "luz"
Bien, lo has hecho genial.
La función de "ver" la has cogido genial y si me permites un detalle, te la aclaro más y la resumo en una linea:
document.getElementById(bloque).style.display = "block";
en vez de
obj=document.getElementById(bloque);
obj.style.display=(obj.style.display=="none")?"block":"";
¿Por qué así no?
Realmente es lo mismo (algún pequeño matiz las diferencia), lo que has hecho es totalmente correcto, pero de la otra manera queda más comprensible que con tanta interrogación, comillas dobles, dos puntos, asignaciones de elementos...
Es simplemente un pequeño matiz, pero sin importancia, no pienses que lo otro está mal, en absoluto.
La función deshabilitar supongo que es la de ocultar. Para eso usamos lo contrario a la de ver:
document.getElementById(bloque).style.display = "none";
Recuerda que en el evento onclick de cada "radio" tienes que mostrar el DIV que sea, pero también ocultar todos los demás. Te pongo un ejemplo:
onclick="ver('vivienda'); deshabilitar('instalador'); deshabilitar('promotora');"
Como ves tienen que ir separados por punto y coma (;), ya que sino te dará error.
Dale caña a eso y cuando lo tengas dominao te digo cosas que puedes quitar que no te van a servir para nada :D
Por cierto, me he dado cuenta de que desde "constructora" y "promotora" llamas al mismo DIV "promotora". No se si lo quieres así o es que te has confundido, echale un ojito :D
La función de "ver" la has cogido genial y si me permites un detalle, te la aclaro más y la resumo en una linea:
document.getElementById(bloque).style.display = "block";
en vez de
obj=document.getElementById(bloque);
obj.style.display=(obj.style.display=="none")?"block":"";
¿Por qué así no?
Realmente es lo mismo (algún pequeño matiz las diferencia), lo que has hecho es totalmente correcto, pero de la otra manera queda más comprensible que con tanta interrogación, comillas dobles, dos puntos, asignaciones de elementos...
Es simplemente un pequeño matiz, pero sin importancia, no pienses que lo otro está mal, en absoluto.
La función deshabilitar supongo que es la de ocultar. Para eso usamos lo contrario a la de ver:
document.getElementById(bloque).style.display = "none";
Recuerda que en el evento onclick de cada "radio" tienes que mostrar el DIV que sea, pero también ocultar todos los demás. Te pongo un ejemplo:
onclick="ver('vivienda'); deshabilitar('instalador'); deshabilitar('promotora');"
Como ves tienen que ir separados por punto y coma (;), ya que sino te dará error.
Dale caña a eso y cuando lo tengas dominao te digo cosas que puedes quitar que no te van a servir para nada :D
Por cierto, me he dado cuenta de que desde "constructora" y "promotora" llamas al mismo DIV "promotora". No se si lo quieres así o es que te has confundido, echale un ojito :D
Bueno el resumen de la función.
Si, tengo lo mismo porque copie y pegue, para probar y a correr.
Lo de la función ocultar es para dejar visible pero "disabled" lo que voy rellenando.
Si, tengo lo mismo porque copie y pegue, para probar y a correr.
Lo de la función ocultar es para dejar visible pero "disabled" lo que voy rellenando.
Ok.
No me parece bien que según vayas rellenando los campos los vayas deshabilitando, porque imaginate que te confundes ¡Tendrías que actualizar la página!
De todas maneras yo te pongo aquí el código:
function deshabilitar(elemento) {
elemento.disabled=true;
}
Y en las etiquetas de lo que quieras deshabilitar pones esto (puede deshabilitar cualquier elemento):
onblur="deshabilitar(this);"
Con onblur consigues que cuando salga del elemento (es decir, haga click con el ratón en otra parte de la página o pulse la tecla Tabulador) este se bloquee.
Puedes cambiar la función para que deshabilite todos los radios menos el que ha pinchado:
function deshabilitar(radio_pinchado) {
for (i=0; i<4; i++) {
if (radio_pinchado != document.formulario.tipocliente)
document.formulario.tipocliente.disabled=true;
}
}
Si pones esta función, solo podrás situarla en el evento onclick de los "radio" (junto con las de mostrar/ocultar, separadas por punto y coma). Si las pones en las cajas de texto te bloqueará todos los radios (puedes probarlo si quieres).
Si quieres más ejemplos o no te aclaras no repares en decírmelo.
No me parece bien que según vayas rellenando los campos los vayas deshabilitando, porque imaginate que te confundes ¡Tendrías que actualizar la página!
De todas maneras yo te pongo aquí el código:
function deshabilitar(elemento) {
elemento.disabled=true;
}
Y en las etiquetas de lo que quieras deshabilitar pones esto (puede deshabilitar cualquier elemento):
onblur="deshabilitar(this);"
Con onblur consigues que cuando salga del elemento (es decir, haga click con el ratón en otra parte de la página o pulse la tecla Tabulador) este se bloquee.
Puedes cambiar la función para que deshabilite todos los radios menos el que ha pinchado:
function deshabilitar(radio_pinchado) {
for (i=0; i<4; i++) {
if (radio_pinchado != document.formulario.tipocliente)
document.formulario.tipocliente.disabled=true;
}
}
Si pones esta función, solo podrás situarla en el evento onclick de los "radio" (junto con las de mostrar/ocultar, separadas por punto y coma). Si las pones en las cajas de texto te bloqueará todos los radios (puedes probarlo si quieres).
Si quieres más ejemplos o no te aclaras no repares en decírmelo.
Hola, mostró. ¿Cómo va?
Así quedo el código. Tengo que afinar y añadir algunas cosas, pero algo así es lo que estaba montando.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Datos cliente</title>
<script language="Javascript" type="text/javascript">
<!--
function ddatos(radio)
{
for (i=0; i<4; i++)
{
document.formulario.tipocliente.disabled=true;
}
document.formulario.tipocliente[radio].disabled=false;
}
function dinst(radio)
{
for (i=0; i<4; i++)
{
document.formulario.tipoinstalacion.disabled=true;
}
document.formulario.tipoinstalacion[radio].disabled=false;
}
function ver(bloque)
{
document.getElementById(bloque).style.display = "block";
}
//-->
</script>
</head>
<body bgcolor="#3C3C3C">
<b>
<font size="6" color="#FFFFFF">Datos personales</font></b></p>
<form name="formulario" method="POST" action="http://www.domosonic.com/cgi-bin/FormMail.pl">
<input type=hidden name="recipient" value="[email protected]" size="30">
<input type=hidden name="realname" value="Formulario DomoSonic">
<input type=hidden name="redirect" value="http://www.domosonic.com/Otras/gracias.htm">
<div id="datos" style="display:block">
<input type="text" name="Nombre" size="20"> <font color="#FFFFFF">Nombre</font></p>
<input type="text" name="Tlf." size="20"> <font color="#FFFFFF">Teléfono de contacto</font></p>
<font color="#FFFFFF"><b>Seleccione una opción</b></font></p>
<input type="radio" id="tipocliente" name="Tipo de cliente" value="Particular" onclick="ver('propia');ver('vivienda');ddatos('0')"><font color="#FFFFFF">Particular</font>
<input type="radio" id="tipocliente" name="Tipo de cliente" value="Instalador" onclick="ver('empresa');ver('instalacion');ddatos('1')"><font color="#FFFFFF">Instalador</font>
<input type="radio" id="tipocliente" name="Tipo de cliente" value="Construtora" onclick="ver('empresa');ver('instalacion');ddatos('2')"><font color="#FFFFFF">Constructora</font>
<input type="radio" id="tipocliente" name="Tipo de cliente" value="Promotora" onclick="ver('empresa');ver('instalacion');ddatos('3')"><font color="#FFFFFF">Promotora</font></p>
</div>
<div id="propia" style="display:none">
<input type="checkbox" name="Vivienda" value="Propia" onclick="ver('vivi');ver('envia')"> <font color="#FFFFFF">Vivienda Propia</font></p>
</div>
<div id="empresa" style="display:none">
<input type="text" name="Nombre Empresa" size="30"> <font color="#FFFFFF">Nombre Empresa</font></p>
</div>
<div id="instalacion" style="display:none">
<input type="radio" id="tipoinstalacion" name="Tipo de instalación" value="Unifamiliar" onclick="ver('vivi');ver('envia');dinst('0')"><font color="#FFFFFF">Unifamiliar</font>
<input type="radio" id="tipoinstalacion" name="Tipo de instalación" value="Conjunto de viviendas" onclick="ver('vivi');ver('nviviendas');ver('envia');dinst('1')"><font color="#FFFFFF">Conjunto de viviendas</font>
<input type="radio" id="tipoinstalacion" name="Tipo de instalación" value="Bloque de pisos" onclick="ver('vivi');ver('nviviendas');ver('envia');dinst('2')"><font color="#FFFFFF">Bloque de pisos</font>
<input type="radio" id="tipoinstalacion" name="Tipo de instalación" value="Villa" onclick="ver('vivi');ver('nviviendas');ver('envia');dinst('3')"><font color="#FFFFFF">Villa</font></p>
</div>
<div id="vivi" style="display:none">
<input type="text" name="Superficie" size="1"> <font color="#FFFFFF">m2. Superfie</font></p>
<input type="text" name="Nº de plantas" size="1"> <font color="#FFFFFF">Número de plantas</font>
<input type="text" name="Nº de habitaciones" size="1"> <font color="#FFFFFF">Número de habitaciones</font></p>
</div>
<div id="nviviendas" style="display:none">
<input type="text" name="Nº de viviendas" size="1"> <font color="#FFFFFF">Numero de viviendas</font></p>
</div>
<div id="envia" style="display:none">
<input type="submit" value="Enviar"> <input type="reset" value="Restablecer" onclick="location.reload()"></div>
</form>
</body>
</html>
Muchas gracias por tus ayuda. De verdad que me ha servido de mucho. Cuento contigo para otra ocasión. GRACIAS.
Así quedo el código. Tengo que afinar y añadir algunas cosas, pero algo así es lo que estaba montando.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Datos cliente</title>
<script language="Javascript" type="text/javascript">
<!--
function ddatos(radio)
{
for (i=0; i<4; i++)
{
document.formulario.tipocliente.disabled=true;
}
document.formulario.tipocliente[radio].disabled=false;
}
function dinst(radio)
{
for (i=0; i<4; i++)
{
document.formulario.tipoinstalacion.disabled=true;
}
document.formulario.tipoinstalacion[radio].disabled=false;
}
function ver(bloque)
{
document.getElementById(bloque).style.display = "block";
}
//-->
</script>
</head>
<body bgcolor="#3C3C3C">
<b>
<font size="6" color="#FFFFFF">Datos personales</font></b></p>
<form name="formulario" method="POST" action="http://www.domosonic.com/cgi-bin/FormMail.pl">
<input type=hidden name="recipient" value="[email protected]" size="30">
<input type=hidden name="realname" value="Formulario DomoSonic">
<input type=hidden name="redirect" value="http://www.domosonic.com/Otras/gracias.htm">
<div id="datos" style="display:block">
<input type="text" name="Nombre" size="20"> <font color="#FFFFFF">Nombre</font></p>
<input type="text" name="Tlf." size="20"> <font color="#FFFFFF">Teléfono de contacto</font></p>
<font color="#FFFFFF"><b>Seleccione una opción</b></font></p>
<input type="radio" id="tipocliente" name="Tipo de cliente" value="Particular" onclick="ver('propia');ver('vivienda');ddatos('0')"><font color="#FFFFFF">Particular</font>
<input type="radio" id="tipocliente" name="Tipo de cliente" value="Instalador" onclick="ver('empresa');ver('instalacion');ddatos('1')"><font color="#FFFFFF">Instalador</font>
<input type="radio" id="tipocliente" name="Tipo de cliente" value="Construtora" onclick="ver('empresa');ver('instalacion');ddatos('2')"><font color="#FFFFFF">Constructora</font>
<input type="radio" id="tipocliente" name="Tipo de cliente" value="Promotora" onclick="ver('empresa');ver('instalacion');ddatos('3')"><font color="#FFFFFF">Promotora</font></p>
</div>
<div id="propia" style="display:none">
<input type="checkbox" name="Vivienda" value="Propia" onclick="ver('vivi');ver('envia')"> <font color="#FFFFFF">Vivienda Propia</font></p>
</div>
<div id="empresa" style="display:none">
<input type="text" name="Nombre Empresa" size="30"> <font color="#FFFFFF">Nombre Empresa</font></p>
</div>
<div id="instalacion" style="display:none">
<input type="radio" id="tipoinstalacion" name="Tipo de instalación" value="Unifamiliar" onclick="ver('vivi');ver('envia');dinst('0')"><font color="#FFFFFF">Unifamiliar</font>
<input type="radio" id="tipoinstalacion" name="Tipo de instalación" value="Conjunto de viviendas" onclick="ver('vivi');ver('nviviendas');ver('envia');dinst('1')"><font color="#FFFFFF">Conjunto de viviendas</font>
<input type="radio" id="tipoinstalacion" name="Tipo de instalación" value="Bloque de pisos" onclick="ver('vivi');ver('nviviendas');ver('envia');dinst('2')"><font color="#FFFFFF">Bloque de pisos</font>
<input type="radio" id="tipoinstalacion" name="Tipo de instalación" value="Villa" onclick="ver('vivi');ver('nviviendas');ver('envia');dinst('3')"><font color="#FFFFFF">Villa</font></p>
</div>
<div id="vivi" style="display:none">
<input type="text" name="Superficie" size="1"> <font color="#FFFFFF">m2. Superfie</font></p>
<input type="text" name="Nº de plantas" size="1"> <font color="#FFFFFF">Número de plantas</font>
<input type="text" name="Nº de habitaciones" size="1"> <font color="#FFFFFF">Número de habitaciones</font></p>
</div>
<div id="nviviendas" style="display:none">
<input type="text" name="Nº de viviendas" size="1"> <font color="#FFFFFF">Numero de viviendas</font></p>
</div>
<div id="envia" style="display:none">
<input type="submit" value="Enviar"> <input type="reset" value="Restablecer" onclick="location.reload()"></div>
</form>
</body>
</html>
Muchas gracias por tus ayuda. De verdad que me ha servido de mucho. Cuento contigo para otra ocasión. GRACIAS.
Genial, yo lo veo genial.
Alguna cosilla si que queda matizar, como por ejemplo que en las funciones "ddatos" y "dinst" te falta cambiar una cosa.
Para que los desactive correctamente (en Internet Explorer 7 no funciona) tienes que cambiar las lineas:
document.formulario.tipocliente.disabled=true;
document.formulario.tipoinstalacion.disabled=true;
por esto otro
document.formulario.tipocliente.disabled=true;
document.formulario.tipoinstalacion.disabled=true;
Se diferencian en que tienen "" detrás de "tipocliente" y de "tipoinstalacion".
Te dejo una función de ejemplo:
function ddatos(radio)
{
for (i=0; i<4; i++)
{
document.formulario.tipocliente.disabled=true;
}
document.formulario.tipocliente[radio].disabled=false;
}
Aunque me parece que ha sido error mío porque por lo que veo más arriba me olvidé de poner los corchetes. Lo siento.
Yo, así a ojo no le veo más errores de que no funcione, ahora simplemente queda que lo vayas maquetando a tu gusto.
Si necesitas cualquier ayuda, aunque no sea con javascript, porque no te quede algo como tu quieres, cualquier cosa, ya sabes donde encontrarme.
Alguna cosilla si que queda matizar, como por ejemplo que en las funciones "ddatos" y "dinst" te falta cambiar una cosa.
Para que los desactive correctamente (en Internet Explorer 7 no funciona) tienes que cambiar las lineas:
document.formulario.tipocliente.disabled=true;
document.formulario.tipoinstalacion.disabled=true;
por esto otro
document.formulario.tipocliente.disabled=true;
document.formulario.tipoinstalacion.disabled=true;
Se diferencian en que tienen "" detrás de "tipocliente" y de "tipoinstalacion".
Te dejo una función de ejemplo:
function ddatos(radio)
{
for (i=0; i<4; i++)
{
document.formulario.tipocliente.disabled=true;
}
document.formulario.tipocliente[radio].disabled=false;
}
Aunque me parece que ha sido error mío porque por lo que veo más arriba me olvidé de poner los corchetes. Lo siento.
Yo, así a ojo no le veo más errores de que no funcione, ahora simplemente queda que lo vayas maquetando a tu gusto.
Si necesitas cualquier ayuda, aunque no sea con javascript, porque no te quede algo como tu quieres, cualquier cosa, ya sabes donde encontrarme.
Perdona pero es que los corchetes los escribo pero no me salen... no entiendo por qué.
A ver como me apaño, te voy a intentar dejar la función de ejemplo pero voy a sustituir los corchetes "[" "]" por paréntesis, te voy a subrayar donde tienen que ir los corchetes sustituyendo a los paréntesis
function ddatos(radio)
{
for (i=0; i<4; i++)
{
document.formulario.tipocliente(i).disabled=true;
}
document.formulario.tipocliente[radio].disabled=false;
}
Sustituye los paréntesis por corchetes y deja la "i" porque es la variable que hace que se desactiven los "radios".
En la función "dinst" también tienes que añadir los corchetes con la "i" en el mismo sitio (pero en vez de "tipocliente" al final de "tipoinstalacion").
Ya lo siento, pero es que no entiendo porque no los pone.
A ver como me apaño, te voy a intentar dejar la función de ejemplo pero voy a sustituir los corchetes "[" "]" por paréntesis, te voy a subrayar donde tienen que ir los corchetes sustituyendo a los paréntesis
function ddatos(radio)
{
for (i=0; i<4; i++)
{
document.formulario.tipocliente(i).disabled=true;
}
document.formulario.tipocliente[radio].disabled=false;
}
Sustituye los paréntesis por corchetes y deja la "i" porque es la variable que hace que se desactiven los "radios".
En la función "dinst" también tienes que añadir los corchetes con la "i" en el mismo sitio (pero en vez de "tipocliente" al final de "tipoinstalacion").
Ya lo siento, pero es que no entiendo porque no los pone.
