当前位置: 首页 > 知识库问答 >
问题:

为什么按钮点击事件会导致站点在引导表单中重新加载?

汪志业
2023-03-14

我在divs上使用jQuery的show()hide()函数来编码或模拟不同的连续表单节。

更奇怪的是,上面提到的这个问题,如果你在点击“Continuar”按钮之前点击导航栏文本(然后不需要重新加载并再次显示第一页就会出现预期的页面),就不会发生。

表格可在此浏览:

http://registropsicologos.maricelaaguilarflores.com:20791

下面是相关的JavaScript代码:

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

}

这是正文标记:

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

共有1个答案

阎英朗
2023-03-14

默认情况下,

 类似资料:
  • 我有一个Angular的表单,里面有两个按钮标签。一个按钮提交上的表单。另一个按钮是纯导航使用。然而,当点击第二个按钮时,AngularJS会导致页面刷新,从而触发404。我在函数中删除了一个断点,它正在触发我的函数。如果我执行以下任何操作,它将停止: 如果我删除,则该按钮不会导致页面刷新 如果我注释掉函数中的代码,它不会导致页面刷新 如果我将按钮标记更改为锚定标记(

  • 这是崩溃错误logcat,每次我时钟在我的寄存器btn应用程序崩溃。 我的模拟器是在Android模拟器设备上的2gb ram。 2019-09-22 16:36:39.307 6454-6454/com。康奈克斯。connexsocial E/AndroidRuntime:致命异常:主进程:com。康奈克斯。connexsocial,PID:6454Android系统。所容纳之物Activity

  • 我一直在做一个实用方法来帮助我找到并适当地等待硒中的Webelements。到目前为止,它进展顺利,我有办法尝试各种不同的定位器,等待直到一个webelement被找到,然后等待直到webelement被显示/启用所有的超时和类似的美好事情。 问题是我有时需要在页面重新加载后找到Webelements。我已经阅读了关于“陈旧性”问题的可用解决方案,我知道如何解决它(使用我刚刚找到并点击的旧webe

  • 下面是.java文件中的代码

  • 所以浮点运算是不精确的,但这并不能完全解释这里发生的事情:

  • 所以问题是在主题中。我认为我没有正确理解重新分区的工作。在我的脑海中,当我说时,我希望所有数据都将在工作人员(假设60个工作人员)之间按相等的大小进行分区。 举个例子。我会在不平衡的文件中加载大量数据,比如400个文件,其中20%的文件大小为2Gb,其他80%的文件大小约为1Mb。我有加载此数据的代码: 然后,我希望将原始数据转换为中间对象,过滤不相关的记录,转换为最终对象(带有附加属性),然后按