consiglio su funzione somma

[francesco_c]

ciao a tutti

ho realizzato questo funzioncina prendendo spunto da un'altra per effettuare la somma..

onKeyup="somma.risultato.value=Number(somma.taglia 1_1.value)+ Number(somma.taglia2_1.value)+ Number(somma.taglia3_1.value)+ Number(somma.taglia4_1.value)+ Number(somma.taglia5_1.value)"

il problema è che i campi sono di + di quelli che ho postato sopra e quindi ripetere questa operazione su tutti 18 campi diventa un macello, come potrei fare per parametrizzare tutta questa pappardella?

io vorrei che invece di riscrivere ogni volta questa, devo scrivere semplicemente

onKeyup="funzionesomma()"

ci ho provato ma niente da fare.

chi mi da un consiglio?

ho visto che ce ne sono altre in giri ma vorrei modificare questa.

grazie anticipatamente.

[pierofix]

Sì, si può fare tranquillamente. L'unica cosa - per capire meglio: potresti postarci un esempio di codice di markup inerente il form? Te lo chiedo perchè, agendo tramite DOM, si potrebbe risparmiare un bel po' di codice.

[francesco_c]

Originariamente inviato da pierofix
Sì, si può fare tranquillamente. L'unica cosa - per capire meglio: potresti postarci un esempio di codice di markup inerente il form? Te lo chiedo perchè, agendo tramite DOM, si potrebbe risparmiare un bel po' di codice.

certo, eccolo qui

         <td bgcolor="#FFFFCC">
          <input name="taglia1_1" type="text" id="taglia1_1" size="1" onKeyup="somma.risultato.value=Number(somma.taglia1_1.value)+ Number(somma.taglia2_1.value)+ Number(somma.taglia3_1.value)+ Number(somma.taglia4_1.value)+ Number(somma.taglia5_1.value)" onkeypress="Numeri()" /></td>
          <td>
          <input name="taglia2_1" type="text" id="taglia2_1" size="1" onKeyup="somma.risultato.value=Number(somma.taglia1_1.value)+ Number(somma.taglia2_1.value)+ Number(somma.taglia3_1.value)+ Number(somma.taglia4_1.value)+ Number(somma.taglia5_1.value)" onkeypress="Numeri()" /></td>
          <td bgcolor="#FFFFCC">
          <input name="taglia3_1" type="text" id="taglia3_1" size="1" onKeyup="somma.risultato.value=Number(somma.taglia1_1.value)+ Number(somma.taglia2_1.value)+ Number(somma.taglia3_1.value)+ Number(somma.taglia4_1.value)+ Number(somma.taglia5_1.value)" onkeypress="Numeri()" /></td>
          <td>
          <input name="taglia4_1" type="text" size="1" onKeyup="somma.risultato.value=Number(somma.taglia1_1.value)+ Number(somma.taglia2_1.value)+ Number(somma.taglia3_1.value)+ Number(somma.taglia4_1.value)+ Number(somma.taglia5_1.value)" onkeypress="Numeri()" /></td>
          <td bgcolor="#FFFFCC">
          <input name="taglia5_1" type="text" size="1" onKeyUp="somma.risultato.value=Number(somma.taglia1_1.value)+ Number(somma.taglia2_1.value)+ Number(somma.taglia3_1.value)+ Number(somma.taglia4_1.value)+ Number(somma.taglia5_1.value)" onkeypress="Numeri()" /></td>
          <td> 

e poi va a scrivere qui

<td><input name="risultato" type="text" id="risultato" value="0" size="1" onBlur="somma.totaletutti.value=Number(somma.risultato.value)+ Number(somma.risultato1.value)" readonly="" /></td> 

come puoi vedere esce un casino di codice ogni volta

[pierofix]

Sì, infatti. Per quanto mi riguarda, metterei prima a posto il codice di mark-up. Un codice di mark-up sano e corretto, infatti, è il punto di partenza essenziale per ogni passo successivo.

Ti faccio un esempio completo e poi magari lo adatti alle tue esigenze.

XHTML

<form action="tuoscript.xxx">
   <fieldset id="taglie"><legend>Specifica la taglia</legend>
      <ul>[*]
            <label for="taglia_1">Taglia 1</label>
            <input id="taglia_1" name="taglia_1" />
         [*]
            <label for="taglia_2">Taglia 2</label>
            <input id="taglia_2" name="taglia_2" />
         
         [/list]
   </fieldset>
   <fieldset><legend>Risultato</legend>
      <label for="risultato">Il risultato è</label>
      <input id="risultato" name="risultato" readonly="readonly" />
   </fieldset>
</form>


Javascript

window.onload = function()
{
   // Prepara tutti gli 'attori' dello script
   var taglie = document.getElementById('taglie')
   var taglie_inputs = taglie.getElementsByTagName('input')
   var risultato = document.getElementById('risultato')

   // Somma i valori di tutti i campi input contenuti nel fieldset #taglie
   function scrivi_risultato()
   {
      var totale = 0
      for (var i = 0; i < taglie_inputs.length; i++)
      {
         var valore = parseInt(taglie_inputs.item(i).value)
         if ( !isNaN(valore) )
         {
            totale += parseInt(taglie_inputs.item(i).value)
         }
      }
      risultato.value = totale
   }

   // Attriuisci la funzione somma all'onkeyup di tutti i campi input
   for (var i = 0; i < taglie_inputs.length; i++)
   {
      taglie_inputs.item(i).onkeyup = function()
      {
         scrivi_risultato()
      }
   }

   // Attribuisci valore '0' al risultato, appena caricata la pagina
   risultato.value = 0
}

Come vedi, in questo modo tutto il codice è relegato nello script, mentre la struttura XHTML rimane pulita ed attinente al suo reale lavoro: descrivere i contenuti.

Edit: Ho apportato una piccola modifica allo script.

[francesco_c]

wow!!!

spettacolare, complimenti

funziona alla grande.

ti chiedo un'ultima cosa ottenere un ulteriore somma...

<form action="tuoscript.xxx">
   <fieldset id="taglie"><legend>Specifica la taglia</legend>
      <ul>[*]
            <label for="taglia_1">Taglia 1</label>
            <input id="taglia_1" name="taglia_1" />
         [*]
            <label for="taglia_2">Taglia 2</label>
            <input id="taglia_2" name="taglia_2" />
         [*]
            <label for="taglia_2">Taglia 2</label>
            <input id="taglia_3" name="taglia_3" />
         [*]
            <label for="taglia_2">Taglia 2</label>
            <input id="taglia_4" name="taglia_4" />
         
         [/list]
   </fieldset>
    <fieldset id="taglie1"><legend>Specifica la taglia</legend>
      <ul>[*]
            <label for="taglia_1">Taglia 1</label>
            <input id="taglia_1" name="taglia_1" />
         [*]
            <label for="taglia_2">Taglia 2</label>
            <input id="taglia_2" name="taglia_2" />
         [*]
            <label for="taglia_2">Taglia 2</label>
            <input id="taglia_3" name="taglia_3" />
         [*]
            <label for="taglia_2">Taglia 2</label>
            <input id="taglia_4" name="taglia_4" />
         
         [/list]
   </fieldset>
   <fieldset><legend>Risultato</legend>
      <label for="risultato">Il risultato taglia1 è </label>
      <input id="risultato" name="risultato" readonly="readonly" />
   </fieldset>
   <fieldset><legend>Risultato</legend>
      <label for="risultato2">Il risultato taglia2 è </label>
      <input id="risultato2" name="risultato2" readonly="readonly" />
   </fieldset>
   <fieldset><legend>TOTALE</legend>
      <label for="risultato2">Il TOTALE TAGLIA1 E TAGLIA2 è </label>
      <input id="risultato2" name="risultato2" readonly="readonly" />
   </fieldset>
</form>

è possibile implementarlo con il tuo script?

grazie ancora

[pierofix]

Sì, direi che ci possiamo provare tranquillamente. Giusto per sapere che approccio usare, sei sicuro di avere al massimo due famiglie di taglie oppure possiamo concepire direttamente uno script che vada bene per una quantità arbitraria?

[francesco_c]

Originariamente inviato da pierofix
Sì, direi che ci possiamo provare tranquillamente. Giusto per sapere che approccio usare, sei sicuro di avere al massimo due famiglie di taglie oppure possiamo concepire direttamente uno script che vada bene per una quantità arbitraria?

si infatti sono molte di più, sono circa una 30ina, spero di non farti perdere molto la testa

grazie ancora per la disponibilità

[pierofix]

No, non preoccuparti, non cambia molto. In effetti il massimo sarebbe uno script che si adatti il più possibile alla struttura di mark-up e non viceversa.

Adesso comincio a pensarci su. Appena avrò fatto ti proporrò la soluzione, così vediamo se serviranno ulteriori affinamenti.

[francesco_c]

ti ringrazio,

aspetto tue notizie.

[pierofix]

Eccoci qua.

XHTML

<form action="tuoscript.xxx">
   <fieldset id="elenco_taglie"><legend>Tutte le taglie</legend>
      <fieldset><legend>Taglia 1</legend>
         <ul>[*]
               <label for="taglia_1_1">Taglia 1</label>
               <input id="taglia_1_1" name="taglia_1_1" />
            [*]
               <label for="taglia_1_2">Taglia 2</label>
               <input id="taglia_1_2" name="taglia_1_2" />
            
            [/list]
         


            <label for="risultato_1">Il risultato è</label>
            <input id="risultato_1" name="risultato_1" readonly="readonly" />
         </p>
      </fieldset>
      <fieldset><legend>Taglia 2</legend>
         <ul>[*]
               <label for="taglia_2_1">Taglia 1</label>
               <input id="taglia_2_1" name="taglia_2_1" />
            [*]
               <label for="taglia_2_2">Taglia 2</label>
               <input id="taglia_2_2" name="taglia_2_2" />
            
            [/list]
         


            <label for="risultato_2">Il risultato è</label>
            <input id="risultato_2" name="risultato_2" readonly="readonly" />
         </p>
      </fieldset>
      
   </fieldset>
   <fieldset>
      <legend>Risultato totale</legend>
         <label for="risultato_totale">Il risultato totale è</label>
         <input id="risultato_totale" name="risultato_totale" readonly="readonly" />
   </fieldset>
</form>


Javascript

window.onload = function()
{
   // Prepariamo tutti gli 'attori' dello script
   var elenco_taglie = document.getElementById('elenco_taglie')
   var taglie = elenco_taglie.getElementsByTagName('fieldset')
   var risultati_parziali = new Array()
      for (var i = 0; i < taglie.length; i++)
      {
         var parziale = taglie.item(i).getElementsByTagName('p').item(0).getElementsByTagName('input').item(0)
         risultati_parziali.push(parziale)
      }
   var risultato_totale = document.getElementById('risultato_totale')

   // Calcoliamo e scriviamo i risultati parziali
   function scrivi_risultato_parziale(collezione)
   {
      var taglie_inputs = collezione.getElementsByTagName('ul').item(0).getElementsByTagName('input')
      var taglie_risultato = collezione.getElementsByTagName('p').item(0).getElementsByTagName('input').item(0)

      var totale = 0
      for (var i = 0; i < taglie_inputs.length; i++)
      {
         var valore = parseInt(taglie_inputs.item(i).value)
         if ( !isNaN(valore) )
         {
            totale += parseInt(taglie_inputs.item(i).value)
         }
      }
      taglie_risultato.value = totale
   }

   // Calcoliamo e scriviamo il risultato totale
   function scrivi_risultato_totale()
   {
      var totale = 0
      for (var i = 0; i < risultati_parziali.length; i++)
      {
         var valore = parseInt(risultati_parziali[&#105;].value)
         if ( !isNaN(valore) )
         {
            totale += valore
         }
      }
      risultato_totale.value = totale
   }

   // Attribuiamo le funzioni di somma parziali e totale a tutti gli input
   for (var j = 0; j < taglie.length; j++)
   {
      taglie.item(j).onkeyup = function()
      {
         scrivi_risultato_parziale(this)
         scrivi_risultato_totale()
      }
   }
}

Forse ho scritto con troppa foga e magari ho sorvolato sull'eleganza formale di alcune parti di codice. Questo, tuttavia, è un problema risolvibile in un secondo momento. Prova intanto a vedere se risponde alle tue necessità (aggiungendo anche qualche nuova famiglia di taglie nel mark-up) e soprattutto se funziona (con il Blocco Note qui non ho una percezione molto ordinata del codice).