Form per somma

[tommyxxx]

Ciao.
Non sapendo niente di javascript avrei bisogno di un aiutino da voi.
Ho un form con un po' di radio button e dovrei fare la somma dei valori relativi all'opzione selezionata.

es.


Primo</p>
<input type="radio" name="prima" id="prima" value="20" > Giallo ---> 20 €

<input type="radio" name="prima" id="prima" value="10" > Verde ---> 10 €




Secondo</p>
<input type="radio" name="seconda" value="70"> Grande ---> 70 €

<input type="radio" name="seconda" value="35"> Piccolo ---> 35 €



Sostanzialmente mi servirebbe sapere "in diretta" la somma a seconda della scelta fatta.


Potete aiutarmi?

Grazie

[pierofix]

Io farei una cosa del genere.

XHTML

<form action="tuo_script.xxx" method="get">

   <fieldset id="opzioni"><legend>Scelte</legend>
      <ul>[*]
            Primo
            <ul>[*]
                  <input id="primo_1" name="primo" type="radio" value="20" />
                  <label for="primo_1">Giallo, 20€</label>
               [*]
                  <input id="primo_2" name="primo" type="radio" value="10" />
                  <label for="primo_2">Verde, 10€</label>
               [/list]
         [*]
            Secondo
            <ul>[*]
                  <input id="secondo_1" name="secondo" type="radio" value="70" />
                  <label for="secondo_1">Grande, 70€</label>
               [*]
                  <input id="secondo_2" name="secondo" type="radio" value="35" />
                  <label for="secondo_2">Piccolo, 35€</label>
               [/list]
         [/list]
   </fieldset>

   <fieldset id="invio"><legend>Invia il modulo</legend>
      <p id="somma"></p>
      

<input type="submit" value="invia" /></p>
   </fieldset>

</form>


Javascript

window.onload = function()
{
   var opzioni = document.getElementById('opzioni')
   var opzioni_inputs = opzioni.getElementsByTagName('input')
   var opzioni_inputs_radios = new Array()
      for (var i = 0; i < opzioni_inputs.length; i++)
      {
         if ( opzioni_inputs.item(i).getAttribute('type') == 'radio' )
         {
            opzioni_inputs_radios.push(opzioni_inputs.item(i))
         }
      }
   var invio = document.getElementById('invio')
   var somma = document.getElementById('somma')

   function elenco_selezioni()
   {
      var selezionati = new Array()
      for (var i = 0; i < opzioni_inputs_radios.length; i++)
      {
         if ( opzioni_inputs_radios[&#105;].checked )
         {
            selezionati.push(opzioni_inputs_radios[&#105;])
         }
      }
      return selezionati
   }
   function sommatoria(campi)
   {
      var totale = 0
      for (var i = 0; i < campi.length; i++)
      {
         totale += parseInt(campi[&#105;].value)
      }
      return totale
   }
   function scrivi_totale(valore)
   {
      somma.innerHTML = ''
      somma.innerHTML = 'La somma risulta essere '
      somma.innerHTML += valore
      somma.innerHTML += ' €'
   }

   for (var i = 0; i < opzioni_inputs_radios.length; i++)
   {
      opzioni_inputs_radios[&#105;].onchange = function()
      {
         var campi_selezionati = elenco_selezioni()
         var totale_somma = sommatoria(campi_selezionati)
         scrivi_totale(totale_somma)
      }
   }

   scrivi_somma(0)
}

Lo script è studiato in modo tale da funzionare con un numero qualsiasi di input radio (non sei quindi vincolato a due gruppi), basta che questi siano contenuti nel fieldset #opzioni. Il mark-up rimane pulito, in quanto tutte le varie funzioni vengono eseguite dallo script, senza bisogno di attributi di evento quali onclick, onchange e via dicendo. Si potrebbe migliorare in alcune parti, ma vedi intanto se funziona.

[tommyxxx]

fantastico, funziona a meraviglia.

ti ringrazio molto!

[pierofix]

Io l'ho provato solo su Firefox. Assicurati che abbia una compatibilità decente anche sugli altri.

[tommyxxx]

Anche su IE7 funzia a meraviglia, grazie ancora.