Input field to accept only numbers from 0 to 12?

Question

I want to create a js code, so in an input field(for the HTML code below), I can only put numbers from 0 to 12. But the problem is that the input has already an id so... This is my code : HTML :

<!-- Months Textfield -->
        <form>
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" input id="d" data-in="" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2" onchange="handleChange(this);">
            <label class="mdl-textfield__label" for="sample2">Months...</label>
            <span class="mdl-textfield__error">Please specify monthes in numbers not in letters !</span>
            <input id="e" input type="hidden" data-in="" value="2628002.88" type="text" />
            </div>
        </form>

JS :

// Get all your elements stores
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var d = document.getElementById("d");
var e = document.getElementById("e");
var f = document.getElementById("f");
var h = document.getElementById("h");
var i = document.getElementById("i");
var j = document.getElementById("j");
var astored = a.getAttribute("data-in");
var bstored = b.getAttribute("data-in");
var dstored = d.getAttribute("data-in");
var estored = e.getAttribute("data-in");
var hstored = h.getAttribute("data-in");
var istored = i.getAttribute("data-in");

function calculate(input1, input2, output) {
    output.innerHTML = input1.value * input2.value;
}
function add(input1, input2, input3, output) {
    output.innerHTML = parseInt( input1.innerHTML ) + parseInt( input2.innerHTML ) + parseInt( input3.innerHTML );
}
setInterval(function(){
    var temp;

    if (a == document.activeElement) {
        temp = a.value;
        if (astored != temp){
            astored = temp;
            a.setAttribute("data-in",temp);
            calculate(a, b, c);
        }
    } else if (b == document.activeElement) {
        temp = b.value;
        if (bstored != temp) {
            bstored = temp;
            b.setAttribute("data-in",temp);
            calculate(a, b, c);
        }
    } else if (d == document.activeElement) {
        temp = d.value;
        if (dstored != temp) {
            dstored = temp;
            d.setAttribute("data-in",temp);
            calculate(d, e, f);
        }
    } else if (e == document.activeElement) {
        temp = e.value;
        if (estored != temp) {
            estored = temp;
            e.setAttribute("data-in",temp);
            calculate(d, e, f);
        }
    } else if (h == document.activeElement) {
        temp = h.value;
        if (hstored != temp) {
            hstored = temp;
            h.setAttribute("data-in",temp);
            calculate(h, i, j);
        }
    } else if (i == document.activeElement) {
        temp = i.value;
        if (istored != temp) {
            istored = temp;
            i.setAttribute("data-in",temp);
            calculate(h, i, j);
        }
    }
     add(c, f, j, elem_to_print_into);
}, 50);

a.onblur = calculate(a, b, c);
b.onblur = calculate(a, b, c);
d.onblur = calculate(d, e, f);
e.onblur = calculate(d, e, f);
h.onblur = calculate(h, i, j);
i.onblur = calculate(h, i, j);
calculate(a, b, c);
calculate(d, e, f);
calculate(h, i, j);

Thanks for helping me creating the code and putting it in HTML...

Why does the fact that it already have an id is a problem? Also, you should consider giving some meaningful ids instead of just single letters — litelite, May 14 '16 at 01:43
So, can you help me with the code ? The code is for the input line. It already has an id "d" and if I create a js code it will have another id ! Do you have any ideas ? — Toufic Batache, May 14 '16 at 03:19
Is there a specific reason that you're using a text input field when it sounds like you only want users to input numbers? If you set the input's type attribute to "number", you can then use the `min` and `max` attributes to control the minimum and maximum values allowed in the field. Example: https://jsfiddle.net/GigabyteGiant/k3766k66/ — Brynden, May 14 '16 at 03:21
Ohhh, that's good but, if I put 13 it doesn't give me any error... I want like if you type 13 the one stays but the 3 goes away... Thanks for helping — Toufic Batache, May 14 '16 at 03:24
What I did was I just made min max and I forgot that there was an error line under the textfield_label... — Toufic Batache, May 14 '16 at 03:48

score 2 · Accepted Answer · answered May 14 '16 at 05:32

2

Use the "min" and "max" attributes for the input tag.

For your "e" input field, this would look something like this:

<input id="e" min="0" max="12" input type="hidden" data-in="" value="2628002.88" type="text" />

More info

answered May 14 '16 at 05:32

Caroline Hermans

391
1
5

Thanks for your answer ! It was for "d" and it is – Toufic Batache May 14 '16 at 06:04

Input field to accept only numbers from 0 to 12?

1 Answers1