Adding plus and minus-signs on numeric inputs

General Discussion
, ,
1

I’ve seen various questions on making the numeric input more user friendly. Based on Number input with plus minus buttons - JSFiddle - Code Playground and some ChatGPT I’ve created a jquery that adds stylable plus and minus buttons next to to any numeric field that is in the form.

I wanted to share it to help others that want better inputboxes Especially on mobile.

PrtScr capture_130
PrtScr capture_130628×341 14.4 KB

2

Add this to your functions.php.

function fietsverhuur_formulier_scripts() {
    // Alleen laden als Gravity Forms plugin actief is
    if (!class_exists('GFForms')) return;

    // Alleen laden op de juiste pagina (slug: fietsverhuur-formulier)
    if (!is_page('fietsverhuur-formulier')) return;

    wp_enqueue_script('jquery');

    // Voeg inline script toe
    $script = <<<EOD
    jQuery(document).ready(function($) {
        $('input[type="number"]').each(function() {
            const \$input = \$(this);

            // Niet nogmaals bewerken
            if (\$input.parent().hasClass('number-wrapper')) return;

            // Wrapper + knoppen aanmaken
            const \$wrapper = \$('<div class="number-wrapper" style="display: flex; align-items: center; gap: 10px;"></div>');
            const \$minus = $('<button type="button" class="gf_numericplusminus btn-minus" aria-label="verlaag">–</button>');
            const \$plus = $('<button type="button" class="gf_numericplusminus btn-plus" aria-label="verhoog">+</button>');

            \$input.wrap(\$wrapper);
            \$input.before(\$minus);
            \$input.after(\$plus);

            // Events afvuren inclusief Gravity Forms trigger
            \$minus.on('click', function() {
                let val = parseInt(\$input.val()) || 0;
                let min = parseInt(\$input.attr('min')) || 0;
                if (val > min) {
                    \$input.val(val - 1)
                        .trigger('change')
                        .trigger('input')
                        .trigger('gform_input_change');
                }
            });

            \$plus.on('click', function() {
                let val = parseInt(\$input.val()) || 0;
                \$input.val(val + 1)
                    .trigger('change')
                    .trigger('input')
                    .trigger('gform_input_change');
            });
        });
    });
    EOD;
    wp_add_inline_script('jquery', $script);
}
add_action('wp_enqueue_scripts', 'fietsverhuur_formulier_scripts');

Add this to your CSS(style to your liking)

    .gf_numericplusminus {
        width: 50px;
        height: 40px;
        border-radius: 20px;
        background-color: #0569AD;
        color: white;
        font-weight: bold;
        font-size: 20px;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

    .gf_numericplusminus:hover {
        background-color: #FFED00;
        color: #0569AD;
    }
1 Like
3

Somewhat related:
Add this code to make the error messages appear ABOVE the field with an error.

.gfield {
  display: grid;
  grid-template-areas: "label" "validation";
}
.gfield_label {
  grid-area: label;
}
.validation_message {
  grid-area: validation;
}