Maxlength limit for onClick button input

Question

I'm creating a simple form to allow customers to input a number into a form field, which should have a limit of 6 characters.

The numbers are submitted to our database, so the customer needs to see them before submitting.

I have used the script below to create the number submission into the form input text field (which can then be sent to the DB). I went for this method as the majority of our audience on on mobiles, so i didn't think a standard text field input was user friendly (open to any alternatives on this).

<input name="ans" type="text" size="6" maxlength="6"><br>
<p><input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'"></p>

<p><input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'"></p>

<p><input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'"></p>

<p><input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset"></p>
<p><input type="submit" name="submit" value="Submit"></p>

The maxlength function just doesn't work when the numbers are added to the 'ans' input in this way and i have tried to look for JS and JQuery solutions, and the only one i can find replaces the input with an error after the character limit has been exceeded - rather than just limit the number of inputs a user can add.

Can anyone help?

Thanks

Steve

I'm still thinking those buttons aren't really necessary. I understand it's more user friendly for mobile devices, but i dont know... people are used to type in text forms in smartphones all the time. Just my opinion. — Clyff, Jul 14 '15 at 16:38

score 2 · Accepted Answer · edited Jul 14 '15 at 15:41

2

You can much more easily use a type="number" or type="tel" to allow mobile users to enter numbers. It will bring up a "keypad", much like you tried to create here:

<input type="number" max="999999">
<input type="tel" max="999999">

edited Jul 14 '15 at 15:41

Spencer May

4,266
9
28
48

answered Jul 14 '15 at 15:08

Organiccat

5,633
17
57
104

For a number input, don't you just set the `max` (and min if needed) rather than `maxlength`? – Spencer May Jul 14 '15 at 15:11
No, that sets the max and min accepted values, rather than the length. – Organiccat Jul 14 '15 at 15:13
You can see here http://jsfiddle.net/joywr6Lz/ that the `maxlength` does not work with a number input. On submit, the `max` attribute displays an error if over 999999 (6 number places). It is also discussed on Stack Overflow here http://stackoverflow.com/questions/8354975/how-to-add-maxlength-for-html5-input-type-number-element – Spencer May Jul 14 '15 at 15:17
Huh, would you look at that, I've switched up my answer. Thanks! – Organiccat Jul 14 '15 at 15:24
Thank you - i'll get this added and tested – user3607909 Jul 15 '15 at 16:20

perennial_ · Answer 2 · 2015-07-14T15:23:49.253

What you need to do is write a function which checks the length of the answer, and then doesn't allow the user to add more numbers if they have exceeded the limit. Additionally, you can optimize your code a little better (in my opinion) if you call this same function onClick and just append the value of your button. Attached is some code I have to do something very similar to what you need (I think). Side note: I never encourage using tables to format inputs, but this was the simplest way to whip up an example. Hopefully this helps you :)

HTML:

<input type="text" placeholder="123-456-7890" id="inputMethod" />
    <table>
        <tr class="numberPadRow">
            <td><button type="button" value="1" onclick="appendValue(this);"> 1 </button></td>
            <td><button type="button" value="2" onclick="appendValue(this);"> 2 </button></td>
            <td><button type="button" value="3" onclick="appendValue(this);"> 3 </button></td>
        </tr>
        <tr class="numberPadRow">
            <td><button type="button" value="4" onclick="appendValue(this);"> 4 </button></td>
            <td><button type="button" value="5" onclick="appendValue(this);"> 5 </button></td>
            <td><button type="button" value="6" onclick="appendValue(this);"> 6 </button></td>
        </tr>
        <tr class="numberPadRow">
            <td><button type="button" value="7" onclick="appendValue(this);"> 7 </button></td>
            <td><button type="button" value="8" onclick="appendValue(this);"> 8 </button></td>
            <td><button type="button" value="9" onclick="appendValue(this);"> 9 </button></td>
        </tr>
        <tr class="numberPadRow">
            <td><button type="button" value="0" onclick="appendValue(this);"> 0 </button></td>     
        </tr>
    </table>

Javascript:

function appendValue(sender) {
    if ($('#inputMethod').val().length < 6) {
        $('#inputMethod').val($('#inputMethod').val() + "" + $(sender).val());
    } else {
        //set warning, the user tried to add a number past the limit
    }
}

While this will work, I think it vastly over complicates what his intention is, which is a telephone/numpad entry for a text field. — Organiccat, Jul 14 '15 at 15:14
True, this may not be the simplest solution, however the advantage lies in the fact that you can give the user a warning if they try to input too many numbers. — perennial_, Jul 14 '15 at 15:22

Maxlength limit for onClick button input

2 Answers2