When sending form by Ajax I recharged the page

Question

When sending form by Ajax I recharged the page

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

my problem is that I have a page with several form to which I intend to make ajax requests so that it does not recharge the page, but I recharged it and I do not know what the reason is, I have investigated and tried in several ways, but none of them turn out to me, this is my code:

$(document).on('ready',function(){
    // function enviar(){

      $('#btn_predio').submit(function(event) {
        alert('entro a la funcion');
        event.preventDefault();  
        // var url = //$(this).attr('action');  
        var datos = $(this).serialize();
      var url = "../../controller/radication_controller.php";                                      

      $.ajax({   
         cache: false,                     
         type: "POST",                 
         url: url,                    
         data: datos,
         success: function(data)            
         {
           $('#btn_predio').reset();
            alert(data);
         }
       });
      // return false;
      });
    // }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form name="frPredio" id="frPredio"  method="post">
  <div class="col-lg-12 form-group"></div>
  <div class="col-lg-12 input-group">
    <div class="col-lg-6 input-group">
      <label for="dirActual" class="col-form-label col-lg-5">Dirección (Actual)</label>
      <input type="text" name="dirActual" class="form-control col-lg-7">
    </div>
    <div class="col-lg-6 input-group">
      <label for="BarrioActual" class="col-form-label col-lg-5">Barrio  (Actual)</label>
      <input type="text" name="BarrioActual" class="form-control col-lg-7">
    </div>
  </div>
  
  <div class="col-lg-12 input-group" >
    <div class="col-lg-5"></div>
    <button type="button" name="btn_predio" id="btn_predio" value="predio" class=" btn btn-danger agregar col-lg-2" >
      <span class="fa fa-floppy-o"></span> Guardar 
    </button>
  </div>
</form>

In the success of the ajax I have an alert that is supposed to stop the flow of jecution, but ignores it and I reload the page.

I have tried several things, but nothing works. I appreciate the help you give me

mysql javascript php ajax

asked by srJJ 25.09.2018 в 03:48

source

3 answers

0

In this code you tested with

$('#btn_predio').on("click", (e) =>  {
    e.preventDefault(); // -> Este codigo ?????
    enviar();      
});

answered by 25.09.2018 в 17:26

0

Try something like this, without the submit:

$(document).on('ready', function() {
                                            $('#boton_submit').click(function() {                     



                                      var url = "controladores/controladora.php";
                                                $.ajax({
                                                    type: "POST",
                                                    url: url,
                                                    data: $("#id_formulario").serialize(),
                                                    success: function(data)
                                                    {
                                                        a = data;

                                                        $('#id_formulario')[0].reset();
                                                    }
                                                });
                                            });

answered by 25.09.2018 в 17:46

Sql Cloud in Android Studio 3.0 Get data from USSD

score 0 · Accepted Answer

Modify your JS code a little bit more:

$(document).ready(() => {

  $('#btn_predio').on("click", (e) =>  {
    enviar();      
  });

});

const enviar = () => {
  alert("Entro en la función enviar");
  const datos = $("#frPredio").serialize();

  $.ajax({   
    cache: false,                     
    type: "POST",                 
    url: "../../controller/radication_controller.php",                    
    data: datos,
    error: function(request, status, error)
    {
      alert("ocurrio un error "+request.responseText)
      console.log(error)
    },
    success: function(data)            
    {
      alert("Hizo el success");
      console.log(data);
    }
  });

}

The first thing I did was to separate the send function and call from a click event on the #btn_predio button. Also add an error handler in case it is giving you an error in the ajax.

I hope it works for you, Regards.