déclencher le submit d'un formulaire sur check d'un checkbox

Version imprimable

Bonjour,
ce que je souhaite faire est mentionné par le titre.
J'ai compris que c'était faisable avec du jQuery, mais n'y suis pas arrivé.

Voici un extrait de mon code :
Code:

1 2 echo '</td><td><input type="checkbox" class="intern-margin" name="update[]" value="'.$one_actu["actu_id"].'" id="update"/></td><td><label for="update">Modifier  </label></td> <td><input type="checkbox" name="delete[]" value="'.$one_actu["actu_id"].' id="delete"/></td><td><label for="delete">Supprimer</label></td>';
S'il manque des informations, merci de me le dire.

J'ai l'impression que tu n'es pas dans le bon forum. Tu peux le faire avec jQuery:

Code:

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
<!DOCTYPE html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="lib/jquery-3.7.1.min.js"></script>
    <script>
    $(function() {
        $('input:checkbox').change(function() {
            if ($(this).is(':checked')) $('form').submit();
        });
    });
    </script>    
</head>
<body>
<form method="post" action="">
    <input type="text" name="data" value="Le texte"/>
    <input type="checkbox"/>
</form>
 
<?php if (isset($_POST['data'])): ?>
    <p><?= $_POST['data'] ?></p>
<?php endif ?>
 
</body>
</html>

Mais jQuery n'est pas indispensable (comme toujours):

Code:

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
<!DOCTYPE html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
(function() {
    document.addEventListener('DOMContentLoaded', (e) => {
 
        const myForm = document.querySelector('form');
        const myCheckbox = myForm.querySelector('input[type="checkbox"]');
 
        myCheckbox.addEventListener('change', (e) => {
            if (e.target.checked) myForm.submit();
        }, false);
 
    }, false);
})();
    </script>
</head>
<body>
<form method="post" action="">
    <input type="text" name="data" value="Le texte"/>
    <input type="checkbox"/>
</form>
 
<?php if (isset($_POST['data'])): ?>
    <p><?= $_POST['data'] ?></p>
<?php endif ?>
 
</body>
</html>

La chose à retenir, c'est qu'une checkbox n'a pas d'événement "checked". "checked" est un état. Par contre, elle a un événement "change" qui lorsqu'il est écouté, permet de vérifier l'état "checked" dans le handler.

29/08/2023, 15h53
cavo789

Sur un plan purement utilisateur, je ne suis pas certain que c'est une bonne idée.

Cocher / décocher est une action qui ne doit pas impliquer une soumission du formulaire (je pourrais cocher et oups, mauvaise manipulation)
29/08/2023, 16h09
laurentSc

Citation:

J'ai l'impression que tu n'es pas dans le bon forum.

Même si je pensais que la solution serait du js (jQuery ou pas), le code initial est en PHP, d'où mon post ici.

Citation:

Sur un plan purement utilisateur, je ne suis pas certain que c'est une bonne idée.

J'envisage de mettre une confirmation : êtes-vous sûr de vouloir supprimer (ou modifier) l'actualité XXX (les 10 premiers caractères du texte) ?

J'essaie les solutions proposées par Cosmo et j'en rends compte...
29/08/2023, 18h18
laurentSc

J'ai pas eu beaucoup de temps pour faire des essais. J'ai cependant essayé en local les 2 scripts de Cosmo et celui avec jQuery ne fonctionne pas ; seul le pur js fonctionne...
29/08/2023, 20h11
cavo789

Citation:

Envoyé par laurentSc

J'envisage de mettre une confirmation : êtes-vous sûr de vouloir supprimer (ou modifier) l'actualité XXX (les 10 premiers caractères du texte)

Du coup quel est l'intérêt ? Au lieu de cliquer sur submit il faudra cliquer sur Oui je suis sûr. On reste à deux clics du coup pourquoi changer ?
29/08/2023, 21h10
laurentSc

Comme dans tous les cas, il faut une confirmation, si on garde un bouton submit, on a 3 clics au lieu de 2 (1- cocher une checkbox ; 2- bouton submit ; 3-confirmation). Dans mon cas, on a que 2 clics vu qu'on économise l'étape 2.

Comme des 2 scripts du post #2, il n'y a que le second qui fonctionne, j'ai essayé de l'adapter à mon cas : plusieurs checkboxs.
Code:

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 34 35 <!DOCTYPE html> <head> <meta charset="utf-8"/> <title></title> <script> (function() { document.addEventListener('DOMContentLoaded', (e) => { const myForm = document.querySelector('form'); const myCheckbox = myForm.querySelector('input[type="checkbox"]'); myCheckbox.addEventListener('change', (e) => { if (e.target.checked) myForm.submit(); }, false); }, false); })(); </script> </head> <body> <form method="post" action=""> <input type="checkbox" name="data[]" value="Le texte1"/> <input type="checkbox" name="data[]" value="Le texte2"/> </form> <?php if (isset($_POST['data'][0])): ?> <p><?= $_POST['data'][0] ?></p> <?php endif ?> <?php if (isset($_POST['data'][1])): ?> <p><?= $_POST['data'][1] ?></p> <?php endif ?> <a href="">Close</a>  </body> </html>
Mais je n'arrive pas à le mettre au point : si je clique sur la 1e checkbox, OK, on a bien l'affichage de Le texte1. Par contre si je clique sur la seconde, rien et si je clique après sur la première on a affichage
Le texte1 
Le texte2
Peux-tu me corriger ?

Je vais être absent les 2 prochains jours, donc probablement silence radio.

30/08/2023, 12h05
domi65

Citation:

Envoyé par laurentSc

Comme dans tous les cas, il faut une confirmation

Justement pas. La plupart des formulaires qu'on rencontre sur le web ne demandent pas "Etes-vous sûr de vouloir soumettre ce formulaire" lorsque on clique sur un bouton de soumission, clairement identifié comme tel pour l'internaute.

Ce que tu veux faire ne se rencontre jamais. Pourquoi à ton avis, si c'est une si bonne idée ?
01/09/2023, 12h06
laurentSc

J'ai avancé dans ma réflexion et du coup le titre n'a plus aucun sens ; donc je clos celle-ci et en crée une nouvelle.