Send and Remove from database with Jquery

Question

Hello! I recently did another post here but it was poorly explained.

I was wanting to make a form that makes an Insert in the bank and also remove.

I created a small system of titles, so users can prefer the ones they liked the most. It works as follows: The user logs in, searches for the title he likes and when clicking the favorite button is made an Insert, the page reloads and the remove button appears because I made a mysqli_num_rows, to tell whether or not you have a line of the same id of the title and user.

                   <form method="POST">
                   <input type="hidden" value="<?php echo $row["id"]; ?>" name="id_titulo">
                   <?php
                     $amigos = mysqli_query($con,"SELECT * FROM favoritos WHERE usuario='$login_cookie' AND titulo='$id'");
                     $amigoss = mysqli_fetch_assoc($amigos);
                     if (mysqli_num_rows($amigos)>=1 AND $amigoss["favoritado"]=="sim") {
                       ?>
                       <label for="remover" class="remover">
                       <i class="fa fa-heart" aria-hidden="true"></i>
                       </label>
                       	<input type="submit" value="Remover" name="remover" id="remover" hidden>
                         <?php
                       }else{
                         ?>
                         <label for="favoritar" class="favoritar">
                         <i class="fa fa-heart-o" aria-hidden="true"></i>
                         </label>

                       <input type="submit" name="add" value="Favoritar" id="favoritar" hidden>
                       <?php
                     }
                   ?>

                 </form>

<?php


function add(){
  $login_cookie = $_COOKIE['login'];
  	if (!isset($login_cookie)) {
  	  header("Location: index.php");
  	}
    include('conexao.php');


    $id_titulo = $_POST["id_titulo"];
    $ins = "INSERT INTO favoritos (usuario, titulo, favoritado) VALUES ('".$login_cookie."', '".$id_titulo."','sim')";

    if(mysqli_query($con, $ins)) {

  	?>

<script type="text/javascript">
  location.href='titulo.php?id='+id_titulo;
</script>
    <?php
  	} else {
  	    echo "Erro ao favoritar!";
        echo mysqli_error($con);
  	}
}

?>

<?php

  function remove(){
    $login_cookie = $_COOKIE['login'];
    if (!isset($login_cookie)) {
      header("Location: login.php");
    }

    include('conexao.php');

    $id = $_GET['id'];
    $saberr = mysqli_query($con,"SELECT * FROM titulo WHERE id='$id'");
    $saber = mysqli_fetch_assoc($saberr);
    $titulo = $saber['id'];

    $ins = "DELETE FROM favoritos WHERE usuario='$login_cookie' AND titulo='$titulo'";
    $conf = mysqli_query($con, $ins) or die(mysqli_error());
    if ($conf) {
      header("Location: titulo.php?id=".$id);
    }else{
      echo "<h3>Erro ao remover...</h3>";
    }
  }

?>

This is code with pure PHP, but it reloads the page every time I favorite and remove, and I wanted at click time it not reload the whole page. I had even managed to make an Internet with AJAX, watching some videos on youtube, but I couldn’t remove it. I wanted to know how I would do for now remove and if the condition I made can be used in Jquery.

Answer 1

Well, the business is to use ajax even, with jquery it gets simple, but your code ta bad to understand

put an id in your form, <form id='f1'> //php form file.

2º then separates into two files, the one with the form and the php that will receive the data//file received_form.php

now the part you asked:

<script> $(document).ready(function(){ $('button').on('click',function(){ $.ajax({ type: 'post', url: 'recebe_form.php', success: function(msg){ $('#f1').html(msg); //aqui o msg é o retorno do php, que será o botao que deve ficar visivel } }); });
}); </script>

ending in php, will not use function

if($_POST){ //faz o select para ver se existe o favorito ou nao if($existe){ echo "<button id='remove'>Remove<button>"; //voce nao vai precisar colocar o if else que tava la no form, assim o codigo fica mais separado }else{ echo "<button id='favoritar'>Favoritar<button>"; }
}

It is not the most beautiful code in the world, but it works, already gave to have an idea I think, until more.