Ho un file php contenente una form di ricerca nel database (creato tramite phpmyadmin). Questa form si trova all'interno di un collapse bootstrap, quindi quando clicco sul pulsante submit la pagina viene ricaricata e il collapse viene chiuso, per vedere il risultato della ricerca devo riaprirlo. Vorrei evitare proprio questa cosa.
Ho scritto uno script ajax ma ancora non riesco a farlo funzionare:
Il codice appena scritto si trova in un file esterno ajax.js, che ho ovviamente incluso nel file principale php (aggiungiLibro.php).
Il file aggiungiLibro.php è il seguente:
Quindi con il pulsante submit dovrei inviare le informazioni al file esterno cercaISBN.php tramite ajax.
Il file cercaISBN.php è il seguente:
Il tutto però non funziona. O meglio, se clicco sul pulsante submit non mi ricarica la pagina ma non succede niente. Cosa sbaglio? Come posso fare?
Ho scritto uno script ajax ma ancora non riesco a farlo funzionare:
JavaScript:
$(document).ready(function(){
$('#search-button').on('click', function(e){
e.preventDefault();
if($(this).hasClass("disabled")) {
return false;
}
else {
isbn=$(this).serialize();
$.ajax({
//Dove devo inviare i dati recuperati dal form?
url: "php/cercaISBN.php",
//imposto il tipo di invio dati (GET O POST)
type: "POST",
//Quali dati devo inviare?
data: { isbn: $("#search-input").val() }
})
}
})
});Il file aggiungiLibro.php è il seguente:
HTML:
<?php
session_start();
?>
<!doctype html>
<html lang="en">
<head>
<title>NomeSito - Aggiungi</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- my CSS -->
<link href="css/aggiungiLibro.css" rel="stylesheet">
<script type="text/javascript" src="js/aggiungiLibro.js"></script>
<!-- Icons fontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<?php include('php/testLibro.php') ?>
<?php include('php/testLibro_db.php') ?>
<!--funzione per chiudere collapse button attuale quando ne apro uno diverso -->
<script>
$(document).on('click','#bott',function(){
$('.collapse').collapse('hide');
})
</script>
</head>
<body>
<!-- Titolo -->
<header>
<div class="container" id="titolo">
<p class="text-center" style="color:rgba(24, 162, 167);"> Aggiungi un nuovo libro!
<br>
Seleziona una modalità di inserimento:
</div>
</header>
<br>
<br>
<div class="text-center" id="bott">
<p>
<button class="bottone-isbn btn-lg btn-info" type="button" data-toggle="collapse" data-target="#demo1" aria-expanded="false" aria-controls="demo1">
ISBN
</button>
</p>
</div>
<div class="collapse" id="demo1">
<br>
<br>
<div class="card card-body">
<ul>
<h1><li>ISBN: </li></h1>
<br>
<br>
<div class="container" id="cerca">
<div class="search-container">
<form name="search-form" id="formISBN">
<input id="search-input" size="40" type="text" placeholder="Inserisci ISBN..." name="isbn">
<button name="invio" id="search-button" type="submit"><i class="fas fa-check" style="color:white;"></i></button>
</form>
</div>
</div>
<h1 class="text-center">Libri trovati:</h1>
<br>
<script type="text/javascript" src="js/ajax.js"></script>
</ul>
</div>
</div>
</body>
</html>Il file cercaISBN.php è il seguente:
PHP:
<?php
session_start();
$db = mysqli_connect('localhost','root','','DBsito');
if (!$db) {
die('Could not connect to database: ' . mysqli_error());
}
$db_select = mysqli_select_db($db, 'DBsito');
$isbn = mysqli_real_escape_string($db, $_POST['isbn']);
$query="SELECT * FROM libri_DB WHERE libri_DB.isbn = '$isbn'";
$result=mysqli_query($db, $query);
$result_check=mysqli_num_rows($result);
if ($result_check > 0) {
for ($i=1; $i <= $result_check; $i++) {
$row=mysqli_fetch_assoc($result);
$libro=$row["nome"];
//layout ricerca
$risultato='
<div class="container"> <!--container singolo libro -->
<!-- riga 1 -->
<div class="row mb-5 mb-lg-0 mt-5" id="libro">
<!-- tabella di una sola riga e due colonne -->
<div class="column"> <!-- colonna con immagine -->
<img class="card-img" src="img/libri/'.$row["immagine_libro"].'" alt=""/>
</div>
<div class="column"> <!-- colonna con info -->
<div class="card-body">
<h2 class="card-title text-white ml-4 mt-3 mb-3">'.$row["nome"].'</h2>
</div>
<div class="card-body" id="descrizione"> <!-- lista caratteristiche -->
<ul id="dati-libro">
<li class="card-text text-white"><u>Autore:</u> '.$row["autore"].'</li>
<li class="card-text text-white"><u>Anno pubblicazione:</u> '.$row["data_pubblicazione"].'</li>
<li class="card-text text-white"><u>Casa editrice:</u> '.$row["editore"].'</li>
<li class="card-text text-white"><u>Numero di pagine:</u> '.$row["pagine"].'</li>
<li class="card-text text-white"><u>ISBN:</u> '.$row["isbn"].'</li>
</ul>
</div>
</div>
</div>
</div>';
print $risultato;
}
}
mysqli_close($db);
?>Il tutto però non funziona. O meglio, se clicco sul pulsante submit non mi ricarica la pagina ma non succede niente. Cosa sbaglio? Come posso fare?
