0

he creado el siguiente script:

$(".circulo").click(function() {
  $('form').show();
});


$("#next").click(function() {
  $("#test1").hide();
  $("#test2").show();
});

$("#back").click(function() {
  $("#test1").show();
  $("#test2").hide();
});

para el siguiente form:

Lo que pasa aqui es hay un formulario que esta en display:none, cuando le das a circulo este se deja ver, luego el formulario esta dividido en dos partes la primera te muestra dos inputs, cuando le das a next te pone el primer grupo en hide y el segundo en show, y en el segundo hay uno que te deja volver hacia atras. El tema es que solo funciona una vez, luego ya no mas. Y ademas tengo que implementar en el script una funcion, que cuado hagas submit, ponga todo el form en hide, y no se muy bien si usar window.close();. Alguien me puede hechar una mano?

P.D: El código funcional esta aqui

2
  • 2
    A que te referís cuando decir "...solo funciona una vez"? yo lo probé y funciona todo según tu descripción. Ahora, para ocultar el form, puedes usar $('form').hide(); y luego hacer el submit desd js.
    – Mario L
    Commented el 9 sept. 2018 a las 19:39
  • 2
    Probe el codigo y todo funciona bien Commented el 9 sept. 2018 a las 20:28

1 respuesta 1

1

no sé si sirva de algo pero..., si al boton en lugar de hacer submit haces esto

<div class="body">
   <div class="circulo">
   </div>
   <div id='head'>
      <form name="mi_formulario" method="post">
         <div id="test1">
            <div>
               <label for="avatar">Profile picture:</label>
               <input type="file"
                  id="avatar" name="avatar"
                  accept="image/png, image/jpeg" />
            </div>
            <div>
               <label for="msg">Message:</label>
               <textarea id="msg" name="user_message"></textarea>
            </div>
            <a href="#">
               <div id="next">
                  next
               </div>
            </a>
         </div>
         <div id="test2">
            <div>
               <label for="name">Name:</label>
               <input type="text" id="name" name="user_name">
            </div>
            <div>
               <label for="mail">E-mail:</label>
               <input type="email" id="mail" name="user_mail">
            </div>
            <div class="button">
               <button id="submit_button" onclick="send_form();">Send your message</button>
            </div>
            <a href="#">
               <div id="back">
                  back
               </div>
            </a>
         </div>
      </form>
   </div>
</div>

lo que he heco es ponerle nombre al formulario y quitar el tipe submit al boton y agregarle un funcion javascript que es la siguiente.

function send_form(){
    document.forms.mi_formulario.submit();
    $('form').hide();
}

es lo que se me ocurre ahora mismo, seguro que se puede hacer más simple pero bueno, espero que esto te ayude. Un saludo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.