Limiteer het aantal mogelijkheden bij selectievakken

Maximum limiet op selectievakken

Bij uitgebreide formulieren waarbij een resem aan opties zijn had een klant van mij een oplossing nodig om het limiet in te stellen bij selectievakjes (checkboxes). Er waren een kleine 500 mogelijkheden en het limiet lag op 20 vinkjes.

Mijn klant probeerde verschillende WordPress contactformulieren waaronder Contact Form 7, Caldera Forms én Ninja Forms. Bij geen enkele plugin was dit een core functie. Er moest dus extra code bijkomen om te verhinderen dat de bezoeker er meer kan aanduiden.

Javascript stukje

Er dient een stukje code ingeladen te worden die voorkomt dat er meer dan het gewenste aantal vinkjes worden aangevinkt. Hiervoor gebruikte ik dit stuk:

jQuery(function($){
    var max = 20;
    var checkboxes = $('input[type="checkbox"]');

    checkboxes.change(function(){
        var current = checkboxes.filter(':checked').length;
        checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
    });
});

Even een woordje uitleg hierover.

Ik zet in de max variabele het gewenste maximum aantal, daarna ga ik op zoek naar de selectievakken op de pagina en die worden bewaard in de variabele checkboxes. Op regel 5 schrijf ik een functie die luistert wanneer er een verandering is op het selectievak. Bij elke verandering kijkt hij naar het huidige aantal door de lengte te berekenen. Is de lengte groter dan het maximum, dan krijgen alle andere mogelijkheden de disabled eigenschap. Vanaf dan kan er geen extra vak meer aangeduid worden.

Script inladen op een specifieke pagina

De bedoeling is natuurlijk dat deze code enkel uitgevoerd wordt op de juiste pagina waar het desbetreffende formulier aanwezig is. Hiervoor schreef ik een aparte plugin die op slug filtert. Enkel wanneer de slug overeen komt met de pagina wordt het javascript bestand ingeladen. Hiervoor gebruikte ik deze code:

function contactform() {
    if(is_page('page-slug')) {
        wp_register_script( 'jerrixit_contactform', get_stylesheet_directory_uri() . '/jerrixit.js', array( 'jquery' ) );
        wp_enqueue_script( 'jerrixit_contactform' );
    }
}
add_action( 'wp_enqueue_scripts', 'contactform' );

De is_page() functie komt hier handig van pas.

Gepubliceerd op
Gecategoriseerd als Tutorials

Door Jeroen

Ik focus me op het bouwen, optimaliseren, onderhouden en hosten van WordPress websites met Sitefly. Jeroenrotty.be is mijn persoonlijke blog. Voor WordPress tips, tricks, tutorials en nieuws kun je terecht je op WPInfo.be.

2 reacties

  1. Beste Jeroen,
    Met interesse heb ik dit artikel gelezen.
    Ik heb voor onze fietsclub een wordpress site gemaakt met een Contact Form 7 formulier. In dit formulier heb ik veel selectievakjes waar er maar vier aangevinkt mogen worden.
    Jouw artikel lijkt voor mij een oplossing, aangezien mijn kennis te kort schiet waar ik wat moet plaatsen hoop ik dat jij mij verder kan helpen.

    Vriendelijke groet,
    Dennis

    1. Hey Dennis,
      Waar je de code het best plaatst hangt af van de situatie en hoe je thema/site is opgebouwd, maar het gemakkelijkste manier zou zijn door het laatste stukje code te gebruiken en dan specifiek in te laden op de pagina waar dat formulier staat door de slug te gebruiken. Dit kan je dan in je functions.php stoppen als je een childthema gebruikt, of in een eigen plugin. Als je iemand zoekt die dat voor jou regelt, kan dat ook, stuur me dan maar gerust een mailtje.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *