Home / Questions / 13597
Accepted
Ivxn
Asked: 2020-06-11 13:52:19 +0800 CST 2020-06-11 13:52:19 +0800 CST

How to avoid page redirection in an alert with Javascript and jQuery?

  • 772

When I show a JS alert, it redirects me to the top of my page and all the information of a form is lost and what I want is for it to show the alert but not redirect or reload. How can I avoid the redirection, after accepting the alert? , the alert is the common one, so I have not added any parameters

    $("#btnagregarSIM").click(function() {

      var cantidadTotalSim = $("#txtValorTotalSim").val();
      var cantidadArticulo = $("#txtValorTotalArticulo").val();
      var facturaSim = $("#txtFacturaSIM").val();
      var cantidadSim = $("#txtCantidadsim").val();
      var idSim = $("#cmbSim").val();
      var descripcionSim = $("#cmbSim option:selected").html();

      var x = parseFloat(cantidadTotalSim) + parseFloat(cantidadSim);

      if (x <= cantidadArticulo) {
        if (cantidadTotalSim <= cantidadArticulo) {
          fn_agregarSIM(facturaSim, cantidadSim, idSim, descripcionSim);
        } else {
          alert("Revisa que la cantidad de SIM sea la misma que la cantidad de Articulos")
        }
      } else {
        alert("La cantidad de SIM no puede ser mayor que la cantidad total de articulos.");
      }

    });
javascript

3 Answers

  1. Best Answer

    An alert should not redirect you, what can happen is that the "#btnagregarSIM" button is a submit button and it automatically executes the associated form submission.

    for which you should add the call to preventDefault in the click function as follows

     $("#btnagregarSIM").click(function(event) {

    ...

    if (x <= cantidadArticulo) {
        if (cantidadTotalSim <= cantidadArticulo) {
            fn_agregarSIM(facturaSim, cantidadSim, idSim, descripcionSim);

        } else { 
            alert("Revisa que la cantidad de SIM sea la misma que la cantidad de Articulos");
            event.preventDefault();
        }
    } else { 
        alert("La cantidad de SIM no puede ser mayor que la cantidad total de articulos.");
        event.preventDefault();
    }
  }
    • 5

  2. You must check that the #btnagregarSIM button is not a submit type. In such a case you have to remove the "form" tag or just change the button to an "a" tag.

    • 1

  3. According to the Jquery documentation you should use the preventDefault method to prevent the called event from following its normal behavior.

    https://api.jquery.com/event.preventdefault/

    $( "a" ).click(function( event ) {
  event.preventDefault();
  $( "<div>" )
    .append( "default " + event.type + " prevented" )
    .appendTo( "#log" );
});
    • 0