Discussion :

[moimp]

Bonjour,
J'ai toujours des problèmes lorsque la soumission d'un formulaire passe par un écouteur. Par exemple, lorsque je clique sur le bouton 'save' et que je lis la variable $_POST, ce bouton n'apparaît pas alors que tous les autres champs du formulaire apparaissent.
Je voudrais d'abord comprendre pourquoi et ensuite savoir comment y remédier.
HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<form method="post" action="formHandler.php" enctype="multipart/form-data">
// Suite du formulaire
<input type="submit" name="save" value="Enregistrer">
<input type="submit" name="eraseImg" value="Supprimer la photo">
<input type="submit" name="eraseAll" value="Tout supprimer">

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const
	html		= document.createElement('textarea')
	,src		= document.createElement('textarea')
	,save		= document.querySelector("[name='save']")
	,eraseImg	= document.querySelector("[name='eraseImg']")
	,eraseAll	= document.querySelector("[name='eraseAll']")
 
save.addEventListener('click', function(e) {
	e.preventDefault();
	html.name	= 'html';
	html.value	= textEditor.getData();
	save.form.appendChild(html);
	src.name	= 'sources';
	src.value	= srcEditor.getData();
	save.form.appendChild(src);
	//console.log(save.form);
	save.form.submit();
}, false );
 
//....................................................
// alert messages
eraseImg.addEventListener('click', function(e) {
	if( !confirm(fromPHPtoJS.alertImg) )
		e.preventDefault();
},  { capture: false, passive: false, once: false } );
 
eraseAll.addEventListener('click', function(e) {
 
	if( !confirm(fromPHPtoJS.alertAll) )
		e.preventDefault();
 
},  { capture: false, passive: false, once: false } );
//....................................................

[gabi7756]

Je me suis arrêté au fait que tu évoques la variables $_POST...
Ctr + F "$_POST" ...

Bref tu veux faire quoi ?

[Pytet]

Bonjour,

Il s'agit du comportement normal de la fonction javascript submit() :

<input> with attribute type="submit" will not be submitted with the form when using HTMLFormElement.submit(), but it would be submitted when you do it with original HTML form submit.

https://developer.mozilla.org/en-US/...Element/submit

Pour y remédier, tu peux récupérer le bouton cliqué via la propriété target de l'event.
Un début d'idée à améliorer/compléter :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<form method="get" id="myForm">
  <input type="text" name="login" value="toto">
 
  <input type="submit" name="sub1" value="Sub 1">
  <input type="submit" name="sub2" value="Sub 2">
</form>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
for (input of document.querySelectorAll('[type="submit"]')) {
  input.addEventListener("click", (e) => {
    e.preventDefault()
 
    const formData = new FormData(document.getElementById("myForm"))
    formData.append("submit-btn", e.target.name)
 
    for (const pair of formData.entries()) {
      console.log(pair[0], pair[1])
    }
  })
}

[moimp]

Merci, c'est bon.