Counter button with Update

Question

I’m having trouble making a javascript button to perform an update without refreshing the page, at the moment it is not entering in the bank and is doing refresh hehehe

in index.php

<form>
    <button data-id='$futid' class='botao-olho' style='background-color: red;color:#fff'><i class="far fa-thumbs-up"></i>Sim</button>
</form>
<script type="text/javascript">
    //pega-se o botão desejado e arzena na variável

    $(".botao-olho").on("click", function(){ 
        var $this = $(this); 
        $.ajax({ 
            url: "update_intencao.php", 
            data: {id: $this.data("id")}, 

        }); 
    });
</script> 

Update.php

<?php     

 include("conexao.php"); 

 $id = $_POST['id']       
 $sql3 = "UPDATE fifa19futdados set intencoes = intencoes + 1 where Futbin_ID = $id";

 mysqli_query($conexao,$sql3);   

 ?>

If it’s not too much to ask, I would also like after the action it would disappear the button and appear a message, no refresh.

Thank you!

Answer 1

Without much modification to your code or checking the update return, an option would be:

<script type="text/javascript">
$(".botao-olho").on("click", function(){ 
    var $this = $(this); 
    $.ajax({ 
        url: "update_intencao.php", 
        data: {id: $this.data("id")}, 
        success: function(response) {
            $this.remove();
        }

    }); 
});

However, it is advised that you adopt a communication protocol to treat errors such as JSON. So your uodate_intencao.php can return structured responses to javascript.