Controler la value d'un <input etc./>

**quasinewbie** · 06/05/2011, 10h23

Bonjour,

Voici le code HTML de ma page

Code html :

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
 
<body>
<div id="measuring_tape_rolling_picto"></div>
<div id="measuring_tape_cursor">
       <input type="hidden" id="mouseX" value="???"/>   
</div>
<div id="measuring_tape_fixed_picto"></div>
<div id="measuring_tape_numeric">
       <!-- Ca ne marche pas ici : --> <input type="hidden" id="numeriX" value="???"/>
</div>
 
<div style="float:right">
       <input type="text" id="debug" value="debug"></input>
       <!-- Ca marche ici : <input type="hidden" id="numeriX" value="???"/> -->
</div>
</body>

Comme vous le voyez quelques <div> et <input> que je piolote par javascript.

Ce qui me pose problème, c'est l'input "numeriX" en effet partout dans mon javascript $('#numeriX').val() me retourne undefined, ce qui d'autant plus frustant c'est que son jumeau l'input "mouseX" lui fonctionne très bien ! Aussi bien en lecture $('#mouseX).val() qu'en écriture $('#mouseX).val(newval)

Si je déplace <input type="hidden" id="numeriX" value="???"/> à la fin avec l'input de debug, là ça marche, mais c'est intellectuellement frustrant je trouve ! Ce <input type="hidden" id="numeriX" value="???"/> est sémantiquent rattaché à la <div id="measuring_tape_numeric">

Pour information voici l'extrait de mon javascript/jquery

Code js :

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
20
21
 
    $('#measuring_tape_numeric').bind("keydown", function (e) {
        if (e.keyCode >= 96 && e.keyCode <= 105)
        {
            $c = (parseInt(e.keyCode) - 96);
            if ($('#numeriX').val() == "ongoing")
            {
                alert($('#numeriX').val() + ' num ' + $c);
            }
            else
            {
                alert($('#numeriX').val() + ' num ' + $c);
                $('#numeriX').val("ongoing");
                $('#measuring_tape_numeric').text($c + 'mm');
            }
        }
        else if (e.keyCode == 13)
        {
        alert('enter'+e.keyCode);
        }
});

$('#numeriX').val() me renvoie toujours "undefined"

**Loceka** · 06/05/2011, 11h00

A priori il n'y a aucune raison pour que ça marche sur le debug et pas sur le numeriX.

Tu peux faire voir le code qui fonctionne sur le debug ?

**quasinewbie** · 06/05/2011, 11h03

Voici mon javascript dans son intégralité.

Code js :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
/*
* Author : byAnhor
*/
 
$(document).ready(function () {
 
    $width = 200;
    $('#measuring_tape_rolling_picto').css('width', $width);
    $('#measuring_tape_fixed_picto').css('left', $width);
    $('#measuring_tape_cursor').css('left', $width);
    $('#measuring_tape_numeric').css('top', 0);
    $('#measuring_tape_numeric').css('left', parseInt($width) + parseInt($('#measuring_tape_fixed_picto').css('width')));
 
    bpx_px =  $('#measuring_tape_rolling_picto').css('background-position-x');
    bpx = remove_px($('#measuring_tape_rolling_picto').css('background-position-x'));
    $('#measuring_tape_numeric').text((bpx + parseInt($width) + 'mm'));
    $('#debug').val("validated");
 
    $('#measuring_tape_rolling_picto').bind("mouseover", function (e) {
        $('#mouseX').val(e.screenX);
        $('#measuring_tape_rolling_picto').bind("mousemove", function (e) {
            $oldMouseX = $('#mouseX').val();
            $newMouseX = e.screenX;
            $old_bpx_px = $('#measuring_tape_rolling_picto').css('background-position-x');
            old_bpx = remove_px($old_bpx_px);
            if (parseInt($oldMouseX) > parseInt($newMouseX)) {
                if ($('#measuring_tape_numeric').text() != "1mm")
                {
                    $('#measuring_tape_rolling_picto').css('background-position-x', '' + (old_bpx + 1) + 'px');
                    $a = ('' + ($width - (old_bpx + 1)));
                    $('#measuring_tape_numeric').text($a + 'mm');
                }
            } else if (parseInt($oldMouseX) < parseInt($newMouseX)) {
                if ($('#measuring_tape_numeric').text() != "1500mm")
                {
                    $('#measuring_tape_rolling_picto').css('background-position-x', '' + (old_bpx - 1) + 'px');
                    $a = ('' + ($width - (old_bpx - 1)));
                    $('#measuring_tape_numeric').text($a + 'mm');
                }
            }
            $('#mouseX').val($newMouseX);
        });
    });
    $('#measuring_tape_rolling_picto').bind("mouseout", function (e) {
        $('#measuring_tape_rolling_picto').unbind("mousemove"); 
    });
    $('#measuring_tape_numeric').bind("keydown", function (e) {
        if (e.keyCode >= 96 && e.keyCode <= 105)
        {
            $c = (parseInt(e.keyCode) - 96);
            if ($('#numeriX').val() == "ongoing")
            {
                alert($('#numeriX').val() + ' num ' + $c);
            }
            else
            {
                alert($('#numeriX').val() + ' num ' + $c);
                $('#numeriX').val("ongoing");
                $('#measuring_tape_numeric').text($c + 'mm');
            }
        }
        else if (e.keyCode == 13)
        {
        alert('enter'+e.keyCode);
        }
 
/*        if (e.keyCode >= 96 && e.keyCode <= 105)
        {
            $c = (parseInt(e.keyCode) - 96);
        alert($c);
            if ($('#debug').val() == "ongoing")
            {
                $before = remove_px($('#measuring_tape_numeric').text());
                $('#measuring_tape_numeric').text($before + $c + 'mm');
            }
            else
            {
                $('#measuring_tape_numeric').text($c + 'mm');
                $('#numeriX').val("ongoing");
            }
        }
        else if (e.keyCode == 13)
        {
        alert("enter");
            $('#numeriX').val("validated");
            $('#debug').val("validated");
            $('#measuring_tape_rolling_picto').css('background-position-x', '' + ($width - $('#numeriX').val()) + 'px');
        }*/
    });    
 
    function remove_px($string) {
        a = $string.indexOf("px");
        return parseInt($string.substring(0, a));
    }
    function remove_mm($string) {
        a = $string.indexOf("mm");
        return parseInt($string.substring(0, a));
    }
    function mm2cm($string) {
        l1 = $string.length();
        $b = $string.substring(0, l1-2);
        l2 = $b.length();
        $c = $b.substring(0, l2-1) + '.' + $b.substring(l2, 1) + 'cm';
        return $c;
    }
});

**Loceka** · 06/05/2011, 11h39

Bon chez moi j'ai pas jQuery (et j'ai pas le courage de le télécharger

) mais en retranscrivant ta fonction en javascript standard ça marche :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
	<title>test</title>
	<script type="text/javascript">
	function test(e) {
		var lettre = String.fromCharCode(e.keyCode);
		if (lettre >= "A" && lettre <= "Z") {
			$c = (parseInt(e.keyCode) - 64);
			var num = document.getElementById("numeriX");
			if (num.value == "ongoing") {
				alert(num.value + ' num ' + $c);
			}
			else {
				alert(num.value + ' num ' + $c);
				num.value = "ongoing";
				document.getElementById('measuring_tape_numeric').firstChild.data = ($c + 'mm');
			}
		} else if (e.keyCode == 13) {
			alert('enter'+e.keyCode);
		}
	}
 
	</script>
</head>
<body>
	<div id="measuring_tape_fixed_picto"></div>
	<div id="measuring_tape_numeric" onkeydown="test(event)">
		<input type="text" value="div"/>
		<input type="hidden" id="numeriX" value="???"/>
	</div>
</body>
</html>

J'ai juste :

Ajouté un input dans le div pour que le focus puisse se faire sur le div (sinon la fonction n'est jamais appellée)
changé les keyCode par [65, 91] ("A", "Z") parce que je n'avais aucun moyen de rentrer un caractère entre 96 et 105 avec mon clavier. D'ailleurs j'ai un doute sur le fait que tu y arrives

**quasinewbie** · 06/05/2011, 11h39

C'est ici que ça se passe en réalité :
http://byanhor.free.fr/svgweb/sewing...ng-slicer.html

Quand je joue avec la souris sur le ruban mètre, ça met à jour le contenu de ma <div id="measuring_tape_numeric"> avec le nombre de mm

Réciproquement quand j'appuie sur une touche numérique sur ma <div id="measuring_tape_numeric"> je voudrais mettre à jour le background-position-x de mon ruban mètre.

Au premier appui (par ex. "5"), je passe la valeur de mon <input> "numeriX" à "ongoing" et le texte de ma <div id="measuring_tape_numeric"> à 5mm

Au second appui (par ex. "2"), la valeur de mon <input> "numeriX" reste à "ongoing" et le texte de ma <div id="measuring_tape_numeric"> passe à 52mm

Quand je fais "entrer" ça valide, et je passe la valeur de mon <input> "numeriX" à "done"

Problème donc dès le premier appui, $('#numeriX').val("ongoing"); ne marche pas, et je ne peux pas poursuivre avec un second chiffre.

Autre bizarrerie, mais qui est sans doute liée :

Code html :

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

1
2
3
4
5
6
7
 
  <div id="measuring_tape_cursor">
  	<input type="hidden" id="mouseX" value="mouseX"/>
  </div>
  <div id="measuring_tape_numeric">
  	<input type="hidden" id="numeriX" value="numeriX"/>
  </div>

Si je remplace le type="hidden" par type="text" la boite apparait bien pour l'input mouseX, mais si je fais de même avec l'input numeriX la boite reste désespérément invisible

**quasinewbie** · 06/05/2011, 11h40

Il y a eu téléscopage de message, je regarde ça, merci

**quasinewbie** · 06/05/2011, 11h48

Code :

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

alert(document.getElementById('numeriX'));

Ca me donne 'null'

Controler la value d'un <input etc./>

jQuery

Vue hybride

Discussions similaires

Partager

Partager