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
