Почему на этапе загрузки сайта нажмите кнопку "Запустить загрузку"?
Я использую jQuery show() и hide() функции на divs, чтобы кодировать или моделировать разные последовательные формы.
Я сделал кнопку, которая скрывает div при нажатии. Странно, что после нажатия кнопки страница перезагрузится и вернется к div, показанному сначала $(document).ready().
Что еще более странно, эта проблема, упомянутая выше, не будет выполняться, если вы нажмете в тексте навигационной панели, прежде чем нажимать кнопку "континуум" (тогда ожидаемая страница появится без перезагрузки и показывая первую страницу снова).
Здесь можно просмотреть форму:
http://registropsicologos.maricelaaguilarflores.com:20791
Синяя кнопка отвечает за проблему перезагрузки страницы, если вы не нажмете "Визуализар" на панели навигации, прежде чем нажимать "континуум".
Я не могу понять, почему это происходит, я использовал .show() и .hide() раньше, и эта проблема не возникала.
Вот соответствующий код 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?"
<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
В теге <button> используется функция Submit по умолчанию. Таким образом, ваша страница отправляет форму при нажатии кнопки, и это выглядит как обновление страницы. Чтобы обойти это, вы можете использовать тег input
<input type="button" class="btn btn-primary btnSeccion" id="btnSeccion3" value="Continuar"/>
сделать тот же эффект. Или вы можете отменить отправку нажатием кнопки "Обработчик событий" (если это нужно):
$(".btnSeccion").click(function(event) {
btnMostrarSeccion($(this));
event.preventDefault();
})
Ответ 2
Простейшим решением является просто добавление простого элемента "type" к элементу кнопки, например:
<button type="button" class="btn btn-default" onclick="...">My Button</button>
При указании того, что элемент кнопки определенно относится к кнопке type =, он перестанет действовать как кнопка отправки и не будет отправлять (таким образом, обновлять) текущую страницу.
Ответ 3
Следующий код (из шаблона начальной загрузки) не может быть заменен на тег <input > . У этой проблемы есть такая же проблема, когда она работает на Chrome как Samsung S4 и работает на моем самом Samsung S5. Щелчок по кнопке, чтобы развернуть меню, заставляет страницу возвращаться назад. Я не уверен, что это произойдет и в других браузерах и моделях, но подозревайте, что это будет.
<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>
Я исправил это, просто добавив onclick="return false;" в тег кнопки.
Ответ 4
Я сталкиваюсь с этой проблемой много раз.
Использование angular, бутстрапа или любого другого js-плагина
когда-то он отлично работает на настольном браузере, но не может служить цели для мобильных браузеров или смартфонов с сенсорным экраном.
По умолчанию теги кнопок имеют поведение отправки.
Самое простое решение - использовать type="button"
Это решит проблему, иначе используйте js, чтобы прекратить отправку страницы.
Ответ 5
Вещь таких элементов, как <button>, имеет действие по умолчанию для отправки, если вы хотите заставить их действовать как обычная кнопка, укажите type="button" по умолчанию type="submit"
Ответ 6
Без jquery (вдохновленный Sreenath H B):
Настройка кликмена:
submitButton.addEventListener("click", onSubmitClicked);
Предотвращение перезагрузки:
function onSubmitClicked(event){
event.preventDefault();
// Your code
}
