Jquery: Update css from a form entry.

Question

Hello,

I'm new to jQuery and I want to have a input box from a form called "width" and when you type a value (lets say "300") it will instantly update the div "#box" to a width of 300px.

Thank you!

Answer 1

One way:

jQuery("#input").change( function(){ 
    jQuery("#box").css("width", jQuery("#input").val()); });

Basically when the input value changes, set the css attribute of #box to use the input width.

Answer 2

$("textbox").blur(function() {
    $("#box").css("width") = $("textbox").val();
});

Answer 3

// blur is triggered when the focus is lost
$("#my_input_field_id").blur(function() {
    var newWidth = $(this).text();
    $("#box").width(newWidth); // the width function assumes pixels
    // alternately, use .css('width', newWidth);
});

If you want this to work as the user types (so if they type 500, it updates on 5 to 5, 50 when 0 is added, then 500 on the final 0), then bind to the keypress event.

Answer 4

$("#txt1").bind("keypress", function(){
    var val = parseInt($(this).val(), 10);
    $("#box").css({'width': val + 'px'});
});