Change div value based on textbox value using jQuery

I created this fiddle that the div value changes based on your dropdown list selection. http://jsfiddle.net/qSkZW/20/

I want to take it one step further and this is to create a textbox field that if you add for example the number 2 it will change the div v开发者_运维百科alue to 240 (in real the 120 you find in the script it will be a php var). If it writes 3 then to 360.

Additionally there must be two limitations.

1. Prevent them from using non-numeric characters.
2. The maximum number is pre-configured (from a php variable). Like if the max value is set to 10, if the user writes 30 it will return to 10.

Thank you for your help.

Okay, so first, create a textfield (example id="textfield"), then modify your listener's action to

$("#quantity").change(function () {
    var price = parseInt($(this).val(), 10)*120
    $("#textfield").attr('value="'+price+'"');
    # sets the default value of #textfield to the selection from #quantity
    })
.change()

$("#textfield").blur(function () {
# when the element looses focus (they click/tab somewhere else)
        var valid = /^\d{2}$/;
        # this means any 2 numbers. change {2} to {3} or however many digits.
        # you can also also use d[0-10] to identify a range of numbers.

    if ( $(this).text() != valid ) {
        $("#message").text("Only numbers please!");
        $("#message").fadeIn();
        # add <span id="message" style="display:none;"></span> next to #textfield
        # enclose #textfield & #message in the same element (like <li> or <div>)
    }
    else {
        $("#message").fadeOut();
    }
});

Could you please provide more info about #2 (I don't have a clear understanding of what is supposed to happen)

Quick question: why are you trying to put a price in an editable element?

This will do it: http://jsfiddle.net/ebiewener/pBeM8/

You bind the keydown event to the input box in order to prevent the undesired characters from being entered, and bind the keyup event in order check the value & modify the div's height.

$('input').keydown(function(e){
   if(!(e.which >= 48 && e.which <=58) && e.which !== 8 && e.which !== 46 && e.which !== 37 && e.which !== 39){ //prevent anything other than numeric characters, backspace, delete, and left & right arrows
       return false;
   }
})
.keyup(function(){
   val = $(this).val();
   if(val > 10){
       val = 10;
       $(this).val(10);
   }
   $('div').height(val * 10);
});

var max = 30;
$('input').keyup(function() {
    var v = $(this).val();
    v = isNaN(v)?'':v;
    v = v > max ? max : v;
    $(this).val(v);
    $('div').html(v * 120);
});

http://jsfiddle.net/vWf2x/2/