Event preventDefault fonctionne plus [Résolu]

Signaler
Messages postés
44
Date d'inscription
lundi 4 septembre 2017
Statut
Membre
Dernière intervention
3 août 2020
-
Messages postés
44
Date d'inscription
lundi 4 septembre 2017
Statut
Membre
Dernière intervention
3 août 2020
-
Bonjour,

Alors voila d’habitude sa fonctionné mais la plus


function sendMessage(e){

e.preventDefault();
.......
.....
...
..
}

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


a l'aide d'un formulaire ou j'ai un Textarea et un button submit, j'essai d’empêcher l'action par défaut qui est action="send.php" pour envoyer mon form avec ajax.

merci d'avance

3 réponses

Messages postés
29561
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 septembre 2020
2 782
addEventListener('submit', sendMessage(e));



Messages postés
44
Date d'inscription
lundi 4 septembre 2017
Statut
Membre
Dernière intervention
3 août 2020
1
Merci,

j'avais déjà fait ça elle return une erreur "Uncaught ReferenceError: e is not defined " a la line
document.querySelector('form').addEventListener('submit', sendMessage(e));


je mes suis dis qu'il était hors de porter mais sa n'est ressoude pas mon problème de preventDefault.
Messages postés
29561
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 septembre 2020
2 782 >
Messages postés
44
Date d'inscription
lundi 4 septembre 2017
Statut
Membre
Dernière intervention
3 août 2020

Essaye ceci
document.querySelector("form").addEventListener("click", function(event) {
      event.preventDefault();
     sendMessage();
}, false);

Messages postés
44
Date d'inscription
lundi 4 septembre 2017
Statut
Membre
Dernière intervention
3 août 2020
1 >
Messages postés
29561
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 septembre 2020

ça marche toujour pas voila tout mon code
HTML

<form method="post" action="send.php?action=write">
<input type="text" class="form-control" id="contenu">
<button type="submit" class="btn_send"">Envoyer</button>
</form>


ma function

function sendMessage(event){

event.preventDefault();

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

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

const requeteAjax = new XMLHttpRequest();
requeteAjax.open('POST', 'send.php?action=write');

requeteAjax.onload = function(){
content.value = '';
content.focus();

}

requeteAjax.send(data);

}

document.querySelector("form").addEventListener("click", function(event) {
event.preventDefault();
sendMessage();
}, false);
Messages postés
29561
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 septembre 2020
2 782
Déjà... ça serait bien que tu précises le langage dans les balises de code... histoire qu'on ait la coloration syntaxique et la numérotation des lignes.
Explications sur l'utilisation des balises de code à lire ENTIEREMENT disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite,
si tu ouvres la console JS de ton navigateur... tu dois certainement y voir un joli message d'erreur....
Change ton code par :

  function sendMessage(){
    let content = document.querySelector('#content');
    let data = new FormData();
    data.append('content', content.value);
 
   let requeteAjax = new XMLHttpRequest();

   requeteAjax.open('POST', 'send.php?action=write');

    requeteAjax.onload = function(){
      if (requeteAjax.readyState === 4) {
            if (requeteAjax.status === 200) {
                content.value = '';
                content.focus();  
            } else {
                console.error(requeteAjax.statusText);
            }
        }

   }

  requeteAjax.send(data);
  
}

document.querySelector("form").addEventListener("click", function(event) {
     event.preventDefault();
     sendMessage();
}, false);

Messages postés
44
Date d'inscription
lundi 4 septembre 2017
Statut
Membre
Dernière intervention
3 août 2020
1
Merci du conseil :).
  echo "hmm ceci est en PHP";


   document.getElementById("error_message").style.display = "block";
/* js */


Merci tout roule .