salvare testo chat

  • Creatore Discussione Creatore Discussione Imperor
  • Data di inizio Data di inizio
I

Imperor

Utente Attivo
25 Nov 2010
102
2
18
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:
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
Fra_23 ha scritto:
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!
Clicca per allargare...
grazie funziona alla grande :)
 
Fra_23 ha scritto:
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!
Clicca per allargare...
va alla grande sto tentando di capire come fare per lo scroll dei messaggi :)
 
Fra_23 ha scritto:
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!
Clicca per allargare...
ciao e buongiorno come posso fare che non stampa a video ma salva i dati? prelevo i dati con un altro script grazie per la risposta
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

C
Salvare dati form in un file di testo
Risposte
1
Visite
10K
PHP
controsenso
C
L
salvare e caricare files di testo con amfphp
Risposte
1
Visite
2K
PHP
lasmiveni
L
F
Leggere e salvare caratteri da file di testo
Risposte
2
Visite
2K
PHP
F4BiO_GE
F
emanuelevt
Modificare e salvare testo
Risposte
21
Visite
4K
Ajax
emanuelevt
emanuelevt
M
Come aprire e salvare file di testo con Javascript?
Risposte
3
Visite
14K
Javascript
MarcoGrazia
MarcoGrazia
I
salvare con ajax user_id name msg
Risposte
0
Visite
1K
PHP
Imperor
I
P
C# Salvare una colonna del DataGridView
Risposte
0
Visite
3K
XML
Pacifico
P
E
fpdf salvare e aprire il file
Risposte
4
Visite
2K
PHP
Emanuele85
E
B
Selezionare un'immagine e salvare la selezione
Risposte
3
Visite
2K
Photoshop
WmbertSea
WmbertSea
Stex1967
Salvare una immagine che si trova su porta TCP 8080 di altro sito
Risposte
7
Visite
2K
PHP
Stex1967
Stex1967
L
salvare una immagine elaborata in canvas
Risposte
1
Visite
2K
Javascript
lanvoel39
L
L
  • Bloccata
salvare una immagine elaborata in canvas
Risposte
1
Visite
1K
Javascript
Max 1
Max 1
E
Salvare immagini
Risposte
0
Visite
1K
PHP
Emanuele85
E
L
salvare codice html in mysql
Risposte
3
Visite
3K
PHP
ServWise.com
S
L
salvare somma con sottrazione
Risposte
1
Visite
1K
PHP
macus_adi
macus_adi
M
Salvare coordinate Maps nel DB
Risposte
2
Visite
1K
PHP
Max61
M
D
SALVARE "MASCHERA" + "ALLEGATO PDF" IN UN UNICO PDF
Risposte
0
Visite
2K
MS Access
djduffer26
D
A
Twitter aggiungere tweet a campagna esistente o salvare pubblico
Risposte
0
Visite
1K
Social Media Marketing
al404
A
D
Salvare in diversi campi mysql con diversi ID
Risposte
0
Visite
1K
PHP
Domenico2013
D
D
[Javascript] salvare immagine canvas - paypal
Risposte
0
Visite
1K
Javascript
dimagab
D
Alto Basso