Accès aux attributs d'un nested field

Version imprimable

Bonjour,
Etant nouveau en javascript et ne sachant pas quoi chercher exactement, j'espère que vous pourrez m'aider parce que je n'ai pas réussi à trouver ce qui pourrait m'aider jusqu'à maintenant :/ .
Voilà le problème que je rencontre actuellement :
J'ai crée un projet sous Ruby on Rails et utilise javascript pour créer/détruire des champs à la volée. Cependant, je n'arrive pas à effectuer de calculs sur les champs :(. Je pense que c'est surement parce que je n'arrive pas à faire passer les attributs dans la fonction.

Voici le code de mon HTML.erb :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div class="fields"> <p> <%= f.label :description, "Decription" %> <%= f.text_field :description %> </br> <%= f.label :TVA,"TVA" %> <%= f.text_field :TVA %> </br> Prix : <input type="text" size="25" name="Prix" id="prix" onselect="calcul(this)"> </br> Quantite : <input type="text" size="25" name="Quantite" id="quantite" onselect="calcul(this)"> </br> Montant HT: <input type="text" size="25" name="Montant HT" id="montant" onselect="calcul(this)"> </br> <%= f.label :type,"Type" %> <%= f.text_field :type %> </br> <%= f.label :ref_prod_serv, "Reference produit" %> <%= f.text_field :ref_prod_serv%> </br> <%= link_to_remove_fields "remove", f %><br /> </p> </div>
et mon applications :
Code:

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 function remove_fields(link) { $(link).previous("input[type=hidden]").value = "1"; $(link).up(".fields").hide(); } function add_fields(link, association, content) { var new_id = new Date().getTime(); var regexp = new RegExp("new_" + association, "g") $(link).up().insert({ before: content.replace(regexp, new_id) }); function calcul(f) { var qte = f.getElementById('quantite').getValue() ; var prix = f.getElementById('prix').getValue() ; if(qte=='') qte = 0; if(prix == '') prix = 0; f.getElementById('montant').setValue(qte * prix) ; } }
Il n'y a pas d'erreurs lors de l'exécution mais il ne se passe rien ...
J'ai bien essayé avec un document.getElementBy... mais rien :/ d'où les fantaisies du code avec le this ...
Donc voilà si quelqu'un pouvait m'aider ça serait sympa :)

04/05/2012, 14h53
MaitreKaio

Quand tu dis qu'il n'y a pas d'erreur, tu veux dire qu'en regardant la console JS de ton navigateur tu ne vois pas d'erreur ? Si c'est le cas ça m'étonne.
Sinon, je vois que dans ta fonction calcul tu utilises getElementById() sur ton paramètre f (qui si j'ai bien compris est le champ de saisie à l'origine de l'appel), mais cette méthode est une méthode de document, tu dois donc faire document.getElementById().
D'autre part, tu accèdes aux valeurs des champs par des appels à getValue(). Je pense que tu dois plutôt utiliser la propriété 'value'.
04/05/2012, 15h44
SpaceFrog

il serait plus intéressant de voir le code html généré, et non pas le code serveur ...

En supposant que le code HTML généré c'est le code source, voici ce que j'obtiens pour la classes field.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<div class="fields">
  <p>
 
  <label for="facture_champs_attributes_2_description">Decription</label>
  <input id="facture_champs_attributes_2_description" name="facture[champs_attributes][2][description]" size="30" type="text" /> </br>
  <label for="facture_champs_attributes_2_TVA">TVA</label>
  <input id="facture_champs_attributes_2_TVA" name="facture[champs_attributes][2][TVA]" size="30" type="text" />  </br>
 
  Prix : <input type="text" size="25" name="Prix" id="prix" ">  </br>
  Quantite : <input type="text" size="25" name="Quantite" id="quantite">  </br>
  Montant HT: <input type="text" size="25" name="Montant HT" id="montant" > </br>
    javascript_include_tag :defaults, :cache =&gt; true 
 
  <label for="facture_champs_attributes_2_type">Type</label>
  <input id="facture_champs_attributes_2_type" name="facture[champs_attributes][2][type]" size="30" type="text" />  </br>
  <label for="facture_champs_attributes_2_ref_prod_serv">Reference produit</label>
  <input id="facture_champs_attributes_2_ref_prod_serv" name="facture[champs_attributes][2][ref_prod_serv]" size="30" type="text" />  </br>
 
  <a href="#" onclick="calcul(this); return false;">calcul</a>
  <input id="facture_champs_attributes_2__destroy" name="facture[champs_attributes][2][_destroy]" type="hidden" value="false" /><a href="#" onclick="remove_fields(this); return false;">remove</a><br />
 
        </p>
 </div>

En fait j'avais déjà essayé avec document.GetElementBy mais ça ne marchait pas non plus :/.
Et là je me suis mis au jQuery pour voir si ça ne marcherait pas mieux :/
Si il vous manque des choses n'hésitez pas ça ne fait que 2 semaines que je me suis mis au web donc x)

04/05/2012, 16h11
chuuby

Bon là avec le jQuery j'arrive à faire un calcul sur un champ mais pour les autres il aime pas :/
04/05/2012, 16h12
SpaceFrog

Code:

f.getElementById('montant').setValue(qte * prix) ;

setValue() ??? 8O

J'essayais un peu de tout en fait x)
Bon sinon voilà le code en jQuery un peu plus propre je pense
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function calcul() { var qte = $("#quantite").val() ; var prix = $("#prix").val() ; if(qte=='') qte = 0; if(prix == '') prix = 0; $("#montant").val(qte*prix); }
Doit y'avoir un système d'indices derrière non ?

04/05/2012, 16h19
SpaceFrog

d'indices ?
tu as plusieurs éléments qui portent le même id ??
04/05/2012, 16h22
chuuby

Euh oui mais je viens de corriger en fait en ayant vu le code source... (j'avais imposer les id en dur ...)
Ca devrait mieux marcher maintenant.

un id doit etre unique sur la page !!!

maintenant si tu veux faire une operation sur les elements contenu dans un div de classe donné, jquery te permet d'atteindre les enfants de ce div ...

par exemple si tes inputs ont tous le même name:

Code:

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
<script type='text/javascript'>
 
 
$(function(){
 $(".calc").click(function(){
 idx=$(this).val().match(/.$/)
 obj=$("#prod"+idx)
obj .find("[name='total']").val( obj.find( "[name='prix']").val() * obj.find( "[name='qte']").val()) 
 })
 
})
 
 
</script>
</head>
<body>
<div id="prod1">
prix <input type="text" name="prix" value="1" /><br/>
qte <input type="text" name="qte" value="1" /><br/>
total <input type="text" name="total" value="" /><br/>
</div>
<hr/>
<div id="prod2">
prix <input type="text" name="prix" value="2" /><br/>
qte <input type="text" name="qte" value="2" /><br/>
total <input type="text" name="total" value="" /><br/>
</div>
<hr/>
<div id="prod3">
prix <input type="text" name="prix" value="3" /><br/>
qte <input type="text" name="qte" value="3" /><br/>
total <input type="text" name="total" value="" /><br/>
</div>
<hr/>
<br/>
<input type="button" class="calc" value="go1" /><br/>
<input type="button" class="calc" value="go2" /><br/>
<input type="button" class="calc" value="go3" /><br/>
 
 
</body>
</html>

Hmmm le nom n'est pas fixe, il est suivi d 'un indice comme suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<label for="facture_champs_attributes_0_description">Decription</label>
  <input id="facture_champs_attributes_0_description" name="facture[champs_attributes][0][description]" size="30" type="text" /> </br>
  <label for="facture_champs_attributes_0_TVA">TVA</label>
  <input id="facture_champs_attributes_0_TVA" name="facture[champs_attributes][0][TVA]" size="30" type="text" />  </br>
  <label for="facture_champs_attributes_0_prix_unitaire">Prix unitaire</label>
  <input id="facture_champs_attributes_0_prix_unitaire" name="facture[champs_attributes][0][prix_unitaire]" size="30" type="text" />  </br>
  <label for="facture_champs_attributes_0_quantite">Quantite</label>
  <input id="facture_champs_attributes_0_quantite" name="facture[champs_attributes][0][quantite]" size="30" type="text" />  </br>
  <label for="facture_champs_attributes_0_montant_ht">Montant HT</label>
  <input id="facture_champs_attributes_0_montant_ht" name="facture[champs_attributes][0][montant_ht]" size="30" type="text" />  </br>
  <label for="facture_champs_attributes_0_type">Type</label>
  <input id="facture_champs_attributes_0_type" name="facture[champs_attributes][0][type]" size="30" type="text" />  </br>
  <label for="facture_champs_attributes_0_ref_prod_serv">Reference produit</label>
  <input id="facture_champs_attributes_0_ref_prod_serv" name="facture[champs_attributes][0][ref_prod_serv]" size="30" type="text" />  </br>

Et si je donne un nom fixe il me fait bien le calcul cependant je ne pourrais pas stocker les infos dans ma bdd sans indice. Il faut donc que j'arrive à récupérer l'indice du champ et ce sera bon je pense avec une fonction du genre

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function calcul() {
 
    var qte  = $("#facture_champs_attributes_"+a+"_quantite").val() ;
    var prix = $("#facture_champs_attributes_"+a+"_prix_unitaire").val()     ;
 
    if(qte=='')
        qte = 0;
    if(prix == '')
        prix = 0;
 
    $("#facture_champs_attributes_"+a+"_prix_unitaire").val(qte*prix);
 
}

oulà tu te compliques l'existence là ...
mais bon si c'est la structure qui t'es imposée ...

passe le a en paramètre

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
function calcul(a) {
 
    var qte  = $("#facture_champs_attributes_"+a+"_quantite").val() ;
    var prix = $("#facture_champs_attributes_"+a+"_prix_unitaire").val()     ;
 
    qte=(qte=='')?0:qte;
    prix=(prix == '')?0:prix;
 
    $("#facture_champs_attributes_"+a+"_prix_unitaire").val(qte*prix);
 
}

Hmm le problème c'est que je ne vois pas où et comment le récupérer :/
Bon sinon truc de barbare mais pas élégant je balance le tout dans une boucle for ... mais c'est vraiment pas top.
Et imposer le nom en fait je vois comment faire vu que j' instancie de cette manière les champs :
Code:

1 2 3 4 5 6 7 <%= f.label :prix_unitaire,"Prix unitaire" %> <%= f.text_field :prix_unitaire %> </br> <%= f.label :quantite,"Quantite" %> <%= f.text_field :quantite %> </br> <%= f.label :montant_ht,"Montant HT" %> <%= f.text_field :montant_ht %> </br>
et si je met à la place quelque chose du style :
<%= input type="text" name"prix" =%>
je perd toutes les infos quand à l' indexation et
<%= f.text_field :montant_ht , name = "montant" %> il n'aime pas non plus
Peut-être que la syntaxe n'est pas bonne mais rien trouver pour l'instant.

04/05/2012, 17h19
SpaceFrog

heu a quel moment souhaites tu lancer la fonction ?
Quand dois tu faire le calcul ?
04/05/2012, 17h22
chuuby

eh bien dans l'absolu j'aimerais faire le calcul pour un champ, mais si je galère trop je lancerais tous les calculs en même temps.
Le calcul se lance quand l'utilisateur appuies sur un bouton pour l'instant (il se lancera plus tard avec un onKeyup ou autre évent).
04/05/2012, 17h52
SpaceFrog

et le bouton se trouve ou ?
il y a un bouton pour chaque zone (index) ?
ou un bouton pour toutes les zones ?
04/05/2012, 18h35
chuuby

Oui il y a un bouton par zone mais j'aimerais à l'avenir que le calcul se fasse par un autre event, pour que celui ci se fasse automatiquement.

Code:

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
<script type='text/javascript'>
 
 
$(function(){
 $(".calc").click(function(){
 
 obj=$(this).parent("[id^='prod']")
obj .find("[name='total']").val( obj.find( "[name='prix']").val() * obj.find( "[name='qte']").val()) 
 })
 
})
 
 
</script>
</head>
<body>
<div id="prod1">
prix <input type="text" name="prix" value="1" /><br/>
qte <input type="text" name="qte" value="1" /><br/>
total <input type="text" name="total" value="" /><br/>
<input type="button" class="calc" value="go1" /><br/>
</div>
<hr/>
<div id="prod2">
prix <input type="text" name="prix" value="2" /><br/>
qte <input type="text" name="qte" value="2" /><br/>
total <input type="text" name="total" value="" /><br/>
<input type="button" class="calc" value="go2" /><br/>
</div>
<hr/>
<div id="prod3">
prix <input type="text" name="prix" value="3" /><br/>
qte <input type="text" name="qte" value="3" /><br/>
total <input type="text" name="total" value="" /><br/>
<input type="button" class="calc" value="go3" /><br/>
</div>
<hr/>
<br/>
</body>
</html>

et sur le blur des champs par exemple :

Code:

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
<script type='text/javascript'>
 
 
$(function(){
 $("[id^='prod'] [name='prix'],[id^='prod'] [name='qte']").blur(function(){
 
 obj=$(this).parent("[id^='prod']")
obj .find("[name='total']").val( obj.find( "[name='prix']").val() * obj.find( "[name='qte']").val()) 
 })
 
})
 
 
</script>
</head>
<body>
<div id="prod1">
prix <input type="text" name="prix" value="1" /><br/>
qte <input type="text" name="qte" value="1" /><br/>
total <input type="text" name="total" value="" /><br/>
<input type="button" class="calc" value="go1" /><br/>
</div>
<hr/>
<div id="prod2">
prix <input type="text" name="prix" value="2" /><br/>
qte <input type="text" name="qte" value="2" /><br/>
total <input type="text" name="total" value="" /><br/>
<input type="button" class="calc" value="go2" /><br/>
</div>
<hr/>
<div id="prod3">
prix <input type="text" name="prix" value="3" /><br/>
qte <input type="text" name="qte" value="3" /><br/>
total <input type="text" name="total" value="" /><br/>
<input type="button" class="calc" value="go3" /><br/>
</div>
<hr/>
<br/>
</body>
</html>

07/05/2012, 10h12
chuuby

En fait je dois arriver à stocker les attributs ans une base de données. De ce fait je dois créer les champs de la sorte :
<%= f.text_field :prix_unitaire %>
pour que le champs soit associé à l'attribut.
Ainsi si je crée le champ avec <input type="text" ... /> celui-ci ne sera pas associé à l'objet.
Cependant je rencontre un autre problème : quand je crée une page, j'ai bien dans le code source mes 3 objets champs.
Malheureusement quand j'ajoute un champ avec le code javacript, celui-ci n'apparait pas dans le code source. Du coup je ne peux faire de calculs sur celui-ci en passant par les index. Je me demande même si je peux y accéder tout court ...
07/05/2012, 10h41
SpaceFrog

Code:

Malheureusement quand j'ajoute un champ avec le code javacript, celui-ci n'apparait pas dans le code source. Du coup je ne peux faire de calculs sur celui-ci en passant par les index. Je me demande même si je peux y accéder tout court ...

Dans le code source de départ non , mais dans le code source généré oui !
Par contre poru l'attribution des evenement sur les objets ajoutés dynamiquement regarde du cote le on() live() ou delegate() de jquery ...
07/05/2012, 11h57
chuuby

Ah oui effectivement. En effet j'avais des ID du style 1092842984... pour les champs crées ...
Bon je crois que pour accéder aux données je vais travailler sur les noms des champs en récupérant le numéro d'id avec une belle fonction...
07/05/2012, 12h11
SpaceFrog

attention un id ne doit jamais être integralement numérique ni commencer par du numérique ...

Ah oui ^^. Non en fait l'id entier est de la forme
Code:

1 2 3 <input id="facture_champs_attributes_1336386166940_description" name="facture[champs_attributes][1336386166940][description]" size="30" type="text">
Mais est-il possible d'accéder à ces données ? Parce que j'ai cherché à récupérer l'id du champ avec un $(this).id mais bien sûr cela ne marche pas.

Edit :
Bon j'essaye de passer par des
Code:

1 2 3 4 5 6 7 8 var prix = document.forms[0].elements[5].value; var qte = document.forms[0].elements[6].value; qte = (qte == '') ? 0 : qte; prix = (prix == '') ? 0 : prix; document.forms[0].elements[7].value(qte*prix);
la récupération d'infos passe bien mais pour setter les valeurs ça ne marche pas...
Aussi dès que je passe à document.forms[1] pour passer au champs suivant (normalement) rien ne se passe....
Y a des règles spéciales pour l'utilisation de ce code par hasard ou ??

RE Edit : Bon j'ai résolu le pb en utilisant a bon escient les balises <FORM> et en utilisant :
Code:

1 2 3 4 5 6 7 8 9 10 for(i=1;i<document.forms.length;i++){ var prix = document.forms[i].elements[2].value; var qte = document.forms[i].elements[3].value; qte = (qte == '') ? 0 : qte; prix = (prix == '') ? 0 : prix; document.forms[i].elements[4].value=qte*prix }