Question

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 value 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.

Answer 1

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?