salvare testo chat

Imperor

Utente Attivo
25 Nov 2010
90
2
8
Roma
www.fcfclean.it
buongiorno sto tentando di creare una chat sia per utenti registrati e utenti guest cioè non registrati per ora mi interessa solo per gli utenti registrati la sessione è id non riesco a capire dove sbaglio quando si scrive nella tex area non salva nulla :( chiedo aiuto grazie
Codice:
  </div>
    <script>
    var name = document.getElementById('name').value;
    var id = document.getElementById('id').value;
    var message = document.getElementById('message').value;

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'save_data.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // Callback dopo aver ricevuto la risposta dal server
        console.log(xhr.responseText);
      }
    };
    xhr.send('name=' + name + '&id=' + id + '&message=' + message);
       
    </script>
    <div class="col-sm-8 text-left">
      <h1>Welcome <?= $rows['name'] ?></h1>
      <div class="panel panel-default" style="height: 600px;">
                    <div style="height:10px;"></div>
                    <span style="margin-left:10px;">Welcome to Chatroom</span><br>
                    <span style="font-size:10px; margin-left:10px;"><i>Note: Avoid using foul language and hate speech to avoid banning of account</i></span>
                    <div style="height:10px;"></div>
                    <div id="message" style="margin-left:10px; max-height:320px; overflow-y:scroll;">
                   
                    </div>
                </div>
     
     
     
      
 <form action="home.php" method="post" enctype="multipart/form-data">
        <div class="d-flex flex-row add-comment-section mt-4 mb-4"><img src="uploads/<?=$rows['p_p']?>"  alt="" class="rounded-circle p-1 bg-primary" width="38"></li>&nbsp;<input type="text" id="message" class="form-control" placeholder="Type message...">
       <input type="hidden" id="name" value="<?=$rows['name']?>">
        <button class="btn btn-success" type="submit" id="message" value="<?=$rows['id']?>">
        <span class="glyphicon glyphicon-comment"></span> Send
        </button>
        </span></form></div>
       
    </div>
    ---------------------------------------
   
    <?php
// Connessione al database
$mysqli = new mysqli('localhost', 'root', '', '********');

// Controllo connessione
if ($mysqli->connect_errno) {
    echo "Connessione al database fallita: " . $mysqli->connect_error;
    exit();
}

// Recupero i dati dalla richiesta AJAX
$name = $_POST['name'];
$id = $_POST['id'];
$message = $_POST['message'];

// Esecuzione dell'istruzione SQL per inserire i dati nel database
$sql = "INSERT INTO chat (name, id, message) VALUES ('$name', '$id', '$message')";

if ($mysqli->query($sql) === TRUE) {
    echo "Dati salvati con successo nel database";
} else {
    echo "Errore durante il salvataggio dei dati: " . $mysqli->error;
}

// Chiusura della connessione al database
$mysqli->close();
?>
 
Ultima modifica:

Fra_23

Utente Attivo
4 Mag 2021
40
4
8
Il problema principale nel tuo codice è che stai cercando di ottenere i valori degli elementi HTML al momento del caricamento della pagina. Tuttavia, è necessario ottenere questi valori quando l'utente compila il modulo e invia i dati. Inoltre, stai usando lo stesso ID ("message") per più di un elemento HTML, il che è invalido. Dovresti usare ID univoci per ciascun elemento. Ecco una correzione al codice:


HTML:
<div class="col-sm-8 text-left">
    <h1>Welcome <?= $rows['name'] ?></h1>
    <div class="panel panel-default" style="height: 600px;">
        <div style="height:10px;"></div>
        <span style="margin-left:10px;">Welcome to Chatroom</span><br>
        <span style="font-size:10px; margin-left:10px;"><i>Note: Avoid using foul language and hate speech to avoid banning of account</i></span>
        <div style="height:10px;"></div>
        <div id="messages" style="margin-left:10px; max-height:320px; overflow-y:scroll;">
            <!-- Qui verranno visualizzati i messaggi -->
        </div>
    </div>
   
    <form id="chatForm" action="save_data.php" method="post" enctype="multipart/form-data">
        <div class="d-flex flex-row add-comment-section mt-4 mb-4">
            <img src="uploads/<?=$rows['p_p']?>" alt="" class="rounded-circle p-1 bg-primary" width="38">
            <input type="text" name="message" class="form-control" placeholder="Type message...">
            <input type="hidden" name="name" value="<?=$rows['name']?>">
            <button class="btn btn-success" type="submit" value="<?=$rows['id']?>">
                <span class="glyphicon glyphicon-comment"></span> Send
            </button>
        </div>
    </form>
</div>

<script>
    document.getElementById("chatForm").addEventListener("submit", function(event) {
        event.preventDefault(); // Previene il comportamento predefinito del submit del modulo
       
        var formData = new FormData(this); // Crea un oggetto FormData con i dati del modulo
       
        var xhr = new XMLHttpRequest();
        xhr.open('POST', this.action, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // Callback dopo aver ricevuto la risposta dal server
                console.log(xhr.responseText);
                // Puoi anche aggiornare l'interfaccia utente per visualizzare il nuovo messaggio appena inviato
                document.getElementById("messages").innerHTML += formData.get("name") + ": " + formData.get("message") + "<br>";
            }
        };
        xhr.send(formData);
    });
</script>

In questa versione corretta del codice:

- Ho rinominato l'ID dell'elemento input del messaggio in "messages" per renderlo unico.
- Ho aggiunto un evento di ascolto al modulo del modulo di chat per catturare l'invio del modulo.
- Quando il modulo viene inviato, viene impedito il comportamento predefinito (l'invio della richiesta HTTP).
- I dati del modulo vengono raccolti con `FormData` e inviati tramite richiesta AJAX.
- Dopo aver inviato con successo il messaggio al server, la risposta viene elaborata per eventuali azioni di visualizzazione aggiuntive (qui ho semplicemente stampato la risposta nella console e aggiunto il messaggio inviato all'interfaccia utente).

Dimmi se funziona!
 
  • Like
Reactions: Imperor

Imperor

Utente Attivo
25 Nov 2010
90
2
8
Roma
www.fcfclean.it
Il problema principale nel tuo codice è che stai cercando di ottenere i valori degli elementi HTML al momento del caricamento della pagina. Tuttavia, è necessario ottenere questi valori quando l'utente compila il modulo e invia i dati. Inoltre, stai usando lo stesso ID ("message") per più di un elemento HTML, il che è invalido. Dovresti usare ID univoci per ciascun elemento. Ecco una correzione al codice:


HTML:
<div class="col-sm-8 text-left">
    <h1>Welcome <?= $rows['name'] ?></h1>
    <div class="panel panel-default" style="height: 600px;">
        <div style="height:10px;"></div>
        <span style="margin-left:10px;">Welcome to Chatroom</span><br>
        <span style="font-size:10px; margin-left:10px;"><i>Note: Avoid using foul language and hate speech to avoid banning of account</i></span>
        <div style="height:10px;"></div>
        <div id="messages" style="margin-left:10px; max-height:320px; overflow-y:scroll;">
            <!-- Qui verranno visualizzati i messaggi -->
        </div>
    </div>
  
    <form id="chatForm" action="save_data.php" method="post" enctype="multipart/form-data">
        <div class="d-flex flex-row add-comment-section mt-4 mb-4">
            <img src="uploads/<?=$rows['p_p']?>" alt="" class="rounded-circle p-1 bg-primary" width="38">
            <input type="text" name="message" class="form-control" placeholder="Type message...">
            <input type="hidden" name="name" value="<?=$rows['name']?>">
            <button class="btn btn-success" type="submit" value="<?=$rows['id']?>">
                <span class="glyphicon glyphicon-comment"></span> Send
            </button>
        </div>
    </form>
</div>

<script>
    document.getElementById("chatForm").addEventListener("submit", function(event) {
        event.preventDefault(); // Previene il comportamento predefinito del submit del modulo
      
        var formData = new FormData(this); // Crea un oggetto FormData con i dati del modulo
      
        var xhr = new XMLHttpRequest();
        xhr.open('POST', this.action, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // Callback dopo aver ricevuto la risposta dal server
                console.log(xhr.responseText);
                // Puoi anche aggiornare l'interfaccia utente per visualizzare il nuovo messaggio appena inviato
                document.getElementById("messages").innerHTML += formData.get("name") + ": " + formData.get("message") + "<br>";
            }
        };
        xhr.send(formData);
    });
</script>

In questa versione corretta del codice:

- Ho rinominato l'ID dell'elemento input del messaggio in "messages" per renderlo unico.
- Ho aggiunto un evento di ascolto al modulo del modulo di chat per catturare l'invio del modulo.
- Quando il modulo viene inviato, viene impedito il comportamento predefinito (l'invio della richiesta HTTP).
- I dati del modulo vengono raccolti con `FormData` e inviati tramite richiesta AJAX.
- Dopo aver inviato con successo il messaggio al server, la risposta viene elaborata per eventuali azioni di visualizzazione aggiuntive (qui ho semplicemente stampato la risposta nella console e aggiunto il messaggio inviato all'interfaccia utente).

Dimmi se funziona!
grazie funziona alla grande :)
 

Imperor

Utente Attivo
25 Nov 2010
90
2
8
Roma
www.fcfclean.it
Il problema principale nel tuo codice è che stai cercando di ottenere i valori degli elementi HTML al momento del caricamento della pagina. Tuttavia, è necessario ottenere questi valori quando l'utente compila il modulo e invia i dati. Inoltre, stai usando lo stesso ID ("message") per più di un elemento HTML, il che è invalido. Dovresti usare ID univoci per ciascun elemento. Ecco una correzione al codice:


HTML:
<div class="col-sm-8 text-left">
    <h1>Welcome <?= $rows['name'] ?></h1>
    <div class="panel panel-default" style="height: 600px;">
        <div style="height:10px;"></div>
        <span style="margin-left:10px;">Welcome to Chatroom</span><br>
        <span style="font-size:10px; margin-left:10px;"><i>Note: Avoid using foul language and hate speech to avoid banning of account</i></span>
        <div style="height:10px;"></div>
        <div id="messages" style="margin-left:10px; max-height:320px; overflow-y:scroll;">
            <!-- Qui verranno visualizzati i messaggi -->
        </div>
    </div>
  
    <form id="chatForm" action="save_data.php" method="post" enctype="multipart/form-data">
        <div class="d-flex flex-row add-comment-section mt-4 mb-4">
            <img src="uploads/<?=$rows['p_p']?>" alt="" class="rounded-circle p-1 bg-primary" width="38">
            <input type="text" name="message" class="form-control" placeholder="Type message...">
            <input type="hidden" name="name" value="<?=$rows['name']?>">
            <button class="btn btn-success" type="submit" value="<?=$rows['id']?>">
                <span class="glyphicon glyphicon-comment"></span> Send
            </button>
        </div>
    </form>
</div>

<script>
    document.getElementById("chatForm").addEventListener("submit", function(event) {
        event.preventDefault(); // Previene il comportamento predefinito del submit del modulo
      
        var formData = new FormData(this); // Crea un oggetto FormData con i dati del modulo
      
        var xhr = new XMLHttpRequest();
        xhr.open('POST', this.action, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // Callback dopo aver ricevuto la risposta dal server
                console.log(xhr.responseText);
                // Puoi anche aggiornare l'interfaccia utente per visualizzare il nuovo messaggio appena inviato
                document.getElementById("messages").innerHTML += formData.get("name") + ": " + formData.get("message") + "<br>";
            }
        };
        xhr.send(formData);
    });
</script>

In questa versione corretta del codice:

- Ho rinominato l'ID dell'elemento input del messaggio in "messages" per renderlo unico.
- Ho aggiunto un evento di ascolto al modulo del modulo di chat per catturare l'invio del modulo.
- Quando il modulo viene inviato, viene impedito il comportamento predefinito (l'invio della richiesta HTTP).
- I dati del modulo vengono raccolti con `FormData` e inviati tramite richiesta AJAX.
- Dopo aver inviato con successo il messaggio al server, la risposta viene elaborata per eventuali azioni di visualizzazione aggiuntive (qui ho semplicemente stampato la risposta nella console e aggiunto il messaggio inviato all'interfaccia utente).

Dimmi se funziona!
va alla grande sto tentando di capire come fare per lo scroll dei messaggi :)
 
Discussioni simili
Autore Titolo Forum Risposte Data
C Salvare dati form in un file di testo PHP 1
L salvare e caricare files di testo con amfphp PHP 1
F Leggere e salvare caratteri da file di testo PHP 2
emanuelevt Modificare e salvare testo Ajax 21
M Come aprire e salvare file di testo con Javascript? Javascript 3
P C# Salvare una colonna del DataGridView XML 0
E fpdf salvare e aprire il file PHP 4
B Selezionare un'immagine e salvare la selezione Photoshop 3
Stex1967 Salvare una immagine che si trova su porta TCP 8080 di altro sito PHP 7
L salvare una immagine elaborata in canvas Javascript 1
L salvare una immagine elaborata in canvas Javascript 1
E Salvare immagini PHP 0
L salvare codice html in mysql PHP 3
L salvare somma con sottrazione PHP 1
M Salvare coordinate Maps nel DB PHP 2
D SALVARE "MASCHERA" + "ALLEGATO PDF" IN UN UNICO PDF MS Access 0
A Twitter aggiungere tweet a campagna esistente o salvare pubblico Social Media Marketing 0
D Salvare in diversi campi mysql con diversi ID PHP 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
M Salvare JSONObject in Shared Preference Sviluppo app per Android 0
M [PHP] Salvare campo di una tabella in una variabile PHP 14
S [ASP] SALVARE VALORE SELECT OPTION SU CAMPO TABELLA ACCESS Classic ASP 9
M [PHP] FPDF Salvare su disco C locale Windows PHP 3
C Photoshop CS 6 salvare una modifica Photoshop 0
L [PHP] Salvare csv da form dati PHP 5
A Salvare immagine ridimensionata in MySql con GD PHP 12
G php salvare file in campo blob mysql: massimo 4MB PHP 1
M Salvare pagine web come segnalibro con istruzioni javascript Javascript 0
L Salvare posizione maps Sviluppo app per Android 0
G [PHP] SALVARE RECORD ESTRATTI DA DATABASE PHP 6
D Come salvare scelta della select "dinamica" ajax-php? Come dato php o attributo value tag option? Ajax 5
P [SOLVED] salvare il TCPDF output in mysql e rivisualizzarlo PHP 3
M Salvare i dati nel db e aprire altra pagina php PHP 7
M Form ASP su MsSQL salvare 2 campi in 1 Classic ASP 4
V [PHP] Salvare campo radio in db e leggerlo PHP 15
S [PHP] Salvare dati tabella in formato exel PHP 0
Benix89 Come salvare radio button selezionato Magento 1
Benix89 Salvare radio button selezionato PHP 2
P Come salvare il proprio diario di fb Discussioni Varie 0
P Salvare i dati restituiti dopo autenticazione OAuth2 Javascript 0
M Salvare in tabella link file importato PHP 1
F Cliccare e salvare src immagine HTML e CSS 2
M Cartella predefinita dove salvare i backup PHP 0
P dove si va a salvare il dbase phpmyadm una volta creato ???? Database 0
P dove si va a salvare il dbase phpmyadm una volta creato ???? Database 7
C Salvare il click su di un Button Sviluppo app per Android 9
Emix Salvare documenti in DB PHP 3
D salvare righe dinamicamente PHP 3
R Mettere la possibilità di Salvare in un gioco =) Come si fa? Java 2
M Salvare select con cookie PHP 1

Discussioni simili