Chronoform e SELECT: campo descrizione per ogni OPTION di una SELECT

[monak83]

Ciao a tutti,
 volevo sapere come è possibile fare questa cosa:

ho una drop_down che mi permette di scegliere diversi prodotti.
Per ogni prodotto vorrei che la tooltip a fianco producesse una descrizione diversa, cambiando in base alla selezione.

Per il momento riesco ad inserire una sola tooltip che rimane uguale per tutte le selezioni della drop_down; in pratica posso solo inserire una descizione di cosa fa quel menu a tendina e non dei singoli prodotti.

Un esempio di quello che vorrei effettuare lo si può vedere qui:
http://www.pixartprinting.com/it/#6132539201

Alla voce MATERIALE MANIFESTI la tooltip a fianco visualizza (se ci si passa sopra) una descizione per ogni prodotto scelto nel menu a tendina.

E' possibile fare ciò con chronoform?

Grazie a tutti

monak83

[monak83]

Ho notato che tramite i tooltips di chronoform non è possibile fare ciò.

In pratica mi servirebbe far comparire (in un campo o in un fumetto o etc..) una descrizione per ogni option della select.

Tramite javascript si riesce?

Ho trovato degli script jQuey, posso inserirli nel campo Form Code - > JavaScript? (amministrazione Forms di ChronoForm)

Ho provato ma non funziona...forse ChronoForm permette solo l'utilizzo di Javascript?

Ciao a tutti e grazie mille!!!!

monak83

[monak83]

Senza utilizzare il tooltip ho trovato online come visualizzare un campo che produce una descrizione per ogni option di una select.

La modalità e quella illustrata in questa pagina web http://www.dynamicdrive.com/dynamicindex1/combodescribe.htm.

Ho provato a modificare la mia form rispetto alle aggiunte indicate nel link inserito ma la form non funziona e il campo con la descrizione non viene visualizzato.

posto il codice della mia SELECT

HTML

Codice: [Seleziona]

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 340px;">Tipo</label>
    <select class="cf_inputbox validate-selection" id="select_2" size="1" title="Effettua una scelta!"  name="tipo" onChange="updatethis(this.form);">
<option value="">Clicca per scegliere</option>
<option value="1">Poster 6x3</option>
<option value="2">Poster 4x2</option>
<option value="3">Poster 400x300</option>
<option value="4">Poster 140x200</option>
<option value="5">Poster 100x140</option>
<option value="6">Poster 70x100</option>
<option value="7">Misure personalizzate</option>
    </select>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Tipo :: Stampa a colori con inchiostri per esterni su carta da affissione 120gr</div>

Che ho modificato così:

Codice: [Seleziona]

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 340px;">Tipo</label>
    <select class="cf_inputbox validate-selection" id="select_2" size="1" title="Effettua una scelta!"  name="tipo" onChange="updatethis(this.form); displaydesc(document.poster.select_2, thetext1, 'textcontainer1')">
<option value="">Clicca per scegliere</option>
<option value="1">Poster 6x3</option>
<option value="2">Poster 4x2</option>
<option value="3">Poster 400x300</option>
<option value="4">Poster 140x200</option>
<option value="5">Poster 100x140</option>
<option value="6">Poster 70x100</option>
<option value="7">Misure personalizzate</option>
    </select>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Tipo :: Stampa a colori con inchiostri per esterni su carta da affissione 120gr</div>

<span id="textcontainer1" align="left" style="font:italic 13px Arial"></span>

Notare che all'evento onChange ho aggiunto una nuova funzione displaydesc(document.poster.select_2, thetext1, 'textcontainer1') a quella precedente che mi serve per aggiornare i calcoli una volata che inserisco dati diversi nella form.

Nel campo JAVASCRIPT ho aggiunto, oltre alle formula che effetuano i calcoli, le seguenti funzioni:

Codice: [Seleziona]

var thetext1=new Array()
thetext1[0]="Descrizione 1"
thetext1[1]="Descrizione 2"
thetext1[2]="Descrizione 3"
thetext1[3]="Descrizione 4"
thetext1[4]="Descrizione 5"
thetext1[5]="Descrizione 6"
thetext1[6]="Descrizione 7"

function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}

displaydesc(document.poster.select_2, thetext1, 'textcontainer1')

Ho provato il tutto ma il campo di descrizione sotto la select non compare.
Potete aiutarmi?

Posto qui la pagina della mia form senza cone le modifiche apportate.

http://www.sgagrafica.com/index.php?option=com_content&view=article&id=75&Itemid=118

Grazie a tutti

monak83

[monak83]

Analizzando con FireBug sembra non riconoscere document.poster forse perchè viene richiamato prima che venga generato il codice HTML della form?

Infatti nella guida http://www.dynamicdrive.com/dynamicindex1/combodescribe.htm si raccomanda di inserire il codice javascript dopo il codice html.

Ma come possibile fare ciò in ChronoForm?

Il codice javascript editato sul campo JAVASCRIPT viene sempre caricato prima (come giusto che sia...credo)!!!

[vales]

Penso che dovresti usare javascript

definire una descrizione del tooltip per ogni scelta

poi in funzione della selezione una funzione javascript applicare display: blok; o diplay: none alla descrizione

[monak83]

Ciao vales,
 grazie mille per le tue sempre celeri risposte.

Posso chiederti come fare per settare un tooltip per ogni option della select?

Come mostrarli / nasconderli in base alla selezione? Potresi farmi un esempio?

Ciao e grazie mille

monak83

[vales]

Non ho mai fatto questo cosa ma penso che la cosa da fare sia, anche per questo problema, quella detta prima.

se controlli in un form standard il codice del tooltip è simile a questo

Codice: [Seleziona]

  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
                <div class="tooltipdiv">Titolo allegato :: Inserire il titolo dell'allegato</div>
quindi dovresti ripeterlo nel posto giusto dopo la select tante volte quante sono le option e visualizzarlo o no con display: inline o display: none con la stessa funzione del javascript

[monak83]

Ciao vales,
 grazie per il tuo solito aiuto.
Ho tentato la modifica suggeritami ma nulla, non sono riuscito. Inoltre pernsavo di evitare il toltip, preferivo visualizzare il testo subito senza dovermi posizionare sopra il tooltip con il mouse.

Ho trovato diverse soluzioni jQuey che funzionano perfettamente in un semplice file html ma, inserite in chronoforms, non vanno proprio.

Qua un esempio di utilizzo jQuery per fare quello che desidero inserire nella mia form ma nulla!
http://stackoverflow.com/questions/4709011/display-a-description-for-each-select-option-jquery

Come mai?
Chronoforms non accetta jQuery?
Chi mi da una mano?

Grazie mille a tutti.
Ciao
monak83