Fazer cadastro automático

[Biel. 9]

Olá pessoal. EX1 é um banner aleatório em javascript e está funcionando normalmente. Quero muito fazer o seguinte: Toda
vez que o banner aparecer não importa qual banner, o cadastro seja feito automaticamente pegando  banner_nome  e  banner_link e cadastrando na tabela_aprendiz conforme exemplo abaixo . EX2 o código é em php para cadastrar automaticamente  banner_nome  e  banner_link

tabela_aprendiz
banner_nome     banner_link
banner1   link1.php
banner2   link2.php
banner3   link3.php
banner2   link2.php
banner4   link4.php
banner4   link4.php
banner4   link4.php
banner1   link1.php
banner3   link3.php

....

EX1

<style>
.aprendiz {text-align: center;}
.bannerSize {width:100px; height:100px; } 
.bannerSize:not([active=true]) {display:none; }
</style>

<div class="aprendiz">
<img src="banner1.png" class="bannerSize">
<img src="banner2.png" class="bannerSize">
<img src="banner3.png" class="bannerSize">
<img src="banner4.png" class="bannerSize">
</div>

<script>
function showSlides(containerId, intervalTime) {
  let elementSlider = document.querySelector(containerId);
  let intervalRef = setInterval(() => setActiveSlide(containerId), intervalTime);
  
  enableSlideMouseEvents(containerId, elementSlider, intervalRef, intervalTime);
}

function setActiveSlide(container) {
  let images = document.querySelectorAll(`${container} img`);
  
  let removeActiveAttribute = () => {
    images.forEach(image => image.removeAttribute("active"));
  };
  
  let toggleSlide = (indexImageToActive) => {
    removeActiveAttribute();
    images[indexImageToActive].setAttribute("active", true);
  }; 

  let indexActive = Math.floor(Math.random() * images.length);

  toggleSlide(indexActive);
}
   
showSlides(".aprendiz", 5000);

</script>

....
EX2

<?php 
$ggCon = mysqli_connect("localhost", "root", "123", "bd_teste" ); 
if(mysqli_connect_error()){
  echo "falha na conexão". mysqli_connect_error();
}
else{ echo "CONEXAO OK"; }
?>

<?php  
$phpSelf = $_SERVER['PHP_SELF'];
if(isset($_POST["enviar"])){

@$banner_nome =  $_POST['banner_nome']; 
@$banner_link =  $_POST['banner_link'];

$ggSql = mysqli_query($ggCon, "INSERT INTO  tabela_aprendiz (
banner_nome  , banner_link 
)VALUES(
'".$banner_nome."'  ,  '".$banner_link."'  )");
} 
?>

<form action="<?php echo $phpSelf;?>" method="post" name="form1"  id="form1" autocomplete="off">

banner_nome
<input type="text" required name="banner_nome"  value=""> 

banner_link
<input type="text" required name="banner_link"  value=""> 

<input type="submit" name="enviar"  value="Salvar">
</form>

 

[Frank K Hosaka 0]

Essa é a minha sugestão

ex1.php

<img src="banner1.png" onclick="gravar('baner1','www1.com.br')">
<img src="banner2.png" onclick="gravar('baner2','www2.com.br')">
<img src="banner3.png" onclick="gravar('baner3','www3.com.br')">
<img src="banner4.png" onclick="gravar('baner4','www4.com.br')">
<div id=teste></div>
<script>
  async function gravar(nome,link){
    formData=new FormData();
    formData.append('nome',nome)
    formData.append('link',link)
    fetch("ex2.php",{method:"POST",body: formData})
    .then(function(response){return response.text()})
    .then(function(body){teste.innerHTML=body})
  }
</script>
======================================================================

ex2.php

<?php 
$ggCon=mysqli_connect("localhost","root","","laravel"); 
$nome=$_POST['nome']; 
$link=$_POST['link'];
mysqli_query($ggCon,"INSERT INTO tabela_aprendiz 
 (nome,link) VALUES ('$nome','$link')");
$query=mysqli_query($ggCon,"select * from tabela_aprendiz order by id desc");
while($row=$query->fetch_assoc()){
    echo $row['id']." ".$row['nome'].$row['link']."<br>";}