Warum würde ein Klickereignis auf eine Schaltfläche dazu führen, dass die Website in einem Bootstrap-Formular neu geladen wird?

Lesezeit: 13 Minuten

Benutzer-Avatar
diegoaguilar

Ich benutze jQuery‘s show() und hide() Funktionen an divs um zu Code oder simulieren verschiedene aufeinanderfolgende Formularabschnitte.

Ich habe einen Knopf gemacht, der a verbirgt div wenn es angeklickt wird. Seltsam ist, dass die Seite nach dem Klicken auf die Schaltfläche neu geladen wird und zu dem zuerst angezeigten div zurückkehrt $(document).ready().

Noch seltsamer ist, dass dieses oben erwähnte Problem nicht auftritt, wenn Sie in den Text der Navigationsleiste klicken, bevor Sie auf die Schaltfläche “Weiter” klicken (dann wird die erwartete Seite angezeigt, ohne neu zu laden und die erste Seite erneut anzuzeigen).

Das Formular kann hier aufgerufen werden:

http://registropsicologos.maricelaaguilarflores.com:20791

Die blaue Schaltfläche ist für das Problem beim Neuladen der Seite verantwortlich, es sei denn, Sie klicken darauf Visualisierung in der Navigationsleiste, bevor Sie auf “Weiter” klicken.

Ich kann nicht verstehen, warum das passiert, ich habe verwendet .show() und .hide() vorher und dieses Problem trat nicht auf.

Hier ist der relevante 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)

}

Dies ist das 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>

  • Ich habe die URL überprüft, die Sie angegeben haben, und die Seite wird bei keinem der Schaltflächenklicks neu geladen. Wenn Sie erläutern können, was genau passiert. Da ich kein Postback auf irgendwelchen Schaltflächen sehe

    – Krunal Patil

    2. Mai 2014 um 4:41 Uhr

  • Gott, es ist noch seltsamer … Ich benutze Google Chrome und du? @KrunalPatil

    – diegoaguilar

    2. Mai 2014 um 4:42 Uhr

  • .show() und .hide() können unmöglich dazu führen, dass die Seite neu geladen oder die Position geändert wird. höchstwahrscheinlich senden Ihre Klicks stattdessen das Formular, da Sie dies nicht explizit verhindern.

    – Kevin B

    2. Mai 2014 um 4:48 Uhr

  • Verwenden Sie , da

EIN <button> -Tag verwendet standardmäßig das Submit-Verhalten. Somit sendet Ihre Seite das Formular, wenn auf die Schaltfläche geklickt wird, und dies sieht aus wie eine Seitenaktualisierung. Um dies zu umgehen, können Sie entweder eine verwenden input Schild

<input type="button" class="btn btn-primary btnSeccion" id="btnSeccion3" value="Continuar"/>

um den gleichen Effekt zu erzielen. Oder Sie können das Absenden im Click-Event-Handler Ihrer Schaltfläche (falls gewünscht) wie folgt abbrechen: 

$(".btnSeccion").click(function(event) {
    btnMostrarSeccion($(this));
    event.preventDefault();
})

  • Vielen Dank! Ich werde es jetzt überprüfen und ich bin mir sicher, dass es gelöst wird. War meine Frage wirklich -2 wert?

    – diegoaguilar

    2. Mai 2014 um 4:52 Uhr

  • Ich habe mich gerade bei Stackoverflow angemeldet und Ihre Frage gesehen. Also ich bin irgendwie neu. Habe ich die -2 aus Versehen gemacht? Ich glaube nicht, dass ich irgendetwas abgelehnt habe.

    – Sreenath HB

    2. Mai 2014 um 4:57 Uhr

  • Ich habe abgelehnt, weil “jQuery .show- und .hide-Funktionen verursachen ein Neuladen der Website?” hätte ausgeschlossen werden können, indem man einfach das Ein- und Ausblenden entfernt hätte …

    – Kevin B

    2. Mai 2014 um 5:01 Uhr

  • Nun, ich stimme diesem Argument @KevinB zu. Ich dachte wirklich, dass es das war und konnte es nicht glauben warum. Ich werde sogar den Titel ändern, damit er in Zukunft allen anderen hilft

    – diegoaguilar

    2. Mai 2014 um 5:02 Uhr

  • Nun, vorzugsweise JavaScript jQuery, aber auch ASP.NET und SharePoint.

    – Sreenath HB

    2. Mai 2014 um 5:10 Uhr

Die einfachste Lösung besteht darin, einfach ein einfaches Attribut von “Typ” zum Button-Element, etwa so:

<button type="button" class="btn btn-default" onclick="...">My Button</button>

Wenn angegeben wird, dass das Schaltflächenelement speziell von der stammt Typ = Schaltflächeverhält es sich nicht mehr wie eine Senden-Schaltfläche und sendet (also aktualisiert) die aktuelle Seite nicht.

  • Das kann ich bestätigen nicht Arbeit die ganze Zeit. Sind Sie sicher, dass Ihr Onclick nicht falsch zurückgibt?

    – EKW

    22. Juli 2016 um 17:36 Uhr

  • Eigentlich habe ich das Attribut “onclick” nicht verwendet und mich einfach mit der Attributdefinition “type=button” zufrieden gegeben, und das reicht aus. Wenn die Schaltfläche aus irgendeinem Grund immer noch das Formular sendet, das sie enthält, können Sie immer die „onclick“-Problemumgehung oder die „preventDefault“-Methode innerhalb des Codes des Click-Ereignisses ausprobieren und so weiter.

    – TheCubeMan

    23. Juli 2016 um 3:23 Uhr

Benutzer-Avatar
Faraz Khan

Ich habe dieses Problem viele Male konfrontiert. Unabhängig davon, ob Sie Angular, Bootstrap oder ein anderes js-Plugin verwenden, manchmal funktioniert es perfekt auf Desktop-Browsern, erfüllt aber nicht den Zweck auf mobilen Browsern oder Touchscreen-Smartphones.

As-Button-Tags haben standardmäßig ein Submit-Verhalten.

Die einfachste Lösung ist die Verwendung type="button"

Dies wird das Problem lösen, andernfalls verwenden Sie js, um das Senden der Seite zu stoppen.

Der folgende Code (aus einer Bootstrap-Vorlage) kann nicht in eine geändert werden <input> aber markieren. Es hat das gleiche Problem, wenn es auf Chrome wie Samsung S4 läuft und wenn es auf meinem aktuellen Samsung S5 läuft. Wenn Sie auf die Schaltfläche zum Erweitern des Menüs klicken, wird die Seite zurückgesendet. Ich bin mir nicht sicher, ob dies auch bei anderen Browsern und Modellen auftreten würde, vermute aber, dass dies der Fall wäre.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

Ich habe dies durch einfaches Hinzufügen behoben onclick="return false;" in das Button-Tag.

Benutzer-Avatar
Sri Vatsava

Die Sache ist die Elemente wie <button> hat die Standardaktion Senden, wenn Sie möchten, dass sie sich wie eine normale Schaltfläche verhalten type="button" die Voreinstellung ist type="submit"

Benutzer-Avatar
Daten

als ich mich verändert habe <button> zu <input> Seite wurde nicht mehr neu geladen.

Benutzer-Avatar
Divyang Desai

Ohne jquery (inspiriert von Sreenath HB):

Clicklistener einrichten:

submitButton.addEventListener("click", onSubmitClicked);

Neuladen verhindern: 

function onSubmitClicked(event){
    event.preventDefault();
    // Your code   
}

1164480cookie-checkWarum würde ein Klickereignis auf eine Schaltfläche dazu führen, dass die Website in einem Bootstrap-Formular neu geladen wird?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy