Modifier la valeur div basée sur la valeur de la zone de texte en utilisant jQuery

Question

J'ai créé ce violon que la valeur div change en fonction de votre sélection de liste déroulante. http://jsfiddle.net/qSkZW/20/

Je veux aller un peu plus loin et c'est de créer un champ de zone de texte que si vous ajoutez par exemple le numéro 2 il va changer la valeur div à 240 (en réalité le 120 que vous trouverez dans le script il être un php var). S'il écrit 3 alors à 360.

De plus, il doit y avoir deux limitations.

1. Empêchez l'utilisation de caractères non numériques.
2. Le nombre maximal est préconfiguré (à partir d'une variable php). Comme si la valeur max est définie sur 10, si l'utilisateur écrit 30, il reviendra à 10.

Nous vous remercions de votre aide.

Answer 1

Ok, donc d'abord, créez un champ de texte (exemple id = « textfield »), puis modifiez l'action de votre auditeur

$("#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(); 
    } 
}); 

Pourriez-vous s'il vous plaît fournir plus d'informations sur # 2 (Je n'ai pas Une bonne compréhension de ce qui est supposé se produire)

Question rapide: pourquoi essayez-vous de mettre un prix dans un élément modifiable?

Answer 2

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/

Answer 3

Cela fera: http://jsfiddle.net/ebiewener/pBeM8/

Vous lier l'événement KeyDown à la zone de saisie afin d'éviter les caractères indésirables d'être entré, et lier l'événement keyup dans le contrôle de commande la valeur & modifie la hauteur de la div.

$('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); 
});