Bonjour à tous,

Je suis en train d'améliorer mon site mais du coup je rencontre beaucoup de soucis de faisabilité.

Je compte sur vous pour m'aider sur un problème qui m'empêche d'avancer depuis plusieurs jours.

J'ai besoin de récupérer une quantité au travers d'un formulaire une donnée saisie par l'utilisateur.

Rien de compliqué : Un form / un input / un submit et c'est reglé.

Cette valeur étant un nombre qui peut être négatif j'ai décider de changer l'expérience utilisateur en incluant 2 (boutons) pour ajouter ou réduire la quantité.

Il s'avère que les boutons dans un form ne font pas bon ménage donc j'ai feinté différemment avec des images et une fonction en js.

Le soucis étant que la fonction js écrit la valeur dans un span mais je ne sais absolument pas comment la récupérer dans le formulaire.

Les champs input n'acceptent pas le span.

Ma question est peut être bête, mais si vous avez la réponse je vous en serais reconnaissant.

Merci d'avance et bon chocolats de Pâques !

Edit: je n'arrive pas à intégrer le code La page se bloque.

Apparemment la fonction onmouseover / onmouseout empeche l'envoi du code. Du coup j'ai enlevé 

Le code est disponible ici : https://codepen.io/Doudinou/pen/rNjwvRG

<div class="variateur">
  
<form action="post.php" method="post">
  
<img src="https://businessfacto.fr/cadre/-_w.png"  onClick="decrement()"/>

  <!-- Faire varier la valeur à l'aide de 2 icones  (Pas de boutton car c'est dans un  form) -->
  <span id="quantite">0</span></button>
  <!-- Recuperer la valeur du span par un input pour avoir sur la page post.php $_POST['quantite']= La variable choisiz -->
  
  
  <img src="https://businessfacto.fr/cadre/+_w.png"  onClick="increment()"/>
  
<button type="submit">Envoyer</button>
  
</form>
</div>

.variateur {
 margin-top:5px;
 margin-bottom:5px;
}


.variateur img
{
  width:25px;
  height:25px;
  background-size: contain;
  border: none;
  cursor:pointer;
  outline-style:none;
  margin:10px;
  
}

-
Edité par SamuelGodard 5 avril 2021 à 15:29:25

Tu essaies de réimplémenter un input de type number en te compliquant au maximum la vie non ?

les boutons dans un form ne font pas bon ménage

Bien sûr que si, mais il faut leur mettre le bon attribut type.

Hello,

On dirai que tu te complique un peu.

Avec une requete ajax ou fetch() tu peux récupérer la valeur du <span> et l'envoyer.

Pas très sécure mais tu peux utiliser un "champ type hidden" (donc non présent a l'écran utilisateur) pour l'envoyer naturellement avec les autres champs de ton formulaire.

Et comme le dit mon VDD tu peux avoir bouton standard type submit et un autre type button relié à un évènement JS.

-
Edité par Lucky13 5 avril 2021 à 19:33:51

Finalement j'ai trouvé une solution :

https://codepen.io/Doudinou/pen/mdRwzRd

Mais oui "MatTheCat" l'idée c'était bien de refaire un input type number mais plus intuitif et moderne que d'utiliser les 2 minifleches moches !

-
Edité par SamuelGodard 5 avril 2021 à 19:50:00