Back to top

Autore Topic: ChronoForms 4.01 - OnClick su RadioButton che imposti un valore numerico  (Letto 5901 volte)

Offline aldobz

  • Esploratore
  • **
  • Post: 91
    • Mostra profilo
La mia richiesta potrà sembrare banale, ma niente è banale, quando non si sa come muoversi.
Ho creato un form con ChronoForms 4.01, nel quale ho un po' di check-box ed alcuni radio-buttons.
La scelta di quest'ultimi è inevitabile, giusto per impedire all'utente di effettuare una scelta multipla, cosa invece permessa con i check-box.


Vengo al dunque: i vari check-box si riferiscono a vari corsi ai quali l'utente può iscriversi. Ovviamente ogni corso ha un costo, e quindi in fondo al form sarebbe bello che un campo "totale" rappresentasse appunto il costo totale dei corsi ai quali l'interessato si iscrive.


Ma questo già funziona!! Nonostante la mia inesperienza in html e Javascript sono riuscito, basandomi su esempi trovati in internet, ad estrapolare il codice "minimo" che mi permettesse di raggiungere il mio scopo.
Ho fatto il 90%.
Ora devo fare in modo che il clic su un radio-button piuttosto che su un altro vada ad incrementare opportunamente il citato totale.
Come dire che se l'utente clicca l'opzione A, il totale deve aumentare di 30 Euro, se clicca la B di 40, se clicca la C di 50 Euro.


Per quanto io cerchi in giro, sia su forum italiani che stranieri, trovo esempi e problematiche diverse dalla mia.
Insomma, mi basterebbe sapere cosa mettere nel codice html in prossimità dei radio button e il corrispondente codice da piazzare nel "Load JS", tenuto conto che ho già attivo il codice che rileva correttamente i check-box cliccati, aggiornando il relativo totale.


Per completezza posto il codice attualmente utilizzato per gestire i check-box, sperando che basti una minima integrazione a detto codice per gestire anche i radio button.


Sono giorni che ci vado dietro, comincio a sognarmelo di notte....  :(
Conto sull'aiuto di chi sa, e ringrazio anticipatamente.


Codice HTML

Codice: [Seleziona]
<div id='kastl'>
.........
<input value="170.00" title="" type="checkbox" name="input_corso1" id="input_corso1" class="label_left" onclick="CalcolaTotale(this.form)"/>
.........
</ div>


Codice JS

Codice: [Seleziona]
function CalcolaTotale()
{
   var totale = 0;
   var kastl = $$('div#kastl input');
   for ( var i = 0; i < kastl.length; i++ ) {
      if ( kastl[i].checked ) {
       totale = totale + parseFloat(kastl[i].value);
      }
   }


   $('totale_s').innerHTML = " € "+totale.toFixed(2);
   $('totale_h').value = totale;
}

« Ultima modifica: 06 Dic 2013, 10:52:02 da aldobz »

Offline mmleoni

  • Global Moderator
  • Instancabile
  • ********
  • Post: 5547
  • Sesso: Maschio
  • Just another *nix coder/sysadmin...
    • Mostra profilo
a naso mi pare che quel codice funzioni anche per i radio buttons, io al limite userei onchange come evento.
certo è che devi cambiare il selettore css.

quel $$ è jQuery? in tal caso:

Codice: [Seleziona]
valoreSelezionato = parseFloat($$('input[name="nomegruppoRB"]:checked').val());
ove nomegruppoCBox immagino sia il corso cui si riferisce la serie di radio buttuns.

ciao,
marco

mmleoni web consulting - creazione siti web aziendali ed e-commerce avanzati - sviluppo moduli e componenti Joomla

Offline vales

  • Global Moderator
  • Instancabile
  • *****
  • Post: 8012
  • Sesso: Maschio
    • Mostra profilo
In questo vecchissimo post a suo tempo furono trovate varie soluzioni simili al tuo problema

http://forum.joomla.it/index.php/topic,98717.0.html
Download e demo di Albo Pretorio On Line per Joomla 1.5 e Joomla 2.5 e 3
Moduli scuola On Line v1 per Joomla 3
http://valesweb.altervista.org

Offline aldobz

  • Esploratore
  • **
  • Post: 91
    • Mostra profilo
Lasciatemi dire GRAZIE sia a Marco (mmleoni) che a Valerio (Vales) che si sono presi la briga di rispondermi.
Sono quasi le 2 di notte, e non credo di avere la lucidità per mettere in pratica i consigli che mi avete dato.
Ma domani è un altro giorno, e probabilmente troverò il momento e la freschezza mentale per seguire i vostri suggerimenti.
Intanto GRAZIE !!!!!


[AGGIORNAMENTO]


Rieccomi, dopo aver cercato per ore di mettere a frutto i vostri consigli.
Come dicevo, il form dovrebbe permettere l'iscrizione a numerosi corsi, alcuni selezionabili con un check-box, altri due con radio button. Per maggiore chiarezza posto qui di seguito una versione ridotta del form e il relativo codice, ribadendo che il campo "totale" viene regolarmente aggiornato al clic di uno dei due check-box.
Vorrei che si aggiornasse anche al clic dei radio buttons.







codice HTML  (osservo che qui alcuni "</ div> vengono trasformati in "<>"  :o


Codice: [Seleziona]

<div id='kastl'>   


<div class="ccms_form_element cfdiv_radio" id="input_radio_731_container_div" style=""><label>ATLETICA bambini / agonisti</label>
<input type="hidden" name="input_radio_73" value="" alt="ghost"  onChange="AggiornaTotale(this.form)"/>
<div style="float:left; clear:none;">


<input type="radio" name="input_radio_73" id="input_radio_73_0" title="" value="80" class="" />
<label for="input_radio_73_0">8-13 anni (€ 80)</label>


<input type="radio" name="input_radio_73" id="input_radio_73_1" title="" value="100" class="" />
<label for="input_radio_73_1">oltre 14 anni (€ 100)</label>


<><div class="clear"><><div id="error-message-input_radio_73"><><>






<div class="ccms_form_element cfdiv_checkbox" id="input_totalbody21_container_div" style=""><input type="hidden" name="input_totalbody2" value="" alt="ghost" />
<input value="260" title="" type="checkbox" name="input_totalbody2" id="input_totalbody2" class="label_left" onclick="AggiornaTotale(this.form)"/>
<label for="input_totalbody2">CORSO TOTAL BODY (due volte sett. - € 260)</label><div class="clear"><><div id="error-message-input_totalbody2"><><>


<div class="ccms_form_element cfdiv_checkbox" id="input_pilates1_container_div" style=""><input type="hidden" name="input_pilates" value="" alt="ghost" />
<input value="240" title="" type="checkbox" name="input_pilates" id="input_pilates" class="label_left" onclick="AggiornaTotale(this.form)"/>
<label for="input_pilates">CORSO PILATES (una volta sett. - € 240)</label><div class="clear"><><div id="error-message-input_pilates"><><>




<>






<div class="ccms_form_element cfdiv_header" id="id4_container_div" style="">

<font size=4"><p style="text-align: center;">CORSI PER ADULTI E SENIORES</p><font size=3">




<div class="ccms_form_element cfdiv_radio" id="input_radio_711_container_div" style=""><label>ETÀ</label><input type="hidden" name="input_radio_71" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="input_radio_71" id="input_radio_71_0" title="" value="75" class="" />
<label for="input_radio_71_0">Over 65 (€ 75)</label>
<input type="radio" name="input_radio_71" id="input_radio_71_1" title="" value="95" class="" />
<label for="input_radio_71_1">60-64 (€ 95)</label>
<input type="radio" name="input_radio_71" id="input_radio_71_2" title="" value="150" class="" />
<label for="input_radio_71_2">Under 60 (€ 150)</label>
<><div class="clear"><><div id="error-message-input_radio_71"><><>


<div class="ccms_form_element cfdiv_header" id="id5_container_div" style=""><p>&nbsp;</p><div class="clear"><><>


<div class="ccms_form_element cfdiv_text" id="totale1_container_div" style=""><label>Tot. quota associativa </label> <span id='totale_s' >&nbsp;</span>
<input maxlength="30" size="20" class="" title="" type="hidden" value="" name="totale_h" id="totale_h" />
<div class="clear"><><div id="error-message-totale"><><>


<div class="ccms_form_element cfdiv_header" id="id6_container_div" style=""><p>&nbsp</p>
<div class="clear"><><>




<div class="ccms_form_element cfdiv_submit" id="input_submit_21_container_div" style="text-align:left"><input name="input_submit_2" class="" value="Invia" type="submit" />&nbsp;
<input type='reset' name='reset' value='Cancella tutti i campi' class='' />&nbsp;<input type='button' name='back' value='Indietro' class='' onclick='history.back()' /><div class="clear"><>
<div id="error-message-input_submit_2"><><>
<div class="ccms_form_element cfdiv_empty" id="empty_container_div" style=""><div class="clear"><><div id="error-message-empty"><><>


codice Javascript (speravo di risolvere infilandoci le due righe di codice "incriminate", invece non funziona più nulla  :'(


Codice: [Seleziona]

function AggiornaTotale()
{
   var totale = 0;
   var kastl = $$('div#kastl input');
   for ( var i = 0; i < kastl.length; i++ ) {
      if ( kastl[i].checked ) {
       totale = totale + parseFloat(kastl[i].value);
      }
   }


/* righe incriminate
        totale= totale + parseFloat($$('input[name="input_radio_73"]:checked').val());
        totale= totale + parseFloat($$('input[name="input_radio_71"]:checked').val());
*/


   $('totale_s').innerHTML = " € "+totale.toFixed(2);
   $('totale_h').value = totale;
}
}




C'è sicuramente qualche banale errore ma io, pur avendo tentato di tutto, non ne vengo fuori.
Grazie ancora a chi spenderà qualche minuto del suo tempo per aiutarmi.
« Ultima modifica: 08 Dic 2013, 19:28:28 da aldobz »

Offline mmleoni

  • Global Moderator
  • Instancabile
  • ********
  • Post: 5547
  • Sesso: Maschio
  • Just another *nix coder/sysadmin...
    • Mostra profilo
piccola nota di servizio: se modifichi il post anziché aggiungerne uno nuovo la cosa non viene notificata...

piccole note di post:
  • non hai detto se usi jquery o che altro (che ti scrivo se non so che usi?)
  • manca la definizione dell'event handler nei radiobutton
  • perché usi una volta $$ ed una $? due librerie diverse?
  • a naso il js ha una parentesi di troppo in chiusura.
comincia da questi punti e magari usa dei nomi un po' più individuabili.

ciao
mmleoni web consulting - creazione siti web aziendali ed e-commerce avanzati - sviluppo moduli e componenti Joomla

Offline aldobz

  • Esploratore
  • **
  • Post: 91
    • Mostra profilo
piccola nota di servizio: se modifichi il post anziché aggiungerne uno nuovo la cosa non viene notificata...



azz....  non lo sapevo (in molti forum si chiede il contrario, ossia di non mettere post su post...)

Citazione
piccole note di post:
  • non hai detto se usi jquery o che altro (che ti scrivo se non so che usi?)
  • manca la definizione dell'event handler nei radiobutton
  • perché usi una volta $$ ed una $? due librerie diverse?
  • a naso il js ha una parentesi di troppo in chiusura.
comincia da questi punti e magari usa dei nomi un po' più individuabili.

ciao


mmmm..... se io sapessi esattamente perché ho usato una volta $$ e una volta $ forse non sarei qui a chiedere aiuto.  :-\
Il codice che ho usato è stato da me estrapolato da un esempio più lungo (trovato in internet), eliminando a piccole dosi il NON necessario. Ma se mi chiedete il funzionamento, casca l'asino (cioè io...)
La parentesi di troppo è facilmente eliminabile, se fosse quella la causa del mal/non funzionamento.


Marco, capisco che devo aiutarti ad aiutarmi, ma mi riesce...... difficile.


Offline mmleoni

  • Global Moderator
  • Instancabile
  • ********
  • Post: 5547
  • Sesso: Maschio
  • Just another *nix coder/sysadmin...
    • Mostra profilo
prova a usare un solo $ nel codice che ti ho suggerito e speriamo che $ stia per JQuery...

più di così non so che dirti, se non sai rispondere a ciò che ti ho chiesto posso solo tirare a caso  :(

mmleoni web consulting - creazione siti web aziendali ed e-commerce avanzati - sviluppo moduli e componenti Joomla

Offline aldobz

  • Esploratore
  • **
  • Post: 91
    • Mostra profilo
prova a usare un solo $ nel codice che ti ho suggerito e speriamo che $ stia per JQuery...

più di così non so che dirti, se non sai rispondere a ciò che ti ho chiesto posso solo tirare a caso  :(


Rieccomi, dunque, ho fatto come mi hai suggerito, almeno, se ho interpretato bene...
Ho tolto un $ dalle righe incriminate, cosicché ora  sono così:


Codice: [Seleziona]
totale= totale + parseFloat($('input[name="input_radio_73"]:checked').val());
 totale= totale + parseFloat($('input[name="input_radio_71"]:checked').val());


Peccato che non sia servito a nulla.
Forse ho capito male il tuo suggerimento?  Dicevi che in posto usavo 2 $$, in un altro uno solo.
Sto cercando di arrangiarmi da solo, ma l'ostacolo sembra più grande di me...






Offline mmleoni

  • Global Moderator
  • Instancabile
  • ********
  • Post: 5547
  • Sesso: Maschio
  • Just another *nix coder/sysadmin...
    • Mostra profilo
non so che dirti, provo a scriverti un codice di esempio per l'uso dei radio button con jQuery, vediamo se questo ti aiuta:

Codice: [Seleziona]
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function showPrice(){
  $("#price").text($( "input[name='selCorso']:checked" ).val());
}
</script>
</head>
<body>
<input type="radio" name="selCorso" value="10" onchange="showPrice()" /> corso 1<br />
<input type="radio" name="selCorso" value="20" onchange="showPrice()" /> corso 2<br />
<input type="radio" name="selCorso" value="30" onchange="showPrice()" /> corso 3<br />
<h3>costo corso <span id="price"></span></h3>
</body>
</html>

se ti raccapezzi magari partiamo da questo...


mmleoni web consulting - creazione siti web aziendali ed e-commerce avanzati - sviluppo moduli e componenti Joomla

Offline aldobz

  • Esploratore
  • **
  • Post: 91
    • Mostra profilo
non so che dirti, provo a scriverti un codice di esempio per l'uso dei radio button con jQuery, vediamo se questo ti aiuta:

Codice: [Seleziona]
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function showPrice(){
  $("#price").text($( "input[name='selCorso']:checked" ).val());
}
</script>
</head>
<body>
<input type="radio" name="selCorso" value="10" onchange="showPrice()" /> corso 1[br /]
<input type="radio" name="selCorso" value="20" onchange="showPrice()" /> corso 2[br /]
<input type="radio" name="selCorso" value="30" onchange="showPrice()" /> corso 3[br /]
<h3>costo corso <span id="price"></span></h3>
</body>
</html>

se ti raccapezzi magari partiamo da questo...


Anche se a distanza di quasi un anno, sono nuovamente qua e, strano a dirsi....  in cerca di aiuto.
Innanzitutto lasciatemi ringraziarvi per gli aiuti che, nel dicembre scorso, mi avete dato. Consigli ai quali non ho dato seguito semplicemente perché gli organizzatori dei citati corsi hanno deciso di "accontentarsi" di un'iscrizione cartacea, quindi non necessariamente online.
Ora ci risiamo, l'autunno è alle porte, e l'esigenza si ripresenta.  Nel frattempo però Chronoforms ha fatto un gran passo avanti, e mi sembra di capire che con la V5 cambino parecchie cose.
In particolare sembra che sia stata introdotta una bella novità: al variare dello stato di un checkbox o di un radiobutton, viene attivata una funzione (che ovviamente deve essere scritta da zero, nella sezione LoadJavaScript.
E qui sta il punto: io sono stato, anni fa, un discreto programmatore in basic, visual basic e ASP.  Ora con l'avvento di PHP e Javascript, fra parentesi tonde, quadre e graffe, classi e quant'altro, mi sto perdendo.

Ho un semplicissimo form che contiene 3 elementi: checkbox1 (con value 60), checkbox2 (con value 90), e un textbox nel quale dovrebbe apparire il totale, a seconda di quale checkbox è cliccato. Ho quindi bisogno della pura sintassi per acquisire i valori legati ai due checkbox e, calcolata la somma, farla apparire nel campo totale. Per il resto credo (e spero) di potermi arrangiare.

Ovviamente ho impostato i due checkbox in modo tale che, se cliccati, cedano il controllo alla funzione "calcola".  Ma è proprio qui che, pur andando per tentativi, mi perdo. Tutta colpa della sintassi, per me un po' troppo ostica.
Riuscite a darmi un aiuto? Solo per levarmi da questa impasse, poi dovrei farcela da solo.
Grazie fin d'ora.
« Ultima modifica: 22 Set 2014, 15:37:54 da aldobz »

 



Web Design Bolzano Kreatif