Sujet Précédent Sujet Suivant

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:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 4 689
2 janv. 2021 à 10:11
Bonjour,

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

1
jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 4 689
2 janv. 2021 à 10:12
Ah... et ... il est où le code qui attache ton Javascript au click sur le bouton ?
0
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 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 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();
0
jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 4 689 > 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 ??
0
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 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024
Modifié le 2 janv. 2021 à 13:56
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);
0
jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 4 689 > ScreamFR Messages postés 73 Date d'inscription lundi 30 décembre 2019 Statut Membre Dernière intervention 19 mai 2022
2 janv. 2021 à 14:03
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

Discussions similaires

Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses
[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses
recherche d'u
mimi -
brucine -

1 réponse