Discussion :

[chuuby]

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 :

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
 
<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 :

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
 
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

[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'.

[SpaceFrog]

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

[chuuby]

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

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
 
<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)

[chuuby]

Bon là avec le jQuery j'arrive à faire un calcul sur un champ mais pour les autres il aime pas :/

[SpaceFrog]

Code :

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

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

setValue() ???

[chuuby]

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

Code :

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

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 ?