2

Me refiero a confirmar si esta seguro de salir de la pagina actual

tengo un formulario, y quiero preguntar si el formulario tiene algun campo llenado si esta seguro de recargar/salirse la pagina

actualmente estoy usando

window.onbeforeunload = function(e) {
    return "You have some unsaved changes";
};

pero eso funciona aunque no tengo ningun campo llenado

4
  • te refieres a validaciones?, quieres hacer como una pregunta con modal, si es así, te recomiendo usar sweet alert para ventanas de preguta.En cuanto a validar formularios te recomiendo usar la propiedad html5 onsubmit=" nombrefuncionJavascrpit()" en la etiqueta de apertura de form. el 14 mar. 2018 a las 15:07
  • me refiero a confirmar si esta seguro de salir de la pagina actual
    – hubman
    el 14 mar. 2018 a las 15:09
  • 1
    entonces puedes usar el sweet alert, para peguntar si quieres salir, te dejo un ejemplo como respuesta el 14 mar. 2018 a las 15:09
  • Abajo te deje una repuesta, ponlo en pantalla completa para que lo veas. el 14 mar. 2018 a las 15:24

2 respuestas 2

2

Te faltará comprobar, antes de mostrar el mensaje, si ha habido o no cambio en el formulario. Los controles del formulario tienen una propiedad (que depende del tipo de control) en la que se guarda el valor inicial que tenían al generar la página.

En base a eso puedes hacer una función genérica:

function formIsDirty(form) {
for (var i = 0; i < form.elements.length; i++) {
var element = form.elements[i];
var type = element.type;
if (type == "checkbox" || type == "radio") {
  if (element.checked != element.defaultChecked) {
    return true;
  }
}
else if (type == "hidden" || type == "password" ||
         type == "text" || type == "textarea") {
  if (element.value != element.defaultValue) {
    return true;
  }
}
else if (type == "select-one" || type == "select-multiple") {
  for (var j = 0; j < element.options.length; j++) {
    if (element.options[j].selected !=
        element.options[j].defaultSelected) {
      return true;
    }
  }
}
}
 return false;
}

Y en el beforeunload:

window.onbeforeunload = function(e) {
e = e || window.event;  
if (formIsDirty(document.forms["tu_formulario"])) {
// For IE and Firefox
if (e) {
  e.returnValue = "You have unsaved changes.";
}
// For Safari
return "You have unsaved changes.";
}
};
1
  • 1
    puedes poner un ejemplo funcional porfavor
    – hubman
    el 14 mar. 2018 a las 15:32
1

Mira esto es un sweet alert como ejemplo para que lo puedas usar.

$('button').click(function(){

  swal({
    title: "Aviso",
    text: "Esta seguro que desea salir?",
    type: "warning",
    showCancelButton: true,
    confirmButtonClass: "btn-danger",
    confirmButtonText: "Salir",
    cancelButtonText: "Cancelar",
    closeOnConfirm: false,
    closeOnCancel: false
  },
  function(isConfirm) {
    if (isConfirm) {
      location.href ="http://www.pagina1.com";
    } else {
      swal("Cancelado", "Usted esta aqui", "error");
    }
  });

  });
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

<button>Irse</button>

algo asi se me ocurre, Pon en pantalla completa, para que veas como queda.Espero que te sirva. Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.