Formulario HTML + Javascript

#1 (**permalink**) 02/01/2015, 14:50

Buenas, tengo conocimiento de HTML y CSS, pero de Javascript acabo de empezar.

Lo que quiero conseguir es:
Tengo un formulario HTML en el que tengo una lista desplegable.
Al elegir una opción (y también haber rellenado los demás espacios del formulario), se manda correcto el formulario.
Pero una de las opciones de la lista desplegable es "Otros motivos".
Conseguí que al elegir "Otros motivos" aparezca un segundo "formulario" para que el usuario elija un motivo diferente a los de la lista.

Mi problema es:
Consigo que el formulario no se mande si no se elije un elemento de la lista desplegable.
Consigo que al elegir "Otros motivos" salga un segundo formulario.
NO consigo que cuando se elije ese segundo formulario, aunque no se escriba nada, el formulario se envía igualmente.

Quisiera que cuando se eligiese "Otros motivos", el nuevo formulario que aparece también fuese obligatorio de rellenar para poder enviar el formulario.

~ Gracias.

Código javascript completo:

Código:

function cargaSendMail(){
 
 
    $("#c_enviar").attr("disabled", true);
 
    $(".c_error").remove();
 
    var filter=/^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+.[A-Za-z0-9_.]+[A-za-z]$/;
    var s_email = $('#c_mail').val();
    var s_asunto = $('#c_asunto').val();
    var s_otroasunto = $('#c_otroasunto').val();
    var s_name = $('#c_name').val();    
    var s_msg = $('#c_msg').val();
 

    if (filter.test(s_email)){
    sendMail = "true";
    } else{
    $('#c_mail').after("<span class='c_error' id='c_error_mail'>Ingrese un e-mail valido.</span>");
     //aplicamos color de borde si el se encontro algun error en el envio
    $('#contactform').css("border-color","#6f1d14");   
    sendMail = "false";
    }
    if (s_name.length == 0 ){
    $('#c_name').after( "<span class='c_error' id='c_error_name'>Ingrese su nombre.</span>" );
    var sendMail = "false";
    }
    if (s_msg.length == 0 ){
    $('#c_msg').after( "<span class='c_error' id='c_error_msg'>Ingrese un mensaje.</span>" );
    var sendMail = "false";
    }
    if (s_asunto == null ){
    $('#c_asunto').after( "<span class='c_error' id='c_error_msg'>Ingrese un motivo.</span>" );
    var sendMail = "false";
    }
    else {
    if (s_otroasunto.length == null ) {
    $('#c_otroasunto').after( "<span class='c_error' id='c_error_msg'>Ingrese un motivo.</span>" );
    var sendMail = "false";}
    if (s_otroasunto.length == null ) {
    $('#c_otroasunto').after( "<span class='c_error' id='c_error_msg'>Ingrese un motivo.</span>" );
    var sendMail = "false";}
    }

    
    if(sendMail == "true"){
     
     var datos = {
 
             "nombre" : $('#c_name').val(),
 
             "email" : $('#c_mail').val(),
 
             "asunto" : $('#c_asunto').val(),
 
             "otroasunto" : $('#c_otroasunto').val(),
 
             "mensaje" : $('#c_msg').val()
 
     };
 
     $.ajax({
 
             data:  datos,
             // hacemos referencia al archivo contacto.php
             url:   'contacto.php',
 
             type:  'post',
 
             beforeSend: function () {
             //aplicamos color de borde si el envio es exitoso
                    $('#contactform').css("border-color","#25A25A");
 
                     $("#c_enviar").val("Enviando...");
 
             },
 
             success:  function (response) {
 
                    $('form')[0].reset(); 
                    $("#c_enviar").val("Enviar");
                    $("#c_information p").html(response);
                    $("#c_information").fadeIn('slow');
                    $("#c_enviar").removeAttr("disabled");
                     
 
 
             }
 
     });
 
} else{
    $("#c_enviar").removeAttr("disabled");
}
 
}

function mostrar(id) {
    if (id == "Otros motivos") {
        $("#Otrosmotivos").show();
    }
    if (id != "Otros motivos") {
        $("#Otrosmotivos").hide();
    }
}

El mismo código javascript, pero sólo la parte que ha de ser modificada:

Código:

    if (filter.test(s_email)){
    sendMail = "true";
    } else{
    $('#c_mail').after("<span class='c_error' id='c_error_mail'>Ingrese un e-mail valido.</span>");
     //aplicamos color de borde si el se encontro algun error en el envio
    $('#contactform').css("border-color","#6f1d14");   
    sendMail = "false";
    }
    if (s_name.length == 0 ){
    $('#c_name').after( "<span class='c_error' id='c_error_name'>Ingrese su nombre.</span>" );
    var sendMail = "false";
    }
    if (s_msg.length == 0 ){
    $('#c_msg').after( "<span class='c_error' id='c_error_msg'>Ingrese un mensaje.</span>" );
    var sendMail = "false";
    }
    if (s_asunto == null ){
    $('#c_asunto').after( "<span class='c_error' id='c_error_msg'>Ingrese un motivo.</span>" );
    var sendMail = "false";
    }
    else {
    if (s_otroasunto.length == null ) {
    $('#c_otroasunto').after( "<span class='c_error' id='c_error_msg'>Ingrese un motivo.</span>" );
    var sendMail = "false";}
    if (s_otroasunto.length == null ) {
    $('#c_otroasunto').after( "<span class='c_error' id='c_error_msg'>Ingrese un motivo.</span>" );
    var sendMail = "false";}
    }

NeaFan · #2 (**permalink**) 04/01/2015, 00:27

Veo mucho código, para ser un simple formulario. Has pensado en usar los atributos de HTML, pues yo para este tipo de cosas suelo usar algo así:

Código HTML:

Ver original<input type="number" min="0" required="required">

en la etiqueta anterior controlo que el valor solo puede ser numérico positivo y que es requerido, osea que si aplicas un submit, te resalta una advertencia en el input y el formulario no se envia hasta que concretes este campo.

Existen otras validaciones como:

Código HTML:

Ver original<input type="email" required="required">
<input type="tel" required="required">
<input type="datetime">

Estos mismo atributos puedes usarlos en los campos del segundo formulario así hasta que todos los campos no estén validados, no se ejecuta el submit.

Si insistes en hacerlo con javascript puede hacer uso del atributo onsubmit mas o menos así:

Código HTML:

Ver original<form action="loquesea" onsubmit="return Validado()">
...
</form>

es claro que Validado() retornara {true,false} según pase no el filtro.

#3 (**permalink**) 04/01/2015, 06:26

Gracias por contestar.

El código javascript no es mío, es un recurso que encontré en internet, ya que yo no sé absolutamente nada de javascript.

En cambio, sí controlo mejor el HTML y conozco el atributo "required" sin embargo, el apartado del formulario "otros motivos" sólo quiero que sea obligatorio cuando éste haya sido seleccionado desde la lista desplegable.
Por ejemplo:
Lista desplegable:
1. A
2. B
3. C
3.1 D
Cuando selecciono A y B no es obligatorio escribir D, ya que ese formulario sólo aparecerá cuando selecciono "C"
Sin embargo, cuando selecciono "C", aparece un segundo formulario "D" que ahora sí ha de ser obligatorio de rellenar.

Gracias.

NeaFan · #4 (**permalink**) 04/01/2015, 13:36

La idea es que uses la menor cantidad de javascript posible, aquí te plasmo una idea inicialmente solo se ven los primeros 6 elementos (lista[a,b,c];nombre,asunto;email;mensaje) y aunque existe el elemento #otrodato y #otromas estos no son ni requeridos, ni visibles gracias a la propiedad hidden del #contenedor-oculto que no permite su visualización.

Cuando seleccionas la opción [--c--] el #contenedor-oculto elimina su atributo hidden y quedan al descubierto los dos input «que siempre han existido». Además se le agrega atributos de required al imput#otrodato lo que no permitirá enviar el formulario hasta que se complete este campo.

Todo lo anterior gracias a la función SegunOpcion que se dispara cada vez hay un cambio en el select.

Código HTML:

<script type="text/javascript">
    function SegunOpcion(opcion) {
        var miDiv = document.getElementById("contendor-oculto");
        var miInput = document.getElementById("otrodato");
        if (opcion == "c") {
            miDiv.removeAttribute("hidden");
            miInput.setAttribute("required","required");
        } else {
            miDiv.setAttribute("hidden","hidden");
            miInput.removeAttribute("required");
        }
    }
</script>

<form action="">
    <select name="milista" id="milista" onchange="SegunOpcion(this.value);">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    </select>
    <input type="text" id="nombre" placeholder="Digita tu nombre" required="required"/>
    <input type="text" id="asunto" placeholder="Digita tu asunto" required="required"/>
    <input type="text" id="asunto2" placeholder="Describe tu asunto" required="required"/>
    <input type="email" id="emamil" placeholder="Digita tu correo electronico" required="required"/>
    <textarea id="msj" cols="30" rows="10" placeholder="Digita tu mensaje" required="required"></textarea>
    <div id="contendor-oculto" hidden="hidden">
        <input type="text" id="otrodato" placeholder="Digita el otro dato"/>
        <input type="text" id="otromas" placeholder="Digita el otro dato"/>
    </div>
    <input type="submit" id="boton-envio" />
</form>

#5 (**permalink**) 04/01/2015, 15:51

Cita:

Iniciado por NeaFan

La idea es que uses la menor cantidad de javascript posible, aquí te plasmo una idea inicialmente solo se ven los primeros 6 elementos (lista[a,b,c];nombre,asunto;email;mensaje) y aunque existe el elemento #otrodato y #otromas estos no son ni requeridos, ni visibles gracias a la propiedad hidden del #contenedor-oculto que no permite su visualización.

Cuando seleccionas la opción [--c--] el #contenedor-oculto elimina su atributo hidden y quedan al descubierto los dos input «que siempre han existido». Además se le agrega atributos de required al imput#otrodato lo que no permitirá enviar el formulario hasta que se complete este campo.

Todo lo anterior gracias a la función SegunOpcion que se dispara cada vez hay un cambio en el select.

Código HTML:

<script type="text/javascript">
    function SegunOpcion(opcion) {
        var miDiv = document.getElementById("contendor-oculto");
        var miInput = document.getElementById("otrodato");
        if (opcion == "c") {
            miDiv.removeAttribute("hidden");
            miInput.setAttribute("required","required");
        } else {
            miDiv.setAttribute("hidden","hidden");
            miInput.removeAttribute("required");
        }
    }
</script>

<form action="">
    <select name="milista" id="milista" onchange="SegunOpcion(this.value);">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    </select>
    <input type="text" id="nombre" placeholder="Digita tu nombre" required="required"/>
    <input type="text" id="asunto" placeholder="Digita tu asunto" required="required"/>
    <input type="text" id="asunto2" placeholder="Describe tu asunto" required="required"/>
    <input type="email" id="emamil" placeholder="Digita tu correo electronico" required="required"/>
    <textarea id="msj" cols="30" rows="10" placeholder="Digita tu mensaje" required="required"></textarea>
    <div id="contendor-oculto" hidden="hidden">
        <input type="text" id="otrodato" placeholder="Digita el otro dato"/>
        <input type="text" id="otromas" placeholder="Digita el otro dato"/>
    </div>
    <input type="submit" id="boton-envio" />
</form>

Gracias por construir todo ese formulario y el javascript, pero hay un problema, que yo no entiendo nada de javascript, por lo que no sé adaptar ese formulario + javascript a mi formulario HTML + mi Javascript (que encontré por internet y conseguí modificar a duras penas a algo decente)

Si alguien pudiese implementar este javascript y formulario a el javascript y formulario que yo tengo, se lo agradecería inmensamente.

MI formulario:

Código:

<!--//FORMULARIO-->
            <div id="c_information" class="hide">
                <p></p>
            </div>
            <form id="c_form" name="contact">
                <label>
                    <p>Nombre</p>
                    <input name="nombre" id="c_name" type="text" class="c_input" placeholder="nombre..."/>
                </label>
                <br/>
                <label>
                    <p>Email:</p>
                    <input name="email" id="c_mail" type="text" class="c_input" placeholder="email..."/>
                </label>
                <br/>
                <label>
<form method="post">
                    <select name="asunto" id="c_asunto" type="text" class="c_input" onChange="mostrar(this.value);">
                        <option selected="selected" value="Motivo" disabled="disabled">Motivo</option>
                        <optgroup label="Formatear">
                            <option value="Formatear PC de Sobremesa">PC de Sobremesa</option>
                            <option value="Formatear PC Portátil">PC Portátil</option>
                        </optgroup>
                        <option value"">Otros motivos</option>
                    </select>
</form>
<div id="Otrosmotivos" style="display: none;">
    <form style="margin-top: -10px;">
    	<label>
        	<input name="otroasunto" id="c_otroasunto" type="text" class="c_input" placeholder="otro motivo"/>
        </label>
    </form>
</div>
                <label>
                  <p>Mensaje:</p>
                  <textarea name="mensaje"  id="c_msg" placeholder="mensaje..."></textarea>
                </label>
                <!-- boton enviar  -->
                <div id="c_btns">
                    <input name="send" onclick="cargaSendMail()" type="button" value="Enviar" class="btn-b" id="c_enviar"></input>
                </div>
                </label>
            </form>
<!--//FIN FORMULARIO-->

MI Javascript:

Código:

function cargaSendMail(){
 
 
    $("#c_enviar").attr("disabled", true);
 
    $(".c_error").remove();
 
    var filter=/^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+.[A-Za-z0-9_.]+[A-za-z]$/;
    var s_email = $('#c_mail').val();
    var s_asunto = $('#c_asunto').val();
    var s_otroasunto = $('#c_otroasunto').val();
    var s_name = $('#c_name').val();    
    var s_msg = $('#c_msg').val();
 

    if (filter.test(s_email)){
    sendMail = "true";
    } else{
    $('#c_mail').after("<span class='c_error' id='c_error_mail'>Ingrese un e-mail valido.</span>");
     //aplicamos color de borde si el se encontro algun error en el envio
    $('#contactform').css("border-color","#6f1d14");   
    sendMail = "false";
    }
    if (s_name.length == 0 ){
    $('#c_name').after( "<span class='c_error' id='c_error_name'>Ingrese su nombre.</span>" );
    var sendMail = "false";
    }
    if (s_msg.length == 0 ){
    $('#c_msg').after( "<span class='c_error' id='c_error_msg'>Ingrese un mensaje.</span>" );
    var sendMail = "false";
    }
    if (s_asunto == null ){
    $('#c_asunto').after( "<span class='c_error' id='c_error_msg'>Ingrese un motivo.</span>" );
    var sendMail = "false";
    }
    else {
    if (s_otroasunto.length == null ) {
    $('#c_otroasunto').after( "<span class='c_error' id='c_error_msg'>Ingrese un motivo.</span>" );
    var sendMail = "false";}
    if (s_otroasunto.length == null ) {
    $('#c_otroasunto').after( "<span class='c_error' id='c_error_msg'>Ingrese un motivo.</span>" );
    var sendMail = "false";}
    }

    
    if(sendMail == "true"){
     
     var datos = {
 
             "nombre" : $('#c_name').val(),
 
             "email" : $('#c_mail').val(),
 
             "asunto" : $('#c_asunto').val(),
 
             "otroasunto" : $('#c_otroasunto').val(),
 
             "mensaje" : $('#c_msg').val()
 
     };
 
     $.ajax({
 
             data:  datos,
             // hacemos referencia al archivo contacto.php
             url:   'contacto.php',
 
             type:  'post',
 
             beforeSend: function () {
             //aplicamos color de borde si el envio es exitoso
                    $('#contactform').css("border-color","#25A25A");
 
                     $("#c_enviar").val("Enviando...");
 
             },
 
             success:  function (response) {
 
                    $('form')[0].reset(); 
                    $("#c_enviar").val("Enviar");
                    $("#c_information p").html(response);
                    $("#c_information").fadeIn('slow');
                    $("#c_enviar").removeAttr("disabled");
                     
 
 
             }
 
     });
 
} else{
    $("#c_enviar").removeAttr("disabled");
}
 
}

function mostrar(id) {
    if (id == "Otros motivos") {
        $("#Otrosmotivos").show();
    }
    if (id != "Otros motivos") {
        $("#Otrosmotivos").hide();
    }
}

Gracias.

NeaFan · #6 (**permalink**) 05/01/2015, 14:32

Pues te diré que tu estructura esta un tanto sobrecargada:

Código HTML:

Ver original<form>
    <label>
        <input/>
    </label>
    <label>
        <input>
    </label>
    <label>
        <form>
            <select>
                <option>...</option>
            </select>
        </form>
        <div>
            <form>
                <label>
                    <input/>
                </label>
            </form>
        </div>
        <label>
            <textarea></textarea>
        </label>
        <div>
            <input></input>
        </div>
    </label>
</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<form action="" method="POST">
    Nombre
    <input type="text" id="c_name" name="name" required="required"/>
    Email
    <input type="email" id="c_email" name="email" required="required"/>
    <select id="c_asunto" name="asunto" class="c_input" onChange="mostrar(this.value);">
        <option selected="selected" value="Motivo" disabled="disabled">Motivo</option>
        <optgroup label="Formatear">
            <option value="Formatear PC de Sobremesa">PC de Sobremesa</option>
            <option value="Formatear PC Portátil">PC Portátil</option>
        </optgroup>
        <option value="Motivos Varios">Otros motivos</option>
    </select>
    <input type="text" id="c_otroasunto" name="otroasunto" placeholder="otro motivo"/>
    Mensaje
    <textarea id="c_msg" name="mensaje" placeholder="mensaje..."></textarea>
    <input type="button" id="c_enviar" value="Enviar" />
</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 originalfunction mostrar(id) {
                var campo = document.getElementById("c_otroasunto");
                if (id == "Otros motivos") {
                    campo.setAttribute("required", "required");
                    campo.removeAttribute("hidden");
                } else {
                    campo.setAttribute("hidden", "hidden");
                    campo.removeAttribute("required");
                }
            }

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<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Frame Contenedor</title>
        <!--OJO EL ESTILO LO DEFINES TU-->
        <style type="text/css">
            form {
                width: 30%;
            }
            input, textarea, select {
                width: 100%
            }
        </style>
        <!--FINALIZA EL ESTILO-->
        <script type="text/javascript">
            function mostrar(id) {
                var campo = document.getElementById("c_otroasunto");
                if (id == "Otros motivos") {
                    campo.setAttribute("required", "required");
                    campo.removeAttribute("hidden");
                } else {
                    campo.setAttribute("hidden", "hidden");
                    campo.removeAttribute("required");
                }
            }
        </script>
    </head>
    <body>
        <form action="" method="POST">
            Nombre
            <input type="text" id="c_name" name="name" required="required"/>
            Email
            <input type="email" id="c_email" name="email" required="required"/>
            <select id="c_asunto" class="c_input" name="asunto" onchange="mostrar(this.value);">
                <option selected="selected" value="Motivo" disabled="disabled">Motivo</option>
                <optgroup label="Formatear">
                    <option value="Formatear PC de Sobremesa">PC de Sobremesa</option>
                    <option value="Formatear PC Portátil">PC Portátil</option>
                </optgroup>
                <option value="Otros motivos">Otros motivos</option>
            </select>
            <input type="text" id="c_otroasunto" name="otroasunto" placeholder="otro motivo" hidden="hidden"/>
            Mensaje
            <textarea id="c_msg" name="mensaje" placeholder="mensaje..." required="required"></textarea>
            <input type="submit" id="c_enviar" value="Enviar"/>
        </form>
    </body>
</html>

#7 (**permalink**) 05/01/2015, 16:12

Gracias por implicarte tanto, pero sigue sin funcionar lo que yo busco.

Probé con tu html+javascript y va menos de lo que yo ya había conseguido con recursos que encontré más lo poco que sé.

Eso sí, gracias a tu estructura simplifiqué mejor mi formulario.

Lo de no usar javascript, en mi caso es necesario, ya que el formulario y javascript lo encontré por una web ya que necesitaba que el formulario recargase en la misma página y cosa así, el javascript me lleva a ajax o no sé que lío.

En fín, me sirvió para simplificar mi formulario, pero creo que no voy a darle más vueltas de momento y lo dejaré así, ya que está siendo mucho lío y al menos conseguí obtener un segundo "formulario" al seleccionar otros motivos, aunque espero que la gente se de cuenta de rellenar esa sección.

Muchas gracias por tu implicación. :)

NeaFan · #8 (**permalink**) 05/01/2015, 21:29

Cuando mencione "no uses Javascript si no es necesario" no quise decir que no lo usaras, sino que moderaras su uso, se que necesitas usarlo, es obvio que si usas el método ajax es porque quieres hacer peticiones al servidor sin recargar la pagina por ello creo que quizás te interese este aporte:

http://www.forosdelweb.com/f13/aporte-ajax-sin-librerias-1117722/

Espero tengas mas suerte la próxima, sin embargo re-leyendo tu problema:

Cita:

Iniciado por erfrancis6

NO consigo que cuando se elije ese segundo formulario, aunque no se escriba nada, el formulario se envía igualmente.

Quiero preguntar, ¿Cuando dices "aunque no se escriba nada", a que te refieres? Acaso te refieres a que aunque no se escriba nada en el campo que acaba de aparecer. Si es así solo debes eliminar el atributo require «osea eliminarla linea 4 y 8 de la función mostrar»

Si te refieres a que no se escriba nada en ninguno de los campos, la solución no deja de ser muy diferencie simplemente añadir unas cuantas lineas a la función mostrar del tipo:

Código Javascript:

Ver originaldocument.getElementById("id_elemento").removeAttribute("required");

donde id_elemento seria c_email para el input de email, c_name para el input de nombre y así...

Ahora luego leo esto:

Cita:

Iniciado por erfrancis6

Quisiera que cuando se eligiese "Otros motivos", el nuevo formulario que aparece también fuese obligatorio de rellenar para poder enviar el formulario.

Y pienso ¡Entonces el formulario se obliga a completar o no

!

#9 (**permalink**) 06/01/2015, 05:42

A ver, mi idea es:

Por ejemplo:
Si rellenas "Formatear PC, etc... etc..." no aparece el segundo mini-formulario por lo que no es obligatorio de rellenar.

Si eliges en lugar de estos, la opción de "otros motivos" ahora SÍ aparece el mini-formulario y ahora SÍ es obligatorio rellenar este mini-formulario.

Pero insisto, no te complico más las cosas, lo dejo tal y como está que de momento me va más o menos bien salvo ese detalle.

:)