Form Input Spin

Overview

Form input spin is used to increase and decrease the number.Various example are shown belows.

Initjs (Custom js)

<!-- input spin init -->
<script src="{% static 'js/pages/form-input-spin.init.js' %}"></script>

Examples

Title Javascript

Demo Example

Title	Javascript
Demo Example	isData(); function isData() { var plus = document.getElementsByClassName('plus'); var minus = document.getElementsByClassName('minus'); if (plus) { plus.forEach(function (e) { e.addEventListener('click', function (event) { // if(event.target.previousElementSibling.value ) if (parseInt(e.previousElementSibling.value) < event.target.previousElementSibling.getAttribute('max')) { event.target.previousElementSibling.value++; } }); }); } if (minus) { minus.forEach(function (e) { e.addEventListener('click', function (event) { if (parseInt(e.nextElementSibling.value) > event.target.nextElementSibling.getAttribute('min')) { event.target.nextElementSibling.value--; } }); }); } }

isData();

function isData() {
    var plus = document.getElementsByClassName('plus');
    var minus = document.getElementsByClassName('minus');

    if (plus) {
        plus.forEach(function (e) {
            e.addEventListener('click', function (event) {
                // if(event.target.previousElementSibling.value )
                if (parseInt(e.previousElementSibling.value) < event.target.previousElementSibling.getAttribute('max')) {
                event.target.previousElementSibling.value++;                
                }
            });
        });
    }

    if (minus) {
        minus.forEach(function (e) {
            e.addEventListener('click', function (event) {
                if (parseInt(e.nextElementSibling.value) > event.target.nextElementSibling.getAttribute('min')) {
                event.target.nextElementSibling.value--;                
                }
            });
        });
    }
}