Tema: Formulario HTML + Javascript
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 05/01/2015, 14:32
NeaFan
 
Fecha de Ingreso: diciembre-2014
Ubicación: montería
Mensajes: 33
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Formulario HTML + Javascript
Pues te diré que tu estructura esta un tanto sobrecargada:

Código HTML: 
Ver original
  1. <form>
  2.     <label>
  3.         <input/>
  4.     </label>
  5.     <label>
  6.         <input>
  7.     </label>
  8.     <label>
  9.         <form>
  10.             <select>
  11.                 <option>...</option>
  12.             </select>
  13.         </form>
  14.         <div>
  15.             <form>
  16.                 <label>
  17.                     <input/>
  18.                 </label>
  19.             </form>
  20.         </div>
  21.         <label>
  22.             <textarea></textarea>
  23.         </label>
  24.         <div>
  25.             <input></input>
  26.         </div>
  27.     </label>
  28. </form>

No creo que sea necesario tener un form dentro de otro y además que solo se une para contener un select.

Me atreveré a esquematizar algo parecido según lo que creo una vez ejecuto tu formulario, pero te sugiero que busques alternativas de diseño «siempre trata de ser lo mas simple posible| no combines en lo posible css y html | no uses Javascript si no es necesario | jQuery es bueno pero deberías aprender un poco de javascript»

Con esto logro exactamente tu formulario:

Código HTML: 
Ver original
  1. <form action="" method="POST">
  2.     Nombre
  3.     <input type="text" id="c_name" name="name" required="required"/>
  4.     Email
  5.     <input type="email" id="c_email" name="email" required="required"/>
  6.     <select id="c_asunto" name="asunto" class="c_input" onChange="mostrar(this.value);">
  7.         <option selected="selected" value="Motivo" disabled="disabled">Motivo</option>
  8.         <optgroup label="Formatear">
  9.             <option value="Formatear PC de Sobremesa">PC de Sobremesa</option>
  10.             <option value="Formatear PC Portátil">PC Portátil</option>
  11.         </optgroup>
  12.         <option value="Motivos Varios">Otros motivos</option>
  13.     </select>
  14.     <input type="text" id="c_otroasunto" name="otroasunto" placeholder="otro motivo"/>
  15.     Mensaje
  16.     <textarea id="c_msg" name="mensaje" placeholder="mensaje..."></textarea>
  17.     <input type="button" id="c_enviar" value="Enviar" />
  18. </form>

Claro esta que la disposición la haces tu mediante css. deje algunas de las funciones que realmente parecen útiles. Los campos se validan con el atributo required excepto otroasunto que solo es requerido una vez es visible, osea cuando la opción Otros motivos es seleccionada.

Código Javascript: 
Ver original
  1. function mostrar(id) {
  2.                 var campo = document.getElementById("c_otroasunto");
  3.                 if (id == "Otros motivos") {
  4.                     campo.setAttribute("required", "required");
  5.                     campo.removeAttribute("hidden");
  6.                 } else {
  7.                     campo.setAttribute("hidden", "hidden");
  8.                     campo.removeAttribute("required");
  9.                 }
  10.             }

Espero que esto solucione tu problema te pongo un ejemplo para copypaste maquetado un poco con css (solo para que sea mas visual).

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Frame Contenedor</title>
  6.         <!--OJO EL ESTILO LO DEFINES TU-->
  7.         <style type="text/css">
  8.             form {
  9.                 width: 30%;
  10.             }
  11.             input, textarea, select {
  12.                 width: 100%
  13.             }
  14.         </style>
  15.         <!--FINALIZA EL ESTILO-->
  16.         <script type="text/javascript">
  17.             function mostrar(id) {
  18.                 var campo = document.getElementById("c_otroasunto");
  19.                 if (id == "Otros motivos") {
  20.                     campo.setAttribute("required", "required");
  21.                     campo.removeAttribute("hidden");
  22.                 } else {
  23.                     campo.setAttribute("hidden", "hidden");
  24.                     campo.removeAttribute("required");
  25.                 }
  26.             }
  27.         </script>
  28.     </head>
  29.     <body>
  30.         <form action="" method="POST">
  31.             Nombre
  32.             <input type="text" id="c_name" name="name" required="required"/>
  33.             Email
  34.             <input type="email" id="c_email" name="email" required="required"/>
  35.             <select id="c_asunto" class="c_input" name="asunto" onchange="mostrar(this.value);">
  36.                 <option selected="selected" value="Motivo" disabled="disabled">Motivo</option>
  37.                 <optgroup label="Formatear">
  38.                     <option value="Formatear PC de Sobremesa">PC de Sobremesa</option>
  39.                     <option value="Formatear PC Portátil">PC Portátil</option>
  40.                 </optgroup>
  41.                 <option value="Otros motivos">Otros motivos</option>
  42.             </select>
  43.             <input type="text" id="c_otroasunto" name="otroasunto" placeholder="otro motivo" hidden="hidden"/>
  44.             Mensaje
  45.             <textarea id="c_msg" name="mensaje" placeholder="mensaje..." required="required"></textarea>
  46.             <input type="submit" id="c_enviar" value="Enviar"/>
  47.         </form>
  48.     </body>
  49. </html>