JAVASCRIPT. Ayuda con un formulario (anidar/heredar variables)

Archivado
Hola!
la verdad que no tenía mucha idea de dónde plantear esta pregunta...igual en el hilo de tecnología tiene más sentido...pero lo intento aquí primero a ver si hay alguien con la antena puesta :)
Tengo que modificar un formulario hecho en javascript para que quede tal y como indico en la imagen...y la verdad que no tengo mucha idea de este lenguaje, por lo que no sé por dónde tengo que meter mano para anidar cosas o redireccionar de un formulario a otro para heredar variables:
Imagen
La teoría me dice que todos los campos "variables" deberían estar contenidos en la función javascript", y que esta debería mostrar unos u otros en función de lo que se haya seleccionado para la variable "servicio" (Traducción o Intepretación). Pero de la th. a la práctica me pierdo, porque mis conocimientos de javascript son pocos o nulos en cuanto a programación (modificar variables o adaptarlas es otra cosa, pero anidar y heredar variables es otra ;)
otto_von_bismark escribió:No me lo he leído. Pero utiliza campos hidden.

Al estar el formulario programado: 25% en javascript y 75% en html...la cosa no acaba de funcionar cuando aplico <style="hidden"> en javascript a los campos que quiero ocultar; estos siguen apareciendo en la parte codificada en html). Me vendría bien algo de ayuda, porque ya os digo que no sé exactamente qué campos tengo que modificar...

Fundamentalmente, se trata de un ejercicio de localización de páginas web (para que el formulario se pueda enviar en varias lenguas), lo que pasa que el formulario del ejercicio original no es ninguna maravilla...y con estas modificaciones quedaría deluxe. Las modificaciones que se hayan hecho en este formulario deberán extenderse a los de las otras lenguas en las que está disponible la web, por lo que cuanto menos cambios se hagan, mejor :).

Si alguien me pudiese echar un cable sería de una grandísima ayuda :)!!!

Adjuntos

presupuesto_esp.rar (1.63 KB)

archivo original
<style="display:hidden"> solo oculta algo a la vista, pero el codigo sigue estando, lo que no tiene porque ser un problema la verdad...
Si necesitas que el codigo desaparezca del formulario por el motivo que sea, la mejor opción a mi parecer es tener otro formulario o elemento oculto en el que muevas los que no uses, de esta forma no tienes que andar creando y eliminando elementos con su contenido(incluido texto en el idioma que toque), simplemente mueves los elementos de un sitio a otro segun te convenga.
Supongo que será tan fácil como hacer algo asi:
var formulario = document.getElementById("miFormulario");
var div_oculto = document.getElementById("miDivOculto");
var elementofeo = document.getElemenyById("elementoQueNoQuiero");
var elementowapo = document.getElemenyById("elementoQueQuiero");
div_oculto.appendChild(elementofeo ); // mueves un elemento al div oculto
formulario .appendChild(elementowapo ); // mueves un elemento al formulario

Eso si, ya para ordenar las cosas bien tendrás que hacer alguna cosilla más dependiendo de como lo quieras, ya que de esta forma simplemente se mueven los elementos al final del formulario.
WaterDark escribió:<style="display:hidden"> solo oculta algo a la vista, pero el codigo sigue estando, lo que no tiene porque ser un problema la verdad...
Si necesitas que el codigo desaparezca del formulario por el motivo que sea, la mejor opción a mi parecer es tener otro formulario o elemento oculto en el que muevas los que no uses, de esta forma no tienes que andar creando y eliminando elementos con su contenido(incluido texto en el idioma que toque), simplemente mueves los elementos de un sitio a otro segun te convenga.
Supongo que será tan fácil como hacer algo asi:
var formulario = document.getElementById("miFormulario");
var div_oculto = document.getElementById("miDivOculto");
var elementofeo = document.getElemenyById("elementoQueNoQuiero");
var elementowapo = document.getElemenyById("elementoQueQuiero");
div_oculto.appendChild(elementofeo );
formulario .appendChild(elementowapo );


Hola WaterDark, entiendo lo que dices, pero no exactamente dónde en el documento tengo que hacer ese juego de variables...¿En la parte javascript o en la parte html? ¿en una función específica? :O
Ulalaa escribió:Hola WaterDark, entiendo lo que dices, pero no exactamente dónde en el documento tengo que hacer ese juego de variables...¿En la parte javascript o en la parte html? ¿en una función específica? :O

Todo lo que te he puesto es javascript.
Con javascript mueves de sitio elementos del html, de forma que puedes sacar elementos del formulario y meterlos en un DIV oculto, y sacar elementos del DIV oculto para colocarlos de nuevo en el formularios segun te convenga.

También puedes tener preparado todo el bloque de elementos que necesites(dentro de un DIV por ejemplo) para cada opción y moverlo todo de un tiron de un lado a otro, esto facilita organizar las cosas.
WaterDark escribió:
Ulalaa escribió:Hola WaterDark, entiendo lo que dices, pero no exactamente dónde en el documento tengo que hacer ese juego de variables...¿En la parte javascript o en la parte html? ¿en una función específica? :O

Todo lo que te he puesto es javascript.
Con javascript mueves de sitio elementos del html, de forma que puedes sacar elementos del formulario y meterlos en un DIV oculto, y sacar elementos del DIV oculto para colocarlos de nuevo en el formularios segun te convenga.

También puedes tener preparado todo el bloque de elementos que necesites(dentro de un DIV por ejemplo) para cada opción y moverlo todo de un tiron de un lado a otro, esto facilita organizar las cosas.


Entonces si he entendido bien tengo que sacar los elementos con los que quiera jugar y que ya están en la parte
<body>... </body> y hacer un bloque <DIV> dentro de una función javascript, para ocultarlos o mostrarlos según convenga...
La verdad que me estoy haciendo un lío de cuidado, porque tampoco sé cómo tengo que invocar la función específica.
En el archivo que pongo hay tres funciones, y la única que sé cómo funciona a ciencia cierta es esta:
function comprobar() {
switch (document.formulario.servicio.value) {
case "Interpretacion":
window.formulario.numpalab.value= "----";
window.formulario.numpag.value = "----";
break;
case "Traduccion de textos":
window.formulario.numpalab.value = "";
window.formulario.numpag.value = "";
break;
}


lol
Una cosa, algún motivo por el que no puedas solo ocultar lo que no uses?

El DIV estaría en el HTML.

PD: te subo una modificación en el que se oculta y muestra la parte que corresponde a la opción de traducción.

Adjuntos

presupuesto_esp.zip (1.73 KB)

WaterDark escribió:Una cosa, algún motivo por el que no puedas solo ocultar lo que no uses?

El DIV estaría en el HTML.


no veo por qué no pueda ocultarse...de hecho es lo que quiero, que cuando seleccione un servicio, concreto (Traducción) aparezcan unas opciones ( Nº de palabras y Nº de páginas) y que cuando seleccione el otro (Interpretación) aparezcan otras en su lugar ( Simultánea, Consecutiva) y además dos campos adicionales).

Según este tochito que acabo de poner de explicación, me podrías poner los parámetros DIV correpondientes y la parte que tendría que poner en la función Javascript ¿?

(puedes copiar y pegar encima de mi parrafada, luego ya busco en el código lo que corresponda).

Un saludo y gracias :)

EDITO: acabo de ver el archivo que me mandas, es justo eso lo que quería hacer con el campo del selector de servicio. Genial :). Voy a investigar ahora lo de añadir otros campos cuando se selecciona el servicio.
Bendito acabas de meter las instrucciones "document.getElementById("opc_traduccion").style.display = "none";"
creo que voy entendiendo de qué va el rollo !!
Mira lo que he subido.
Habia entendido cuando dijistes lo del "style=hidden", que no querias que el codigo HTML siguiera existiendo, ya que hidden lo que hace es ocultarlo a la vista, pero seguir, sigue ahí.

Si entonces te sirve así, lo que te he subido, solo he añadido dos lineas y un identificador(id) al elemento "p" que tiene las opciones de traduccion. Las dos lineas que he añadidos son
document.getElementById("opc_traduccion").style.display = "none";
document.getElementById("opc_traduccion").style.display = "inline-block";
dentro del javascript, para ocultar o mostrar segun que opcion elijas.
Ahora falta que añadas el codigo HTML para las otras opciones y lo ocultes o muestras según convenga.
WaterDark escribió:Mira lo que he subido.
Habia entendido cuando dijistes lo del "style=hidden", que no querias que el codigo HTML siguiera existiendo, ya que hidden lo que hace es ocultarlo a la vista, pero seguir, sigue ahí.

Si entonces te sirve así, lo que te he subido, solo he añadido dos lineas y un identificador(id) al elemento "p" que tiene las opciones de traduccion. Las dos lineas que he añadidos son
document.getElementById("opc_traduccion").style.display = "none";
document.getElementById("opc_traduccion").style.display = "inline-block";
dentro del javascript, para ocultar o mostrar segun que opcion elijas.
Ahora falta que añadas el codigo HTML para las otras opciones y lo ocultes o muestras según convenga.


Exacto. No entendía que pudiese estar todo en el Html y que solo se mostrase una parte u otra como resultado de la función dentro del script.
entonces ahora lo que queda es meter el resto de opciones que quiero en la parte del html y aplicar las líneas modelo que has puesto según quiera que se visualicen o no. Lo pruebo ahora mismo! bien!! [360º] !!
Gracies!!


EDITO: para hacer un selector con el punto, tal y como aparece para "nº de palabras" y "nº de páginas", estaba copiando la función que ya existe y cambiando el nombre de las variables por "consecutiva" y "simultánea". Sin embargo, dentro de esta parte del código se llama a otra función >>"MM_setTextOfTextfield('numpag','','----');MM_setTextOfTextfield('numpalab','','')<<
<tr>
    <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif"> </font></td>
    <td><p id="opc_traduccion"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
      <input name="radiobutton" type="radio" onClick="MM_setTextOfTextfield('numpag','','----');MM_setTextOfTextfield('numpalab','','')" value="palabras">
      Consecutiva <input name="consec" type="text" id="consec" size="5"> <input name="radiobutton" type="radio" onClick="MM_setTextOfTextfield('numpalab','','----');MM_setTextOfTextfield('numpag','','')" value="páginas"> Simultánea</font> <input name="numpag" type="text" id="numpag" size="5">
    </p>
    </td>
  </tr>


¿qué narices tengo que poner ahí? puedo borrar esa parte de la línea sin cargarme nada y dejarlo como sigue ¿?
<tr>
    <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif"> </font></td>
    <td><p id="opc_traduccion"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
      <input name="radiobutton" type="radio">Consecutiva</font> <input name="consec" type="text" id="consec" size="5">
     <input name="radiobutton" type="radio">Simultánea</font> <input name="numpag" type="text" id="numpag" size="5">
    </p>
    </td>
  </tr>
Edit: si, borra los eventos onclick para el nuevo codigo.
A ver, creo que falta una última cosa...y es lo que no veo ahora mismo.
Estos son los campos que he añadido en el formulario:

  <tr>
    <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif"> </font></td>
    <td><p id="opc_interpretacion"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
      <input name="radiobutton" type="radio">Consecutiva</font>
     <input name="radiobutton" type="radio">Simultánea</font>
    </p>
    </td>
  </tr>
 
 
  <tr>
    <td><p id="opc_interpretacion"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Nº de jornadas:</font></td>
    <td><input name="jornadas" id="jornadas"  placeholder="Medio día(1/2), jornada completa(1,2,3)" type="numer" size="30"></td>
  </tr>
 
  <tr>
    <td><p id="opc_interpretacion"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Lugar de la conferencia:</font></td>
    <td><input name="poblacion_conferencia" type="text" id="poblacion_conferencia"  placeholder="Ciudad en que se celebra la reunión" size="50"></td>
  </tr>
 


Y tienen que mostrase SOLO cuando se selecciona la opción "interpretracion". Por lo tanto el javascript debería quedar como sigue:
function comprobar() {
   switch (document.formulario.servicio.value) {
      case "Interpretacion":
      document.getElementById("opc_interpretacion").style.display = "inline-block";
         document.getElementById("opc_traduccion").style.display = "none";
         window.formulario.numpalab.value = "----";
         window.formulario.numpag.value = "----";
         

         break;
      case "Traduccion de textos":
         document.getElementById("opc_traduccion").style.display = "inline-block";
         window.formulario.numpalab.value = "";
         window.formulario.numpag.value = "";
         document.getElementById("opc_interpretacion").style.display = "none";
         break;
   }
   return true;
}


Sin embargo, campos "jornadas" y "poblacion_conferencia" se muestran siempre y tienen aplicado el id="opc_interpretacion".¿se me ha escapado algo?
No puedes repetir nombre de identificadores, asi que vas a tener que llamar a uno "opc_interpretacion1" y al otro "opc_interpretacion2" por ejemplo.

Por otro lado, para que esten ocultos al carga la página, ya que la opción marcada cuando cargas es "traducción", añade dentro del "p" esto "style="display:none""
<p id="opc_interpretacion1" style="display:none">.............
Perfect, pues al final tengo 5 indicadores (uno que es selector de punto) y los otros son campos del formulario (título y celda)
Solo una cosa más, y es que cuando cambio de servicio, el campo que funciona con selector de punto que desaparece sigue ocupando espacio...no había una forma de hacer que no fuese así¿?
Con .style.visibility="hidden" no era :S

switch (document.formulario.servicio.value) {
      case "Interpretacion":
      document.getElementById("opc_interpretacion1").style.display = "inline-block";
      document.getElementById("opc_interpretacion2").style.display = "inline-block";
      document.getElementById("opc_interpretacion3").style.display = "inline-block";
      document.getElementById("opc_interpretacion4").style.display = "inline-block";
      document.getElementById("opc_interpretacion5").style.display = "inline-block";
      document.getElementById("opc_traduccion").style.display = "none";
         window.formulario.numpalab.value = "----";
         window.formulario.numpag.value = "----";
         

         break;
      case "Traduccion de textos":
         document.getElementById("opc_traduccion").style.display = "inline-block";
         window.formulario.numpalab.value = "";
         window.formulario.numpag.value = "";
         document.getElementById("opc_interpretacion1").style.display = "none";
         document.getElementById("opc_interpretacion2").style.display = "none";
         document.getElementById("opc_interpretacion3").style.display = "none";
         document.getElementById("opc_interpretacion4").style.display = "none";
         document.getElementById("opc_interpretacion5").style.display = "none";
         break;
   }
Cambia los identificadores de sitio, del "p" al "tr", asi ocultas todo lo que hay dentro de un tirón.

<tr id="opc_interpretacion1"> ////// AQUI
    <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif"> </font></td>
    <td><p ><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
      <input name="radiobutton" type="radio">Consecutiva</font>
     <input name="radiobutton" type="radio">Simultánea</font>
    </p>
    </td>
  </tr>
 


EDIT: por cierto, viendo que estas más perdido de lo que pensaba de primeras... sabes que estos cambios no valen de nada si luego el servidor que recoge la solicitud no esta preparado para esperar los nuevos campos???

EDIT2: te falta en los nuevos radiobuttons un "value";
  <tr>
    <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif"> </font></td>
    <td><p id="opc_interpretacion"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
      <input name="radiobutton" type="radio" value="consecutiva">Consecutiva</font>
     <input name="radiobutton" type="radio" value="simultánea">Simultánea</font>
    </p>
    </td>
  </tr>
Si, lo oculto pero se mueve el margen a tope también
Imagen

:S
Sube el archivo que lo vea, y lee mis ultimos edit.
WaterDark escribió:Sube el archivo que lo vea, y lee mis ultimos edit.


Tienes razón que no había ningún valor para esas variables, se me fue la mano borrando y como luego se veía sin problemas, pues ni me fijé en eso.
El archivo va adjunto, lo único que no veo cómo marcha es lo de que se ajusten los campos al margen izquierdo al decirle que no se muestren los de la opción alternativa...
Este ejemplo me va a valer para ver muuuuchas, cosas. No sabes cuánto te agradezco tu ayuda :)

Adjuntos

presupuesto_espa.rar (1.94 KB)

El problema era que el valor "display" para el elemento "tr" tenia que ser "table-row" en vez de "inline-block".
"display" no solo puede ocultar elementos, tambien define como se muestran.

Adjuntos

presupuesto_espa.zip (1.95 KB)

Ahora mismo solo puedo ver los efectos todo lo que me dices, pero ya me estoy poniendo las pilas con el javascript... que está hasta en la sopa y nunca está de más manejarse como lo has hecho tu ahora. CSS y HTML a secas no son suficiente.

Estaba muy muy pez, y me has ayudado mucho. ¡Muchísimas Graciassss!
18 respuestas
Archivado
Volver a General