web-dev-qa-db-fra.com

soumettre un formulaire quand une case à cocher est cochée

est-il possible de soumettre un formulaire lorsqu'une case à cocher est cochée?

<form id="formName" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
    <input type ="checkbox" name="cBox[]" value = "3">3</input>
    <input type ="checkbox" name="cBox[]" value = "4">4</input>
    <input type ="checkbox" name="cBox[]" value = "5">5</input>
    <input type="submit" name="submit" value="Search" />
</form>

<?php
    if(isset($_GET['submit'])){
        include 'displayResults.php';
    }
?>

C’est ce que j’ai actuellement, mais j’aimerais soumettre le formulaire sans bouton Soumettre, lorsque l’utilisateur coche ou décoche une case à cocher. De l'aide?

phpjavascriptformssearchcheckbox
24
user1394849

En clair, JavaScript suffit

onChange="this.form.submit()"

dans la balise form/input.

51
Sliq

Oui, c'est possible.

<form id="formName" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
    <input type ="checkbox" name="cBox[]" value = "3" onchange="document.getElementById('formName').submit()">3</input>
    <input type ="checkbox" name="cBox[]" value = "4" onchange="document.getElementById('formName').submit()">4</input>
    <input type ="checkbox" name="cBox[]" value = "5" onchange="document.getElementById('formName').submit()">5</input>
    <input type="submit" name="submit" value="Search" />
</form>

En ajoutant onchange="document.getElementById('formName').submit()" à chaque case à cocher, vous soumettez chaque fois qu'une case à cocher est modifiée.

Si vous êtes d'accord avec jQuery, c'est encore plus simple (et discret):

$(document).ready(function(){
    $("#formname").on("change", "input:checkbox", function(){
        $("#formname").submit();
    });
});

Pour n'importe quel nombre de cases à cocher dans votre formulaire, lorsque le "changement" se produit, le formulaire est soumis. Cela fonctionnera même si vous créez dynamiquement plus de cases à cocher grâce à la méthode .on().

13
Surreal Dreams
$(document).ready(
    function()
    {
        $("input:checkbox").change(
            function()
            {
                if( $(this).is(":checked") )
                {
                    $("#formName").submit();
                }
            }
        )
    }
);

Il serait probablement préférable d’ajouter des classes à chacune des cases à cocher et de

$(".checkbox_class").change();

afin que vous puissiez choisir quelles cases à cocher soumettre le formulaire au lieu de toutes les faire.

3
Gorving