Question

181

Why would a button click event cause site to reload in a Bootstrap form?

rated 0 times [ 188] [ 7] / answers: 1 / hits: 41233 / 10 Years ago, fri, may 2, 2014, 12:00:00

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? &nbsp;&nbsp;&nbsp;&nbsp;

                            <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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

khalilb

Add To Favorites

Follow

Total Points: 173

Total Questions: 110

Total Answers: 105

Location: Honduras

Member since Thu, Mar 23, 2023

1 Year ago

khalilb questions

1 Why does the next.js Script tag with the beforeInteractive strategy don't load thirdParty script?

Sat, May 21, 22, 00:00, 2 Years ago

1 axios : How exactly to preserve session after successful authorization and send with subsequent request - while testing without browser

Thu, Nov 25, 21, 00:00, 3 Years ago

1 Chart.JS tooltip callbacks label and title (v3.5)

Thu, Sep 9, 21, 00:00, 3 Years ago

1 Cannot call function only once in React Native?

Sat, Jul 4, 20, 00:00, 4 Years ago

1 How to fix ng build project in angular

Tue, Nov 12, 19, 00:00, 5 Years ago

View All

answered 10 Years ago quinlanhenryf · Accepted Answer

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();

})