AJAX POST WITHOUT REFRESH

0

I want to make a post without refresh, where it opens a modal confirmation.

But it is re-updating the site when the post is submitted and when the e.preventDefault(); is placed the post does not send, because in the confirmation modal it does not load the data.

<form id="addEvent" method="post" action="">
      <h2>Data</h2>
      <input type="date" name="date" id="date" >
               <div class='col-sm-4'>
                </div>
      <h2>Observações</h2>
      <textarea placeholder="Observações" name="notes" cols="30" rows="10"></textarea>
      <h2>Matéria</h2>
      <select name="tags" id="mat" >
          <?php 

          $add = new USER();

                      $stmt = $add->runQuery("SELECT * FROM materias ORDER BY id_mat");
        $stmt->execute();
        $m=$stmt->fetchAll(PDO::FETCH_ASSOC);
        foreach($m as $mat) {
          $materia = $mat['materia'];
          ?>
            <option  value="<?php echo $materia;?>"><?php echo $materia;?></option>   
            <?php }?>
        </select>
        <br>
        <br>
        <input type="submit" class="o-btn js-event__save md-trigger md-setperspective" data-modal="modal-18"  id="dataform" name="dataform" value="AGENDAR">
    </form>

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
       $("#dataform").click(function(){
       $.ajax({
           dataType:'html',
           url:"ag-monitoria.php",
           type:"POST",
           data:$(this).serialize(),

           beforeSend: function(data){ 

            }, success:function(data){
                alert("Dados Enviados");
            }, complete: function(data){}


           });


            });
    </script>
    
asked by anonymous 13.09.2018 / 15:34

1 answer

3

You are using the wrong event to place the order.
Instead use onclick should use onsubmit .

The onsubmit event is called from the moment you submit the form by clicking the mouse.

$(()=>{
    $('#myForm').on('submit', (e)=>{
        $.ajax({
            dataType:'html',
            url:"ag-monitoria.php",
            type:"POST",
            data:$(this).serialize(),

            beforeSend: function(data){ 

            }, success:function(data){
                alert("Dados Enviados");
            }, complete: function(data){}
        });

        e.preventDefault();

    });
});
  

References: :

     

onsubmit documentation

     

(e)=>{} equals function(e){ }

     

Arrow Functions article

    
13.09.2018 / 16:18