Je n'arrive pas à bloque le lancement vers la page php en js
Résolu
ScreamFR
Messages postés
73
Date d'inscription
Statut
Membre
Dernière intervention
-
ScreamFR Messages postés 73 Date d'inscription Statut Membre Dernière intervention -
ScreamFR Messages postés 73 Date d'inscription Statut Membre Dernière intervention -
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.
le code php qui s'execute
code html ...
la ligne qui est sencé empecher l'action de redirection vers la page php est :
si je me trompe pas.
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 page word - Guide
- Code puk bloqué - Guide
- Téléphone bloqué code verrouillage - Guide
- Pavé tactile bloqué - Guide
- Si je bloque quelqu'un sur messenger le voit il - Guide
function postMessage(event){ event.preventDefault();Comment appelles tu ta fonction postMessage depuis ton code JS ??
As tu un onclick ? un EventListener ??
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);document.querySelector('form').addEventListener('submit', function(event){ postMessage(event); });Ensuite, dans ta fonction, return un FALSE à la fin
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); });