Submit senza ricaricare la pagina

asbarabungi

Nuovo Utente
1 Lug 2021
1
0
1
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:
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 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:
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>
Quindi con il pulsante submit dovrei inviare le informazioni al file esterno cercaISBN.php tramite ajax.
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?
 

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
Non so se nel mentre hai già risolto.

Nella chiamata ajax ti manca la gestione degli eventi. Vedi le proprietà success, error o complete, oppure i metodi done(), fail() o always().

Alla chiamata ajax dovrai aggiungere almeno un callback di risposta dal server, cioè una funzione che viene eseguita quando il server restituisce qualcosa. In quella funzione dovrai decidere cosa vuoi farne di ciò che è stato restituito, ad esempio riversarlo in un div.

In alternativa puoi usare il metodo load() come scorciatoia della tua chiamata ajax. Questo infatti ti permette di caricare i dati dal server e riversarli automaticamente dentro l'elemento selezionato.

Fai sapere, buon proseguimento.
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Prendere i valori da un input type="text" senza usare il bottone "submit" PHP 2
unkus_nob valori checkbox di form html in file php senza submit PHP 1
S Form in IE senza tasti submit???? HTML e CSS 6
S [PHP] Come mantenere selezionato checkbox dopo aver cliccato submit PHP 7
R [WordPress] Inserire campi aggiuntivi ad un Submit Form già dato dal template (front-end) WordPress 0
spider81man [PHP] Pulsante SUBMIT per download diretto dei file PHP 9
bianca_dimulescu [Javascript] Disabilitare due bottoni di submit in base al radiobutton selezionato Javascript 1
L [PHP] Distinguere submit da reload. PHP 2
michela90 [PHP] Refresh page on submit - Form con Swiftmailer PHP 14
A [Javascript] [RISOLTO] Doppio "submit", in uno stesso "Form" , che puntino ad "action" diversi Javascript 1
bubino8 [PHP] Auto Submit form con dati PHP 7
gandalf1959 [PHP] refresh della pagina dopo submit PHP 3
S [PHP] Mantenere selezionato il valore scelto dopo submit PHP 16
asevenx [PHP] Errore tasto submit per invio dati non funziona PHP 5
M Problema refresh della pagina dopo il submit? HTML e CSS 4
F Auto submit form jQuery 1
P Unire il tasto submit anzicchè averlo in due file PHP 2
MrClog submit o click Jquery jQuery 0
otto9due Funzione disabilita submit con checkbox privacy. Javascript 8
L Comportamento anomalo dei button type submit PHP 1
M Modulo con 2 pulsanti submit PHP 5
A Apertura finestra modale al submit Ajax 0
J Bottone submit mi restituisce errore 404 page not found PHP 7
E [risolto] Like Submit PHP 2
F 2 select ed una submit PHP 5
F unico submit per più select PHP 2
J Form non registra i submit Javascript 4
F [risolto] ancora name sul submit HTML e CSS 3
G Help!!! ciclo submit automatico per ogni record mysql PHP 15
Task Mc Problema submit con safari HTML e CSS 9
I Passare dei valori con submit (carrello) PHP 1
ivarello Un Submit due Form Javascript 5
I disabilitare tasto dopo submit PHP 10
I Submit in base alla selezione PHP 1
M sostituire bottone con onchange submit Javascript 7
ivarello Submit attraverso href PHP 7
I Problema Pulsanti Html e PHP, due submit che aggiornano la pagina .. PHP 0
G [jQuery] form richiamato due volte al click sul submit jQuery 6
P Checkbox, Pulsante submit e Array PHP 1
anton Recaptcha invia dati al submit PHP 14
M form.submit() non funziona con chrome Javascript 8
M php submit ad un'altra pagina web PHP 8
Vale2 PopUp al submit del form Snippet Javascript 0
L Passaggio valori form prima e dopo il submit PHP 20
C Problema con redirect dopo submit PHP 12
B Metodo POST prelevare VALUE da tasto SUBMIT PHP 2
M disabilitare tasto submit dopo invio Javascript 0
M submit dati PHP 1
L [PHP] Recupero valore dopo il submit PHP 1
A Invio più form con singolo submit Javascript 0

Discussioni simili