Je n'arrive pas à bloque le lancement vers la page php en js

Résolu

ScreamFR Messages postés 73 Statut Membre -
ScreamFR Messages postés 73 Statut Membre - 4 janv. 2021 à 11:55

Bonjours, bonsoirs
J'ai realiser un chat en php ajax ... tout fonctionne à la perfection, sauf que mon formulaire s’exécute, malgrès mon code qui l'empeche de le faire je ne sais pas pourquoi ca ne fonctionne pas .

Se que je veut dire par << l'empeche >> , c'est d'empecher la redirection vers la page et evite un refresh de page.

Code ajax :

je vous partage uniquement la function qui permet d'ajouter un message.


function postMessage(event){

  event.preventDefault();


  const author = document.querySelector('#author');
  const content = document.querySelector('#content');


  const data = new FormData();
  data.append('author', author.value);
  data.append('content', content.value);


  const requeteAjax = new XMLHttpRequest();
  requeteAjax.open('POST', '../../../../html/ltr/coqpix/php/chat_crea.php?task=write');
  
  requeteAjax.onload = function(){
    content.value = '';
    content.focus();
    getMessages();
  }

  requeteAjax.send(data);
}

le code php qui s'execute


function postMessage(){
    global $bdd;

    if(!array_key_exists('author', $_POST) || !array_key_exists('content', $_POST)){
        echo json_encode(["status" => "error", "message" => "One field or many not been sent"]);
        return;
    }

    $destination = "coqpix".$_POST['author']."";
    $date_crea = date("d-m-Y");
    $date_h = date("H") + "1";
    if($date_h == "24"){
        $date_h = "00";
    }
    $date_m = date("i");
    $content = $_POST['content'];

    $query = $bdd->prepare('INSERT INTO chat_crea (destination, date_crea, date_h, date_m, message_crea) VALUES(?,?,?,?,?)');
    $query->execute(array(
        htmlspecialchars($destination),
        htmlspecialchars($date_crea),
        htmlspecialchars($date_h),
        htmlspecialchars($date_m),
        htmlspecialchars($content)
    ));

    echo json_encode(["status" => "sucess"]);
}

code html ...


<div class="card-body widget-chat-container widget-chat-demo-scroll">
                    <div class="chat-content" id="chat-content">
                        <!-- contenue renvoyé -->                        
                    </div>
                </div>
                <div class="card-footer border-top p-1">
                    <form class="d-flex" action="php/chat_crea.php?task=write" method="POST">
                        <input type="hidden" name="author" id="author" value="<?= $crea['name_crea'] ?>">
                        <input type="text" name="content" id="content" class="form-control chat-message-demo mr-75" placeholder="Tappez votre message...">
                        <button type="submit" class="btn btn-primary glow px-1"><i class="bx bx-paper-plane"></i></button>
                    </form>
                </div>
            </div>

la ligne qui est sencé empecher l'action de redirection vers la page php est :

event.preventDefault();

si je me trompe pas.

Afficher la suite

1 réponse

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

Bonjour,

Change le "type" de ton bouton... enlève le "submit" et remplace le par "button".

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

Ah... et ... il est où le code qui attache ton Javascript au click sur le bouton ?
0
ScreamFR Messages postés 73 Statut Membre 3 > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention
justement j'utilise cela d'après mes recherches il empeche la redirection vers la page php et traite directement en js (ajax)
```
function postMessage(event){

  event.preventDefault();
```
0
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832 > ScreamFR Messages postés 73 Statut Membre

Alors visiblement.. tu n'as pas bien compris ma question... ou alors tu ne sais pas ce que tu fais....

Comment appelles tu ta fonction postMessage depuis ton code JS ??
As tu un onclick ? un EventListener ??
0

ScreamFR Messages postés 73 Statut Membre 3 > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention

Ah oui autant pour moi, je n'avais pas bien compris , j'utilise un EventListener effectivement !

Je vais te partage interalliée de mon code pour que tu puisse mieux comprendre.

code js


function getMessages(){
  const requeteAjax = new XMLHttpRequest();
  requeteAjax.open("GET", "chat_crea.php");

  requeteAjax.onload = function(){
    const resultat = JSON.parse(requeteAjax.responseText);
    const html = resultat.map(function(message){
        
      return `<div class="chat chat-left">
                            <div class="chat-body">
                                <div class="chat-message">
                                    <p>${message.message_crea}</p>
                                    <span class="chat-time">${message.date_h}:${message.date_m}</span>
                                </div>
                            </div>
                        </div>`
        }).join('');

    const messages = document.querySelector('.chat-content');

    messages.innerHTML = html;
    messages.scrollTop = messages.scrollHeight;
  }
  requeteAjax.send();
}

function postMessage(event){

  event.preventDefault();

  const author = document.querySelector('#author');
  const content = document.querySelector('#content');

  const data = new FormData();
  data.append('author', author.value);
  data.append('content', content.value);

  const requeteAjax = new XMLHttpRequest();
  requeteAjax.open('POST', 'chat_crea.php?task=write');
  
  requeteAjax.onload = function(){
    content.value = '';
    content.focus();
    getMessages();
  }

  requeteAjax.send(data);
}

document.querySelector('form').addEventListener('submit', postMessage);

const interval = window.setInterval(getMessages, 3000);

getMessages();

le code qui attache le button au code est ducoup

document.querySelector('form').addEventListener('submit', postMessage);

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832 > ScreamFR Messages postés 73 Statut Membre
Déjà, modifie ton eventlistener comme ça
```
document.querySelector('form').addEventListener('submit', function(event){
  postMessage(event);
});
```
Ensuite, dans ta fonction, return un FALSE à la fin
```
  requeteAjax.send(data);
  return false;
}
```
Mais bon, vu que ton FORM ne sert pas à envoyer tes données ( vu que tu utilises de l'ajax ), mois j'aurais plutôt attaché l'event sur le bouton
```
 <button id="btn_submit" type="button" class="btn btn-primary glow px-1"><i class="bx bx-paper-plane"></i></button>
                   
```
et donc, au niveau js
```
document.getElementById('btn_submit').addEventListener('click', event => {
  postMessage(event);
});
```
0

Je n'arrive pas à bloque le lancement vers la page php en js

1 réponse

Discussions similaires

Newsletters