0

como puedo preguntar antes de enviar ?

Quiero enviar un formulario, pero antes quiero preguntar si esta seguro, quiero hacerlo con la libreria sweet, o solo funciona para peticiones ajax?

$('.enviarClick').click(function(e) {
  e.preventDefault();
  var form = $(this).parents('form');
  swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    closeOnConfirm: false
  }, function(isConfirm) {
    if (isConfirm) form.submit();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<form action="/evaluacion/crearEvaluacion" method="post" onsubmit="return validarSiNumero();" id='enviarClick'></form>

1

1 respuesta 1

2

@hubman respondiendo a tu pregunta: Como puedo preguntar antes de enviar ?

La cancelación del envío de un formulario se puede realizar de varias formas todo depende de que camino quieras usar.

  • Prevenir la ejecución del formulario capturando el click del input/boton con tipo submit y usando preventDefault.

function enviar() {
  alert('enviado');
}

function preguntar(event) {
  var opcion = confirm("Desea enviar el formulario");
  if(!opcion) {
    event.preventDefault();
  }
}
<form action="javascript: enviar()">
  <button type="submit" onclick="preguntar(event)">
    Enviar
  </button>
</form>

Nota: este método tiene fallas ya que no captura otros eventos como el keyDown si el usuario presiona la tecla Enter.

  • Eliminar el atributo action del formulario para evitar envios accidentales

function enviar(){
 var opcion = confirm('Desea enviar el formulario ?');

  if(opcion) {
    alert('Enviado');
  }
}
<form>
 <button onclick="enviar()">
   Enviar
 </button>
</form>

Nota aunque esta solución llega a ser mas elegante, se necesitan más conocimientos para poder enviar el formulario. Ya sea por AJAX capturando los valores del formulario o incluyendo el atributo action por javascript y lanzando el envento submit posteriormente.

Volviendo a tu ejemplo sería la opción de ejecutarlo en el onclick y hacer la validación en elonsubmity de hecho está correcto hacerlo ahí. Lo que falla no es la lógica de preguntar o validar si no el uso de la librería sweet.

function esNumero(value) {
  return value / value === 1;
}

function validar(event, form) {
  var inputs = $(form).serializeArray();
  var numero = inputs.find(input => input.name === 'numero' );
  return esNumero(numero.value); // && otras validaciones;
}

function preguntar(event) {
  event.preventDefault();
  swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    icon: "warning",
    buttons: {
      cancel: {
        text: "Cancel",
        value: null,
        visible: true,
        className: "",
        closeModal: true,
      },
      confirm: {
        text: "Yes, delete it!",
        value: true,
        visible: true,
        className: "",
        closeModal: true
      }
    }
  }).then(function(value) {
     var form = $('#miFormulario');
    if (value) form.submit();
  });

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<form action="javascript: alert('Enviado')" method="post" onsubmit="validar(event, this)" id="miFormulario">
  <label>Numero</label>
  <input type="text" name="numero" />
  <!-- type como button y no como submit -->
  <input type="button" onclick="preguntar(event)" value="Enviar" />
</form>

Había varios errores, ya que habian cambiado la API con la últimas versiones.

Esto pasa porque usas el link de la CDN hacia la última versión y no una versión específica.

Tu Respuesta

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

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