title: Why would a button click event cause site to reload in a Bootstrap form?
body: <p>I'm using <strong>jQuery</strong>'s <code>show()</code> and <code>hide()</code> functions on <code>divs</code> in order to <em>code</em> or <em>simulate</em> different consecutive form sections.</p>
  
  <p>I've made a button that hides a <code>div</code> 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 <code>$(document).ready()</code>.</p>
  
  <p>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).</p>
  
  <p><strong>The form can be visited here:</strong></p>
  
  <blockquote>
    <p><code>http://registropsicologos.maricelaaguilarflores.com:20791</code></p>
  </blockquote>
  
  <p>The blue button is the responsible for the page reload problem, unless you click <em>Visualizar</em> at nav bar before clicking in "continuar".</p>
  
  <p>I can't understand why this is happening, I've used <code>.show()</code> and <code>.hide()</code> before and this problem wasn't happening.</p>
  
  <p><strong>Here's the relevant JavaScript code:</strong></p>
  
  <pre><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 &lt;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)
  
  }
  </code></pre>
  
  <p><strong>This is the body markup:</strong></p>
  
  <pre><code>&lt;body&gt;
  
      &lt;div class="container" id="proyecto"&gt;
  
          &lt;ul class="nav nav-tabs"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Registrar&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Visualizar&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/div&gt;
  
      &lt;div id="formulario"&gt;
  
          &lt;div class="container" id="seccionRegistro1"&gt;
              &lt;form class="form-horizontal" role="form"&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;label for="inputNombre" class="col-sm-2 control-label"&gt;Nombre(s)&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;input type="text" class="form-control" id="inputNombre" placeholder="Nombre(s)"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;label for="inputApellidos" class="col-sm-2 control-label"&gt;Apellidos&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;input type="text" class="form-control" id="inputApellidos" placeholder="Apellidos"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;label for="inputEdad" class="col-sm-2 control-label"&gt;Edad&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;input type="text" class="form-control" id="inputEdad" placeholder="Apellidos"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;label for="inputTel" class="col-sm-2 control-label"&gt;Teléfono&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;input type="text" class="form-control" id="inputTel" placeholder="Teléfono"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;label for="inputCel" class="col-sm-2 control-label"&gt;Celular&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;input type="text" class="form-control" id="inputCel" placeholder="Celular"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                  &lt;div class="col-sm-offset-2 col-sm-10"&gt;
                      &lt;button class="btn btn-primary btnSeccion" id="btnSeccion1"&gt;Continuar&lt;/button&gt;
                  &lt;/div&gt;
  
              &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;div class="container" id="seccionRegistro2"&gt;
              &lt;form class="form-horizontal" role="form"&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;label for="inputEscolaridad" class="col-sm-2 control-label"&gt;Escolaridad&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;input type="text" class="form-control" id="inputEscolaridad" placeholder="Escolaridad"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;label for="inputAlmaMater" class="col-sm-2 control-label"&gt;Egresado de&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;input type="text" class="form-control" id="inputAlmaMater" placeholder="Egresado de"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;label for="inputAñoEgreso" class="col-sm-2 control-label"&gt;Año de egreso&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;input type="text" class="form-control" id="inputAñoEgreso" placeholder="Año de egreso"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;label for="inputCedula" class="col-sm-2 control-label"&gt;Cédula Profesional&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;input type="text" class="form-control" id="inputCedula" placeholder="Cédula Profesional"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;label for="checkPosgrado" class="col-sm-2 control-label"&gt;Estudios de Posgrado&lt;/label&gt;
                  &lt;div class="col-sm-1"&gt;
                    &lt;div class="checkbox"&gt;
                      &lt;label&gt;
                        &lt;input type="checkbox"&gt; Sí
                      &lt;/label&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-8"&gt;
                      &lt;div class="row"&gt;
                        &lt;div class="col-xs-4"&gt;
                          &lt;input type="text" class="form-control" placeholder="Posgrado" id="inputPosgrado1"&gt;
                        &lt;/div&gt;
                        &lt;div class="col-xs-4"&gt;
                          &lt;input type="text" class="form-control" placeholder="Posgrado" id="inputPosgrado2"&gt;
                        &lt;/div&gt;
                        &lt;div class="col-xs-4"&gt;
                          &lt;input type="text" class="form-control" placeholder="Posgrado" id="inputPosgrado3"&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
  
                &lt;div class="form-group"&gt;
                  &lt;label for="inputCedula" class="col-sm-2 control-label"&gt;Cédula Profesional&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;label class="checkbox-inline"&gt;
                    &lt;input type="checkbox" id="inputAreaTrabajoClinica" value="option1"&gt; Clínica
                    &lt;/label&gt;
                    &lt;label class="checkbox-inline"&gt;
                    &lt;input type="checkbox" id="inputAreaTrabajoSocial" value="option1"&gt; Social
                    &lt;/label&gt;
                    &lt;label class="checkbox-inline"&gt;
                    &lt;input type="checkbox" id="inputAreaTrabajoLaboral" value="option1"&gt; Laboral
                    &lt;/label&gt;
                    &lt;label class="checkbox-inline"&gt;
                    &lt;input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"&gt; Educativa
                    &lt;/label&gt;                    
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;label for="inputTrabajo" class="col-sm-2 control-label"&gt;Institución de trabajo&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;input type="text" class="form-control" id="inputTrabajo" placeholder="Institución de trabajo"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;label for="trabajoIndependiente" class="col-sm-2 control-label"&gt;Desarrollo Profesional Independiente&lt;/label&gt;
                  &lt;div class="col-sm-1"&gt;
                    &lt;div class="checkbox"&gt;
                      &lt;label&gt;
                        &lt;input type="checkbox" id="trabajoIndependiente"&gt; Sí
                      &lt;/label&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-8"&gt;
                      &lt;div class="row"&gt;
                        &lt;div class="col-xs-6"&gt;
                          &lt;input type="text" class="form-control" placeholder="Actividad independiente" id="inputActividadIndependiente1" disabled="true"&gt;
                        &lt;/div&gt;
                        &lt;div class="col-xs-6"&gt;
                          &lt;input type="text" class="form-control" placeholder="Actividad independiente" id="inputActividadIndependiente2" disabled="true"&gt;
                        &lt;/div&gt;                          
                      &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;        
  
                &lt;div class="form-group"&gt;
                  &lt;label for="checkPosgrado" class="col-sm-2 control-label"&gt;Actividades de trabajo no relacionadas con la psicología&lt;/label&gt;
                  &lt;div class="col-sm-1"&gt;
                    &lt;div class="checkbox"&gt;
                      &lt;label&gt;
                        &lt;input type="checkbox" id="actividadesAjenasPsicologia"&gt; Sí
                      &lt;/label&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-8"&gt;
                      &lt;div class="row"&gt;
                        &lt;div class="col-xs-6"&gt;
                          &lt;input type="text" class="form-control" placeholder="Actividad" id="actividadNoPsicologia1" disabled="true"&gt;
                        &lt;/div&gt;
                        &lt;div class="col-xs-6"&gt;
                          &lt;input type="text" class="form-control" placeholder="Actividad" id="actividadNoPsicologia2" disabled="true"&gt;
                        &lt;/div&gt;                          
                      &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                  &lt;div class="col-sm-offset-2 col-sm-10"&gt;
                      &lt;button class="btn btn-primary btnSeccion" id="btnSeccion2"&gt;Continuar&lt;/button&gt;
                  &lt;/div&gt;
  
              &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;div class="container" id="seccionRegistro3"&gt;
              &lt;form class="form-horizontal" role="form"&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label for="actividadesInteres" class="col-sm-2 control-label"&gt;Actvidades profesionales en las que le gustaría participar&lt;/label&gt;
                      &lt;div class="col-sm-10"&gt;
                        &lt;label class="checkbox-inline"&gt;
                        &lt;input type="checkbox" id="inputAreaTrabajoClinica" value="option1"&gt; Conferencias y encuentros
                        &lt;/label&gt;
                        &lt;label class="checkbox-inline"&gt;
                        &lt;input type="checkbox" id="inputAreaTrabajoSocial" value="option1"&gt; Cursos
                        &lt;/label&gt;
                        &lt;label class="checkbox-inline"&gt;
                        &lt;input type="checkbox" id="inputAreaTrabajoLaboral" value="option1"&gt; Talleres
                        &lt;/label&gt;
                        &lt;label class="checkbox-inline"&gt;
                        &lt;input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"&gt; Diplomados
                        &lt;/label&gt;
                            &lt;label class="checkbox-inline"&gt;
                        &lt;input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"&gt; Maestría
                        &lt;/label&gt;
                            &lt;label class="checkbox-inline"&gt;
                        &lt;input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"&gt; Doctorado
                        &lt;/label&gt;                            
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label for="capacitacionInteres" class="col-sm-2 control-label"&gt;Areas de la psicología en las que le gustaría capacitarse&lt;/label&gt;
                      &lt;div class="col-sm-10"&gt;
                        &lt;label class="checkbox-inline"&gt;
                        &lt;input type="checkbox" id="inputAreaTrabajoClinica" value="Clínica"&gt; Clínica
                        &lt;/label&gt;
                        &lt;label class="checkbox-inline"&gt;
                        &lt;input type="checkbox" id="inputAreaTrabajoSocial" value="Social"&gt; Social
                        &lt;/label&gt;
                        &lt;label class="checkbox-inline"&gt;
                        &lt;input type="checkbox" id="inputAreaTrabajoLaboral" value="Laboral"&gt; Laboral
                        &lt;/label&gt;
                        &lt;label class="checkbox-inline"&gt;
                        &lt;input type="checkbox" id="inputAreaTrabajoEducativa" value="Educativa"&gt; Educativa
                        &lt;/label&gt;
                            &lt;label class="checkbox-inline"&gt;
                        &lt;input type="checkbox" id="inputAreaTrabajoEducativa" value="Todas"&gt; Todas
                        &lt;/label&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label for="inputNombre" class="col-sm-2 control-label"&gt;¿Alguna temática en particular que le gustaría conocer o capacitarse?&lt;/label&gt;
                      &lt;div class="col-sm-10"&gt;
                        &lt;input type="text" class="form-control" id="inputInteresCapacitacion" placeholder="Temática de interés"&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label for="checkPosgrado" class="col-sm-2 control-label"&gt;¿Pertenece a alguna agrupación relacionada con el campo de la psicología?&lt;/label&gt;
                      &lt;div class="col-sm-1"&gt;
                        &lt;div class="checkbox"&gt;
                          &lt;label&gt;
                            &lt;input type="checkbox" id="actividadesAjenasPsicologia"&gt; Sí
                          &lt;/label&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-8"&gt;
                          &lt;div class="row"&gt;
                            &lt;div class="col-xs-6"&gt;
                              &lt;input type="text" class="form-control" placeholder="Actividad" id="Agrupación" disabled="true"&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-6"&gt;
                              &lt;input type="text" class="form-control" placeholder="Actividad" id="Agrupación" disabled="true"&gt;
                            &lt;/div&gt;                          
                          &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label for="checkPosgrado" class="col-sm-2 control-label"&gt;¿Ha participado con anterioridad en algún evento de la Asociación de Psicólogos de Tuxtepec?&lt;/label&gt;
                      &lt;div class="col-sm-1"&gt;
                        &lt;div class="checkbox"&gt;
                          &lt;label&gt;
                            &lt;input type="checkbox" id="participacionEventos"&gt; Sí
                          &lt;/label&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-8"&gt;
                          &lt;select multiple class="form-control" id="eventosAsistidos"&gt;
                            &lt;option value="abrazoterapia"&gt;Abrazoterapia&lt;/option&gt;
                            &lt;option value="tallerMujeres"&gt;Taller autoestima mujeres&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;p class="bg-success"&gt;
  
                          ¿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?" &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                              &lt;label&gt;
                                &lt;input type="checkbox" id="idInteresMiembro"&gt;&lt;strong&gt;Sí&lt;/strong&gt;
                              &lt;/label&gt;
  
                    &lt;/p&gt;
  
                  &lt;div class="col-sm-offset-2 col-sm-10"&gt;
                      &lt;button class="btn btn-primary btnSeccion" id="btnSeccion3"&gt;Continuar&lt;/button&gt;
                  &lt;/div&gt;
  
                  &lt;/form&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>