11538 sujets

JavaScript, DOM et API Web HTML5

Input type="radio" transformé en bouton de soumission

Bonjour,

Je suis assez nul en javascript, merci de votre indulgence.

Dans ce ,codepen sur écran de moins de 1200 px chaque input type="radio" est transformé en bouton de soumission.

Mon problème est que le clic transmette non seulement la valeur de l'input (ce qu'il fait avec mon code JS sommaire) mais aussi celle du bouton de soumission : "Ajouter au panier" (afin que le script PHP comprenne ce qui se passe).

Cela si-possible sans alourdir le code html.

Merci d'avance.
Modérateur
Salut,

Où sont les label pour tes boutons radio ?
Pourquoi un matchMedia max width1200px ?
Événement click sur un bouton radio ? Smiley hum Les boutons radio, comme les checkbox ou les select n'utilisent pas cet événement. Ces jours-ci, j'ai vu passer un sujet à ce propos sur le forum.
Bonjour Niuxe,

Le codepen est expérimental, il ne prétend pas respecter les bonnes règles, par exemple le label pour l'input.

Niuxe a écrit :
Pourquoi un matchMedia max width1200px ?


Responsive, la case radio doit se comporter comme un bouton submit sur les petits écrans, j'ai choisi 1200px pour le codepen, peu importe.

Click fonctionne, je peux essayer OnChange.

Tu ne réponds pas à ma question :

Mon problème est que le clic (ou OnChange) transmette non seulement la valeur de l'input (ce qu'il fait avec mon code JS sommaire) mais aussi celle du bouton de soumission : "Ajouter au panier" (afin que le script PHP comprenne ce qui se passe).

As-tu une idée ?

Merci d'avance.
Modérateur
c'est plutôt simple : 

<?php 
if(isset($_POST)){
    print_r($_POST);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="<?= $_SERVER['PHP_SELF']?>" method="post">
    <ul>
        <li><input type="radio" name="super" value="_1"></li>
        <li><input type="radio" name="super" value="_2"></li>
        <li><input type="radio" name="super" value="_3"></li>
    </ul>
    <input type="submit">
</form>
<script>
const bouton_radio = document.querySelectorAll ('input[type=radio]');

for (let i = 0; i < bouton_radio.length; i++){
    bouton_radio[i].addEventListener('change', e =>{
        document.querySelector('form').submit();
    });
}
</script>
</body>
</html>
Bonjour niuxe,

Merci de ton suivi.

Très bien mais il faut faire un changement et ce changement est la question.

<input type="submit" name="choix" value="Ajouter au panier">

Et au click sur un bouton radio il faut que cette variable $_POST['choix'] soit transmise à PHP.
Modifié par boteha_2 (12 Apr 2025 - 17:46)
Modérateur
Bonjour,

heu, je sais pas ce que tu veut faire avec tes boutons radios, mais si leur comportement devient celui d'un submit, cela va être très surprenant pour tes visiteurs et malvenu.
Personnellement, si un site me fait ça, je perds aussitôt toute confiance et vais voir ailleurs car si je coche une option cela n'a rien à voir avec ma volonté de soumettre un formulaire , et si je voulais me ravisé ou que j'avais cliqué au mauvais endroit avec mes gros doigts ? Smiley cligne

Je pense que c'est une mauvaise idée ou bien je n'ai vraiment pas compris ce que tu voulais faire.
cdt
Bonjour gcyrillus,

Oui, je sais, tu as 100 % raison s'il s'agit d'un formulaire.

Là il s'agit d'une expérience sur une page produit avec plusieurs versions du produit.
Je suis loin d'être sûr que ce sera concluant mais le codepen te montre l'effet responsive.

Dans cette discussion j'essaye d'expliquer...

Bon, c'est une expérience, elle m'a permis de découvrir l'attribut USE pour les SVG et a donné à Raphaël l'idée d'un tuto sur le style des images SVG.

La brique manquante est la transmission d'une variable de formulaire par JS, j'ai passé un certain temps à chercher en vain la réponse...
Hello gcyrillus,

Merci de ton suivi.

Ton code est trop compliqué pour moi....

Voilà mon code basique :

const bouton_radio = document.querySelectorAll ('table.compcab input[type=radio]');

for (let i = 0; i < bouton_radio.length; i++)
{	
bouton_radio[i].addEventListener('change', function ()
{
this.form.submit();
}
);
}


J'imagine qu'il faut ajouter quelque part :

var formData = new FormData();
formData.append("choix", "Ajouter au panier");


Mais ensuite envoyer cela en POST je sèche, même après avoir parcouru la documentation sur FormData...
Prévenir un modérateur
Répondre au sujet
Aller à