Discussion :

[Knular]

Salut !

Je suis actuellement en train de coder des programmes pour tout ce qui touche au crédit (Capital, taux, mensualité, etc..)

J'essaie de créer un formulaire qui se met à jour automatiquement en changeant les données, non pas à la fin en validant par un bouton mais en LIVE..

Sachant qu'en javascript il est possible de le faire (J'ai la solution), j'essaie de trouver un code en jquery pour actualiser directement l'input de type range et l'input de type text, quand un change l'autre doit faire de même en même temps.

Voici un début de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var credits = 100,
    html = '<li>Apply Credits: \
<input type="range"  min="0" max="200" value="'+credits+'" name="discount_credits" id="discount_credits" />\
<span>' + credits + '</span>\
</li>';
$("body").append(html);
$('#discount_credits').on("change mousemove", function() {
    $(this).next().html($(this).val());
});

Dans ce code comme vous pouvez le remarquer, j'envoie vers body un input qui donnera sa valeur à une prochaine balise span (Grâce à next() ) en même temps que je bouge le curseur de l'input range.

Je souhaite changer le span par un input de type text pour changer la valeur du curseur range et que cela se fasse en même temps..


J'ai essayé ça mais ça ne marche pas...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var credits = 100,
    html = '<li>Apply Credits: \
<input type="range"  min="0" max="200" value="'+credits+'" name="discount_credits" id="discount_credits" />\
<input type="text" value="'+credits+'" size="4">\
</li>';
$("body").append(html);
$('#discount_credits').on("change mousemove", function() {
    $(this).next().parseFloat('#discount_credits').val();
});

Merci !

[danielhagnoul]

Bonsoir.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var credits = 100,
        jObjInput = $( "<input/>", {
            "type" : "range",
            "min" : "0",
            "max" : "200",
            "value" : credits,
            "name" : "discount_credits",
            "mousemove" : function(){
                $( this ).next().text( $(this).val() );
            }
        });
 
    $( "<li/>", {
        "html" : '<label>Apply Credits : </label>'
    }).append( jObjInput ).append( '<span>' + credits + '</span>' ).appendTo( "body" );
 
});

[Bovino]

Sachant qu'en javascript il est possible de le faire (J'ai la solution), j'essaie de trouver un code en jquery

J'avoue que cette phrase me rend assez perplexe...
Déjà, parce que jQuery, c'est du JavaScript et surtout parce que si tu arrives à le faire en JavaScript natif, pourquoi vouloir le faire en jQuery si tu ne connais pas jQuery ?

[Golgotha]

mousemove

j'imagine le CPU du gazier monter à 100% à cause d'un passage de la souris rapide sur l'input

C'est pas un peux bourin ??

[Knular]

Bonjour,

Oui à me relire ce que j'ai écrit n'est pas très clair...
Je voulais dire par là que sans les inputs de type range, j'arrivais à faire les calculs directement en rentrant les données MAIS, aujourd'hui les simulateurs de crédit utilisent des inputs de type RANGE, je pense que c'est pour faire plus jolie et puis pour permettre aux gens d'utiliser leur tablette sans intégrer directement les données par des champs text...

J'ai trouvé la solution pour actualiser les données de mes inputs text et range en même temps :

Le code si ça intéresse des gens : http://jsfiddle.net/b1gcwcak/ (Ne pas oublier de loader le jquery)


MAIS j'ai un nouveau soucis, forcément...


Lorsque j'utilise le slider (input range) et que les données de l'input text se mettent à jour, je souhaite lancer une fonction grâce à un EVENT, problème je ne vois pas trop lequel utiliser.

Voici le code que j'utilise et en bleu ce qui ne va pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$('#mensualite_slider').on('input', function(){
    $('#mensualite').val($('#mensualite_slider').val());
	$('#mensualite_slider').on("change mousemove", function(){
        calcObject.run();
        });
});

Pour changer les donnée instantanément j'utilise .KEYUP, mais là pour l'input de type range, je ne sais pas quel EVENT doit être utilisé !


merci !

[Golgotha]

Quel est le problème exactement ? Avec ton code : calcObject.run(); se lancera bien au changement de l'input.

[danielhagnoul]

Je répondais simplement à la question : "l'équivalent d'un code JS en jQuery".

Question compréhensible pour un débutant. Pour qu'il s'y retrouve, il me semblait logique de produire un code HTML identique au sien.

Mais à mauvaise question (ne correspondant au problème), réponse inadéquate.

mousemove

j'imagine le CPU du gazier monter à 100% à cause d'un passage de la souris rapide sur l'input

C'est pas un peux bourin ??

Avant de critiquer, on teste !

[Golgotha]

Je critique la solution de départ, mon post concerne uniquement le premier message de la discution.