¿Algo parecido a la FAQ 27 pero sin usar marcos?

[rbczgz]

Hola a tod@s!!

Necesito hacer algo como lo de la FAQ 27 (http://www.forosdelweb.com/f13/faqs-javascript-105325-post260200/) pero sin usar la página DummyPG.htm (o cualquier otra...) o sea, sin usar marco, que se haga todo dentro de la misma página.

He probado a hacer varios cambios pero no hay manera.

¿Alguien me puede echar un cable?

Gracias mil.

[jam1138]

Puedes usar estilos. Algo sencillo... prueba esto:

Código HTML:

<select name="select" size="1" onChange="document.getElementById('texto').style.display=this.value">
<option value="">Muestra</option>
<option value="none">Oculta</option>
</select>

<input name="texto" type="text" id="texto" style="display:"> 

Puedes verlo ---Enlace Caducado---
Esto me gusta porque no solo oculta el objeto, sino que "lo quita"; vaya desplaza lo que le seguiria y ocupa su lugar... como si no estubiera. Igual podrías ocupar el atrributo 'visibility' ó etiquetas DIV... busca en el foro para más info...

Suerte!
PD: Invitación a usar títulos de las consultas más específicos... para ayudar a posteriores busquedas...

[rbczgz]

Gracias jam1138!!

Lo he probado pero sólo me muestra u oculta un elemento y el form que uso tiene 9 elementos, de los que se tienen que ocultar 4 en uno de los casos, además, en el select le tengo que dar un valor a las opciones, para que lo recoja el script de PHP. En fin, que no hay manera, no consigo encontrar la solución

Ojalá alguien me pueda ayudar con esto...

Muchas gracias

[jam1138]

... todo depende de la estructura de tu formularo, la distribución de tus elementos. Por ejemplo, si esos 4 elementos que quieres ocultar están "cerca", de tal manera que pueden estar dentro de una tabla independiente (tabla dentro de otra tabla), puedes mandar a ocultar toda la tabla y, por lo tanto, se oculta todo lo que está dentro de ella... también es aplicarble a una etiqueta <tr>, <td>, etc... y si no manejas tablas puedes utilizar (incisto) <div>, incluso <p>... ó directo a tu elemento... date cuenta que la función hace referencia a la 'id' del elemento a ocultar...
Si tus elementos están disgregados, sin poderlos agrupar en un solo elemento, quizá puedas crear una función donde le pases varios valores, y mandar a llamar a esa función... no sé qué pase si le daz la misma id a varios elementos ... no creo... pero prueba ... de verdad prueba, hasta el momento no nos haz dicho qué es lo que tienes y cuál es tu problema en específico...

Lo de pasar valores sería algo similiar... document.getElementById('texto').value="algo" ... haz buscado???

Suerte!

[rbczgz]

Hola de nuevo!!

Muchísimas gracias jam1138 , ya casi lo tengo con lo de la tabla lo he conseguido solucionar (o casi) ahora el problema se me presenta con el paso de los valores, uso

Código HTML:

<option value="none" onSubmit="document.getElementById('formulario').value='Consulta'" selected>Consulta</option>
<option onSubmit="document.getElementById('formulario').value='Solicitud'">Solicitud</option> 

y también he probado con onBlur pero así no me lo recoge el PHP , creo que es porque no es onSubmit ni onBlur pero no se como se usa esta función ¿me puedes dar la última ayuda? Creo que con eso ya lo tengo acabado, he buscado pero no encuentro la explicación, cuando esté listo ya pasaré el enlace para que lo veas

[rbczgz]

¿No hay nadie que me pueda echar un cable con esto?

Es lo único que me falta para que me funcione el form...

[jam1138]

Iniciado por rbczgz

(...) el problema se me presenta con el paso de los valores, uso

Código HTML:

<option value="none" onSubmit="document.getElementById('formulario').value='Consulta'" selected>Consulta</option>
<option onSubmit="document.getElementById('formulario').value='Solicitud'">Solicitud</option> 

y también he probado con onBlur pero así no me lo recoge el PHP (...)

... ahora sí, ni idea de lo que pretendes hacer.... ¿Por qué no lo explicas?

En principio no puedes poner ese tipo de funciones en tus options (creo), porque no son éstos el objeto, será en todo caso la etiqueta <select>.

onSubmit hace referencia a "cuando se envia el formulario"... y lo que masomenos pretenderías ahí es asignarle un valor a un objeto al momento de enviarlo, lo cuál, creo, es algo inútil... a menos que se abra otra página donde se procese tu formulario y de cierta forma te quedes en el mismo formulario pero con diferentes valores... pero le intentas asignarle un valor a... ¿formulario??? ... espero no te refieras a todo el formulario ... simplemente... no.

onBlur, según yo (definitivamente creeme a medias, en JavaScript estoy completamente OUT), hace referencia a cuando se.... quita el apuntador de dicho objeto... vaya "al dejar el objeto"...

Pero bueno... incisto: ¿qué pretendes hacer?... igual hablas de recoger tus valores con PHP... eso ya es cosa del PHP y en aquel foro verás muchos caos si buscas...

Otra cosa: si tu intención con 'value="none"' es de no darle valor... error, le estás dando precisamente el valor 'none' ... solo un detalle...

[rbczgz]

Hola de nuevo!!

Ya pensaba que te habías olvidado de mi jam1138

A ver si soy capaz de explicarme.

Lo que pretendo es darle el valor que recogerá el PHP (que también verifica que no haya campos en blanco) a las opciones del select, el select, como me explicaste, lo he puesto de forma que al elegir una u otra opción, aparezcan o desaparezcan algunos campos, por eso es el value="none" de la primera opción (no se si está bien así pero para esconder o mostrar los campos, funciona, igual lo tendría que cambiar...) y "formulario" es el nombre del select, el formulario lo hago así

Código HTML:

<form name="notificacion" id="notificacion" action="script.php" method="POST"> 

Entonces, para recoger los valores en el PHP no tengo problema (creo ) pero para que haya un valor que recoger, primero se lo tengo que dar en el form y en el caso de las opciones del select (al pretender hacer lo que comentábamos al principio de este POST) no se cómo darles el valor que deben tener, al haber hecho los cambios para mostrar/ocultar una parte del form, sólo es ese el problema

A ver si ahora (creo que está más claro que antes ) me puedes echar un cable

[jam1138]

... Ok...
Para seguir trabajando sobre lo que ya tenemos... lo mejor es quitar la dependencia a tus values, si solo tu listbox va a tener 2 opciones que solo van a mostrar/ocultar tus elementos, podemos hacer una función que cheque el estado del elemento y lo cambie... si esta oculto que lo muestre y viceversa.... así la dependencia está en el estado del objeto y no del valor del select... entiendes el concepto??... algo sencillo quedaria así:

Primero crear una función dentro del <head>

Código:

<script language="javascript">
function cambiar() {
	if(document.getElementById('tabla').style.display=="none") {
		document.getElementById('tabla').style.display="";
	} else {
		document.getElementById('tabla').style.display="none";
	}
}
// donde 'tabla' es la id del elemento a coultar/mostrar
// ... sí quedó en una tabla ¿no?
</script>

Y tu select quedaria así:

Código:

<select name="select" size="1" onChange="cambiar()">
          <option value="Consulta" selected>CONSULTA</option>
          <option value="Solicitud">SOLICITUD</option>
        </select>

... ahora con PHP recojes el valor de tu select como comúnmente se hace... solo debes de fijarte que al iniciarse la opción de que tu formulario esté oculto o visible debe coincidir con el opción seleccionada por defecto...


PD: No me apresures ni te desesperes en recibir ayuda!!!... yo usualmente ando de noche por acá

[rbczgz]

Gracias jam1138

No pretendo apresurarte, pero no puedo evitar desesperarme cuando veo que no me sale , pero bueno, tendré paciencia

Aquí te pongo el código simplificado de la página del form (lo de simplificado es por evitar relleno innecesario, pero el form y el js están completos)

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="javascript">
function cambiar() {
	if(document.getElementById('solicitud').style.display=  ="none") {
		document.getElementById('solicitud').style.display="";
	} else {
		document.getElementById('solicitud').style.display="none";
	}
}
// donde 'tabla' es la id del elemento a ocultar/mostrar
</script>

</HEAD>
<body>
<form id="notificacion" name="notificacion" method="post" action="envio.php">
<div align="center">
<center>
<table height="100%" border="0" width="90%">
<tr>
<td align="justify" colspan="2">&nbsp;</td>
</tr>
<tr>
<td align="center" colspan="2">
<p class="4"><font size="3"><b>Formulario de consulta y solicitud</b></font></td>
</tr>
<tr>
<td align="right" colspan="2">&nbsp;</td>
</tr>
<tr>
<td align="right">Asunto: &nbsp;</td>
<td>
<select name="select" name="asunto" size="1" onChange="javascript:cambiar()">
<option value="Consulta">Consulta</option>
<option value="Solicitud" selected>Solicitud</option>
</select>
</td>
</tr>
<tr>
<td align="right">Nombre: &nbsp;</td>
<td><input type=text name=Nombre size="20"></td>
</tr>
<tr>
<td align="right">Apellidos: &nbsp;</td>
<td><input type=text name=Apellidos size="20"></td>
</tr>

<tr>
<td colspan="2">


<!-- Parte a ocultar/mostrar -->
<table id="solicitud" style="display:none">
<tr>
<td align="right">Dirección Postal: &nbsp;</td>
<td><input type=text name=Direccion size="45"></td>
</tr>
<tr>
<td align="right">Localidad: &nbsp;</td>
<td><input type=text name=Localidad size="25"></td>
</tr>
<tr>
<td align="right">Provincia o Estado: &nbsp;</td>
<td><input type=text name=Provincia size="45"></td>
</tr>
<tr>
<td align="right">Código Postal: &nbsp;</td>
<td><input type=text name=Codigo_postal size="10" maxlenght="10"></td>
</tr>
</table>
<!-- hasta aquí la parte a ocultar/mostrar -->


</td>
</tr>

<tr>
<td align="right">E-mail: &nbsp;</td>
<td><input type=text name=Email size="40"></td>
</tr>
<tr>
<td align="right">País: &nbsp;</td>
<td><input type=text name=Pais size="20"></td>
</tr>
<tr>
<!-- Esto también sería bueno que se ocultase al cambiar a solicitud, pero igual es complicarlo mucho... -->
<td align="right">Consulta:</td>
<td>
<textarea name="consulta" rows=3 cols="25"></textarea></td>
</tr>
<tr>
<td align="right" colspan="2">&nbsp;</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type=submit value=Enviar class="3">
<input type="reset" value="Borrar" class="3">
</td>
</tr>
</table>
</center>
</div>
</form>
</body>
</html> 

A ver si a la vista del código se te ocurre qué es lo que falla, porque sigue fallándome, claro

Espero que me puedas ayudar, porque estoy más que perdido

Sabiendo que estás por la noche, esperaré a la mañana de aquí, a ver lo que me cuentas

Muchas gracias.

[jam1138]

no estoy en mi casa por lo que no puedo probar tu código... comentas que sigue fallandote pero ¿en qué?... si es porque solo te oculta lo de tu tabla y no lo demás prueba pasarle varios valores a la función...
Espero algo más específico del por qué no te resulta...

[rbczgz]

Hola jam1138!!

Ande andarás, que no estás en casa...

Pues sí, resulta que no funciona porque da un error de "Se esperaba un objeto" y ahora lo acabo de volver a revisar y me da otro que dice "error de sintaxis", este último no me lo daba la última vez que lo he revisado después de probar tu solución, así que supongo que será algo no muy complicado o que habré movido algo de sitio sin darme cuenta, lo que me preocupa es el otro porque no muestra ni oculta la tabla

No se si esto te servirá

Gracias y que lo pases bien donde estés

[jam1138]

Ande andarás, que no estás en casa.

Ojalá fuera algo bueno... andaba en la Universidad... pero bueno...

... extraño, copié tu código y después de eliminar los espacios que te adjunta al postear acá, me funcionó sin problemas... quizá lo del error de sintaxis te salga por tener el atributo "name" repetido en tu select...

<select name="select" name="asunto"

... bueno... nos quedamos en una función que solo cambiaba el estado... si estaba oculto lo mostraba y vicerversa... sin mayor validación... pues he visto que no es tan conveniente eso ya que con Firefox si, por ejemplo, estaba en "estado visible" y dabas actualizar no te modificaba ese estado (es normal) pero sí te retomaba tu valor por defecto del select provocando que ahora las opciones funcionaran al contrario de como querias... que no cunda el pánico... solución fácil, volver a tomar en cuenta el "value"...

También me he tomado la molestia (ni tanta, solo copy&paste) de ocultar la otra parte de tu formulario que mencionas... aunque quizá podría darsele una misma id y ocupar el document.all.. este, según sé, solo es válido para el IEv6... así que mejor copiamos y pegamos y nos referimos a otra id... que se la podemos bien dar a la etiqueta <tr> gracias a la estructura de tu formulario...

Y bien, despúes de mucho bla, bla, bla... finalmente queda así:

Código HTML:

<script language="javascript">
function cambiar(val) {
if(val=='Solicitud') { 
document.getElementById('solicitud').style.display ="none";
document.getElementById('solicitud2').style.display ="none"; 

} else { 
document.getElementById('solicitud').style.display=""; 
document.getElementById('solicitud2').style.display =""; 
} 
}
</script>
<!-- Ahora debes llamar a la función de la forma onChange="javascript:cambiar(this.value)" --> 

<!-- y agregar la id en la <tr> del textarea de la solicitud --> 
<tr id="solicitud2" style="display:none">
<td align="right">Consulta:</td> 
<td> <textarea name="consulta" rows=3 cols="25"></textarea></td> 
</tr> 

Probado con FireFox e IExplorer... puedes verlo en ---enlace caducado---

....

[rbczgz]

Hola de nuevo jam1138!!

Ojalá fuera algo bueno... andaba en la Universidad... pero bueno...

Eso es muy bueno, aunque no sea de diversión, así sabes tú lo que sabes...

Funciona perfecto pero con un pequeño inconveniente, que no soy capaz de solucionar del todo

Te cuento, es preferible que aparezca por defecto la opción "Consulta", entonces, esto con marcarlo "selected" arreglado, bueno, hasta ahí todo bien, pero al cambiar la función no consigo que me muestre la otra parte ("solicitud2") cuando carga por defecto, pero sí al cambiar el select, aquí te pongo lo que ha cambiado (he cambiado también la función por si se hace necesario añadir más elementos a ocultar o mostrar, aunque no creo que sepa cómo )

Bueno, ahí va el código...

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="javascript">
function cambiar(val) {
if(val=='Consulta') { 
document.getElementById('solicitud').style.display ="none";
document.getElementById('solicitud2').style.display =""; 

} if (val=='Solicitud')  { 
document.getElementById('solicitud').style.display=""; 
document.getElementById('solicitud2').style.display ="none"; 
} 
}
</script>
</HEAD>
<body>
<form id="notificacion" name="notificacion" method="post" action="envio.php"> 
<div align="center"> 
<center> 
<table height="100%" border="0" width="90%"> 
<tr> 
<td align="justify" colspan="2">&nbsp;</td> 
</tr> 
<tr> 
<td align="center" colspan="2">
<p class="4"><font size="3"><b>Formulario de consulta y solicitud</b></font></td> 
</tr> 
<tr> 
<td align="right" colspan="2">&nbsp;</td> 
</tr> 
<tr> 
<td align="right">Asunto: &nbsp;</td> 
<td>
<select name="asunto" size="1" onChange="javascript:cambiar(this.value)"> 
<option value="Consulta" selected>Consulta</option> 
<option value="Solicitud">Solicitud</option> 
</select> </td> 
</tr> 
<tr>
<td align="right">Nombre: &nbsp;</td> 
<td><input type=text name=Nombre size="20"></td>
</tr> 
<tr> 
<td align="right">Apellidos: &nbsp;</td> 
<td><input type=text name=Apellidos size="20"></td> 
</tr> 
<tr> 
<td colspan="2">
<!-- Parte a ocultar/mostrar --> 
<table id="solicitud" style="display:none"> 
<tr> 
<td align="right">Dirección Postal: &nbsp;</td> 
<td><input type=text name=Direccion size="45"></td> 
</tr> 
<tr> 
<td align="right">Localidad: &nbsp;</td> 
<td><input type=text name=Localidad size="25"></td> 
</tr> 
<tr> 
<td align="right">Provincia o Estado: &nbsp;</td> 
<td><input type=text name=Provincia size="45"></td>
</tr>
<tr> 
<td align="right">Código Postal: &nbsp;</td> 
<td><input type=text name=Codigo_postal size="10" maxlenght="10"></td> 
</tr> 
</table>
<!-- hasta aquí la parte a ocultar/mostrar --> 
</td> 
</tr>
<tr> 
<td align="right">E-mail: &nbsp;</td>
<td><input type=text name=Email size="40"></td>
</tr>
<tr> 
<td align="right">País: &nbsp;</td>
<td><input type=text name=Pais size="20"></td> 
</tr>
<!-- Esto también sería bueno que se ocultase al cambiar a solicitud, pero igual es complicarlo mucho... --> 
<tr id="solicitud2" style="display:none">
<td align="right">Consulta:</td> 
<td> <textarea name="consulta" rows=3 cols="25"></textarea></td> 
</tr> 
<tr> 
<td align="right" colspan="2">&nbsp;</td> 
</tr> 
<tr> 
<td align="center" colspan="2"> 
<input type=submit value=Enviar class="3">
<input type="reset" value="Borrar" class="3"> </td> 
</tr> 
</table>
</center>
</div> 
</form> 
</body>
</html> 

Sólo nos queda este pequeño detalle y a funcionar...

Muchas gracias por tu ayuda, si no fuera por eso no podría hacerlo

[jam1138]

Iniciado por rbczgz

(...) no consigo que me muestre la otra parte ("solicitud2") cuando carga por defecto (...)

... para eso le debes de dar un valor directamente a el objeto
<tr id="solicitud2" style="display:none"> <!-- oculto por defecto
<tr id="solicitud2" style="display:"> <!-- Visible por defecto

Veamos lo que hace la función para que lo entiendas...

Código HTML:

function cambiar(val) { // resibes un valor al que identificamos como "val"
if(val=='Consulta') {  // si el valor es 'Consulta'
document.getElementById('solicitud').style.display ="none"; // oculta el objeto 'solicitud'
document.getElementById('solicitud2').style.display =""; // y muestra 'solicitud2'

} if (val=='Solicitud')  { // si valor es 'Solicitud'
document.getElementById('solicitud').style.display=""; // muestra 'solicitud'
document.getElementById('solicitud2').style.display ="none"; // oculta 'solicitud2'
} 
}

aunque... esta bien tu función... estructuralmente sería mejor (creo) manejar 'if' y 'else' ... y 'elseif' de ser necesario...

Yo no estudio esto... nada que ver... menos JavaScript... solo me paseo por este foro... es un hobbie ...

Espero ésto te ayude y resuelvas tu situación... cualquier otra cosa ya sabes ayudaremos en lo que se pueda

[rbczgz]

Hola de nuevo jam1138!!

He estado probando un montón de veces y no consigo que funcione, me explico...

Lo de ocultar/mostrar lo hace perfectamente, pero a la hora de que el script PHP recoja el valor del select, recoje siempre el que está seleccionado por defecto, es decir, si yo cambio de consulta a solicitud, el form cambia, pero el valor que envía no, y el problema es que de ese valor depende el que el script haga una cosa u otra, entonces no consigo que funcione

¿Tú crees que tiene solución?

Muchas gracias de antemano.

[jam1138]

... ... asegurate de que tenga los "value" correctos... y que recojas el valor por el "name" correcto del select... No hay mayor ciencia que recojer el valor de cualquier otro campo...

ando de nuevo en la U. por lo que solo he creado algo para comparar que recoja dicho valor:

Código PHP:

  <?php 
echo $_POST['asunto']; 
?>   

... ---Enlace Caducado--- ve como no hay problema... En todo caso si no lo logras conseguir pasanos tu código en el foro de PHP (porque es de PHP el asunto ¿no?) para poder ayudarte mejor... Suerte!

PD: Si posteas en aquel foro mándame un MP para seguir el tema. Gracias.