Menu
I'm using jQuery's show() and hide() functions on divs in order to code or simulate different consecutive form sections.
I've made a button that hides a div when it's clicked. What's strange is that once the button is clicked, the page will reload and come back to the div shown at first $(document).ready().
What's even more strange is that this problem mentioned above won't happen if you click in the nav bar text before clicking in the "continuar" button (Then the expected page will appear without reloading and showing the first page again).
The form can be visited here:
http://registropsicologos.maricelaaguilarflores.com:20791
The blue button is the responsible for the page reload problem, unless you click Visualizar at nav bar before clicking in "continuar".
I can't understand why this is happening, I've used .show() and .hide() before and this problem wasn't happening.
Here's the relevant JavaScript code:
$(document).ready(function () { mostrarFormularioRegistro() $(".btnSeccion").click(function() { btnMostrarSeccion($(this)) }) }) function mostrarFormularioRegistro () { $("#formularioRegistro").show() mostrarSeccion(1) $("#DB").hide() } function mostrarSeccion (seccion) { for (var i = 1; i <4; i++) { if (i===seccion) $("#seccionRegistro"+i).show() else $("#seccionRegistro"+i).hide() } } function btnMostrarSeccion (idBtnSeccion) { var seccion = parseInt(idBtnSeccion.attr("id").slice(-1)) if (seccion == 3) mostrarSeccion(1) else mostrarSeccion(seccion+1) } This is the body markup:
<body> <div class="container" id="proyecto"> <ul class="nav nav-tabs"> <li class="active"><a href="#">Registrar</a></li> <li><a href="#">Visualizar</a></li> </ul> </div> <div id="formulario"> <div class="container" id="seccionRegistro1"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputNombre" class="col-sm-2 control-label">Nombre(s)</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputNombre" placeholder="Nombre(s)"> </div> </div> <div class="form-group"> <label for="inputApellidos" class="col-sm-2 control-label">Apellidos</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputApellidos" placeholder="Apellidos"> </div> </div> <div class="form-group"> <label for="inputEdad" class="col-sm-2 control-label">Edad</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputEdad" placeholder="Apellidos"> </div> </div> <div class="form-group"> <label for="inputTel" class="col-sm-2 control-label">Teléfono</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputTel" placeholder="Teléfono"> </div> </div> <div class="form-group"> <label for="inputCel" class="col-sm-2 control-label">Celular</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputCel" placeholder="Celular"> </div> </div> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-primary btnSeccion" id="btnSeccion1">Continuar</button> </div> </form> </div> <div class="container" id="seccionRegistro2"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEscolaridad" class="col-sm-2 control-label">Escolaridad</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputEscolaridad" placeholder="Escolaridad"> </div> </div> <div class="form-group"> <label for="inputAlmaMater" class="col-sm-2 control-label">Egresado de</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputAlmaMater" placeholder="Egresado de"> </div> </div> <div class="form-group"> <label for="inputAñoEgreso" class="col-sm-2 control-label">Año de egreso</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputAñoEgreso" placeholder="Año de egreso"> </div> </div> <div class="form-group"> <label for="inputCedula" class="col-sm-2 control-label">Cédula Profesional</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputCedula" placeholder="Cédula Profesional"> </div> </div> <div class="form-group"> <label for="checkPosgrado" class="col-sm-2 control-label">Estudios de Posgrado</label> <div class="col-sm-1"> <div class="checkbox"> <label> <input type="checkbox"> Sí </label> </div> </div> <div class="col-sm-8"> <div class="row"> <div class="col-xs-4"> <input type="text" class="form-control" placeholder="Posgrado" id="inputPosgrado1"> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder="Posgrado" id="inputPosgrado2"> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder="Posgrado" id="inputPosgrado3"> </div> </div> </div> </div> <div class="form-group"> <label for="inputCedula" class="col-sm-2 control-label">Cédula Profesional</label> <div class="col-sm-10"> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoClinica" value="option1"> Clínica </label> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoSocial" value="option1"> Social </label> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoLaboral" value="option1"> Laboral </label> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"> Educativa </label> </div> </div> <div class="form-group"> <label for="inputTrabajo" class="col-sm-2 control-label">Institución de trabajo</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputTrabajo" placeholder="Institución de trabajo"> </div> </div> <div class="form-group"> <label for="trabajoIndependiente" class="col-sm-2 control-label">Desarrollo Profesional Independiente</label> <div class="col-sm-1"> <div class="checkbox"> <label> <input type="checkbox" id="trabajoIndependiente"> Sí </label> </div> </div> <div class="col-sm-8"> <div class="row"> <div class="col-xs-6"> <input type="text" class="form-control" placeholder="Actividad independiente" id="inputActividadIndependiente1" disabled="true"> </div> <div class="col-xs-6"> <input type="text" class="form-control" placeholder="Actividad independiente" id="inputActividadIndependiente2" disabled="true"> </div> </div> </div> </div> <div class="form-group"> <label for="checkPosgrado" class="col-sm-2 control-label">Actividades de trabajo no relacionadas con la psicología</label> <div class="col-sm-1"> <div class="checkbox"> <label> <input type="checkbox" id="actividadesAjenasPsicologia"> Sí </label> </div> </div> <div class="col-sm-8"> <div class="row"> <div class="col-xs-6"> <input type="text" class="form-control" placeholder="Actividad" id="actividadNoPsicologia1" disabled="true"> </div> <div class="col-xs-6"> <input type="text" class="form-control" placeholder="Actividad" id="actividadNoPsicologia2" disabled="true"> </div> </div> </div> </div> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-primary btnSeccion" id="btnSeccion2">Continuar</button> </div> </form> </div> <div class="container" id="seccionRegistro3"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="actividadesInteres" class="col-sm-2 control-label">Actvidades profesionales en las que le gustaría participar</label> <div class="col-sm-10"> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoClinica" value="option1"> Conferencias y encuentros </label> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoSocial" value="option1"> Cursos </label> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoLaboral" value="option1"> Talleres </label> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"> Diplomados </label> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"> Maestría </label> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"> Doctorado </label> </div> </div> <div class="form-group"> <label for="capacitacionInteres" class="col-sm-2 control-label">Areas de la psicología en las que le gustaría capacitarse</label> <div class="col-sm-10"> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoClinica" value="Clínica"> Clínica </label> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoSocial" value="Social"> Social </label> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoLaboral" value="Laboral"> Laboral </label> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoEducativa" value="Educativa"> Educativa </label> <label class="checkbox-inline"> <input type="checkbox" id="inputAreaTrabajoEducativa" value="Todas"> Todas </label> </div> </div> <div class="form-group"> <label for="inputNombre" class="col-sm-2 control-label">¿Alguna temática en particular que le gustaría conocer o capacitarse?</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputInteresCapacitacion" placeholder="Temática de interés"> </div> </div> <div class="form-group"> <label for="checkPosgrado" class="col-sm-2 control-label">¿Pertenece a alguna agrupación relacionada con el campo de la psicología?</label> <div class="col-sm-1"> <div class="checkbox"> <label> <input type="checkbox" id="actividadesAjenasPsicologia"> Sí </label> </div> </div> <div class="col-sm-8"> <div class="row"> <div class="col-xs-6"> <input type="text" class="form-control" placeholder="Actividad" id="Agrupación" disabled="true"> </div> <div class="col-xs-6"> <input type="text" class="form-control" placeholder="Actividad" id="Agrupación" disabled="true"> </div> </div> </div> </div> <div class="form-group"> <label for="checkPosgrado" class="col-sm-2 control-label">¿Ha participado con anterioridad en algún evento de la Asociación de Psicólogos de Tuxtepec?</label> <div class="col-sm-1"> <div class="checkbox"> <label> <input type="checkbox" id="participacionEventos"> Sí </label> </div> </div> <div class="col-sm-8"> <select multiple class="form-control" id="eventosAsistidos"> <option value="abrazoterapia">Abrazoterapia</option> <option value="tallerMujeres">Taller autoestima mujeres</option> </select> </div> </div> <p class="bg-success"> ¿Le gustaría pertenecer como miembro activo de la Asociación de Psicólogos de Tuxtepec, A.C. "Manos Unidas por un vivir más pleno?" <label> <input type="checkbox" id="idInteresMiembro"><strong>Sí</strong> </label> </p> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-primary btnSeccion" id="btnSeccion3">Continuar</button> </div> </form> </div> </div> </body> 
389
Add type="button" to the button. The default value of type for a button is submit , which self posts the form in your case and makes it look like a refresh. Except this prevents HTML5 form validation (such as for input of type="email"). This is the best option.
Your page is reloading because the button is submitting your form. The submit will, by default, re-load the page to show form errors or the result of the submit action. The cleanest fix is, as you discovered, to specify a button type.
Use the preventDefault() method on the event object to prevent a page refresh on form submit in React, e.g. event. preventDefault() . The preventDefault method prevents the browser from issuing the default action which in the case of a form submission is to refresh the page.
A <button> tag uses Submit behavior by default. Thus your page submits the form when the button is clicked and this looks like a page refresh itself. To work around this you can either use an input tag
<input type="button" class="btn btn-primary btnSeccion" id="btnSeccion3" value="Continuar"/> to do the same effect. Or you can cancel the Submit in your button's click Event Handler (if that's what you want) like this:
$(".btnSeccion").click(function(event) { btnMostrarSeccion($(this)); event.preventDefault(); }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
