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

Résolu/Fermé

ScreamFR Messages postés 73 Date d'inscription lundi 30 décembre 2019 Statut Membre Dernière intervention 19 mai 2022 - Modifié le 2 janv. 2021 à 03:36
ScreamFR Messages postés 73 Date d'inscription lundi 30 décembre 2019 Statut Membre Dernière intervention 19 mai 2022 - 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.

A voir également:

Je n'arrive pas à bloque le lancement vers la page php en js
Supprimer une page word - Guide
Code puk bloqué - Guide
Pavé tactile bloqué - Guide
Si je bloque quelqu'un sur messenger le voit il - Guide
Compte gmail bloqué - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
2 janv. 2021 à 10:11

Bonjour,

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

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
2 janv. 2021 à 10:12

Ah... et ... il est où le code qui attache ton Javascript au click sur le bouton ?

ScreamFR Messages postés 73 Date d'inscription lundi 30 décembre 2019 Statut Membre Dernière intervention 19 mai 2022 3 > jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024
2 janv. 2021 à 13:04

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();

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > ScreamFR Messages postés 73 Date d'inscription lundi 30 décembre 2019 Statut Membre Dernière intervention 19 mai 2022
2 janv. 2021 à 13:21

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 ??

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);

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);
});

Discussions similaires

Colis en cours de transport vers votre site de livraison ?

recherche d'u