1

Possible Duplicate:
How to impose maxlength on textArea in HTML using JavaScript

I have a grid of buttons where the user selects a button. Lets ignore buttons "True or False" and "Yes or No", the other buttons go from "3" to "26". Now there is a text-box (#numberAnswerTxt), where the user can select the number of answers the user wants. Now what I want to do is that the user cannot type in a number in the text-box which is more than the number of options from the button.

So for example if the user select button "3" from the grid, then in the text-box the user can only type in the number 3 as the maximum number in the text-box, if the user types in a higher number then the text-box should automatically change the number to the highest number which is "3".

Another example is that if the user select button "21" from the grid, then in the text-box the user can only type in the number 21 as the maximum number in the text-box, if the user types in a higher number then the text-box should automatically change the number to the highest number which is "21".

Does anyone know how to do this?

The code is in jsfiddle, click here

Thank You

Community
  • 1
  • 1
BruceyBandit
  • 3,978
  • 19
  • 72
  • 144
  • Maybe this will help: http://stackoverflow.com/questions/1125482/how-to-impose-maxlength-on-textarea-in-html-using-javascript – Nathan Dec 12 '11 at 00:55

4 Answers4

2

Something like this should do it:

// inside your document ready handler:

$("#numberAnswerTxt").change(function(e){
   this.value = Math.min(+this.value, +$("#gridTxt").val());
});

On change it will take the minimum value from what was typed and what was in the other field. The change event is triggered when you leave (tab or click out of) the field. If you want it to happen as the user types use keyup() instead of change().

Demo: http://jsfiddle.net/aMmNL/1/

You may want to add some validation that the value entered is actually a number. My code above uses the unary + operator to convert the string values to numbers, which isn't really necessary because (I'm pretty sure) the Math.min function converts for you, but note that it will return NaN if one of the values can't be converted.

NOTE: your jsfiddle has a document ready handler nested inside another document ready handler:

$(document).ready(function () { /* your code here */ });
// is equivalent to
$(function() { /* your code here */ });

Although it works to have more than one there's not much point unless they're in separate JS files, and there's no point in nesting them.

nnnnnn
  • 147,572
  • 30
  • 200
  • 241
  • Hi, thank you for your answer. Can I ask you one question though, if you was a user would you prefer the keyup function or the change function? – BruceyBandit Dec 12 '11 at 01:04
  • Thanks for validation but I actually have a function where it only allows numbers to be entered in textbox, I just did not include that function in jsfiddle – BruceyBandit Dec 12 '11 at 01:06
  • Change or keyup? Depends on the user - why don't you try both and see which _you_ prefer? _I_ don't really like keyup because it feels weird to have the value changing as I type it, but others might prefer it so that they don't have to leave the field to see the effect. For other validations keyup wouldn't work, e.g., if the number entered had to be _more_ than some value it may take several keystrokes to enter. – nnnnnn Dec 12 '11 at 01:07
  • Regarding the validation - my code above _doesn't_ validate, I was pointing out that you should add that. And note that any validation should allow for values entered via paste, drag'n'drop, etc. – nnnnnn Dec 12 '11 at 01:09
  • Your right it does feel wierd while entering it in, it is just that I don't want user to type in a number which is more than maximum but do not realise it changed to maximum number, the keyup means that they would see the number change but they might be wondering why it acts like that while entering in a number – BruceyBandit Dec 12 '11 at 01:11
  • your right, copy and paster a word in text box does paste into the textbox so I need to include a validation, thanks I would not of noticed that – BruceyBandit Dec 12 '11 at 01:14
1

Using jquery, just do a code like this;

$(document).ready(function() {
    $("#mytextbox").change(function() {
         var max = $("#mybutton").val();
         var number = $("#mytextbox").val();
         if(number > max) {
              $("#mytextbox").val(max);
         }
    });
});

Where mytextbox is your textbox with the number of answers and mybutton is field if the number selected by the user;

felipecrp
  • 999
  • 10
  • 16
1

http://jsfiddle.net/aMmNL/3/

Just add this code to the document.ready event handler:

$('#numberAnswerTxt').bind('keyup', function () {

    //get the integer value of the `#gridTxt` input
    var gridTxt = parseInt($('#gridTxt').val().replace(/[^0-9\.]+/g, ''));

    //if `#gridTxt`'s value has been set then limit this input's value to `#gridTxt`'s value
    if (gridTxt > 0) {
        this.value = parseInt(this.value.replace(/[^0-9\.]+/g, ''));
        if (this.value > gridTxt) {
            this.value = gridTxt;
        }

    //otherwise if no value has been set for `#gridTxt` then reset the value of this input
    } else {
        this.value = '';
    }
});
Jasper
  • 75,717
  • 14
  • 151
  • 146
1

This is a very simple solution I was working before I saw that other answers were posted. Here it is anyway.

$('#numberAnswerTxt').keyup(function(event) {
    var theval = $('#gridTxt').val();
    if (parseInt(theval) && !(this.value <= theval)) {
        this.value = theval;
    }
});

Edit:

Perhaps it would be better to account for multiple events (like onchange as others have mentioned):

// onChange and onKeyUp now fire the same event handler
$('#numberAnswerTxt').bind('keyup change', function(event) {
    var theval = $('#gridTxt').val();
    if (parseInt(theval) && !(this.value <= theval)) {
        this.value = theval;
    }
});
Yes Barry
  • 9,514
  • 5
  • 50
  • 69