Menu a tendina: variabile come option value, si può?

[monak83]

Ciao a tutti,
è una vita che vi seguo ma non mi sono mai registrato al forum e per ciò questo è il mio primo post.

Vado subito al sodo:

Nel caso in cui volessi come option value del menu dropdown il valore di una variabile come base (precedentemente inizializzata dall'ultente tramite l'inserimento in un apposito campo) è possibile?

Una cosa del genere:

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 195px;">Asole saldate</label>
<select class="cf_inputbox validate-selection" id="select_8" size="1" title="" name="asole" onChange="updatethis(this.form);">
<option value="">Vuoi le asole saldate?</option>
<option value="0">No</option>
<option value="base">Lato superiore</option>
<option value="base">Lato inferiore</option>
<option value="altezza">Lato destro</option>
<option value="altezza">Lato sinistro</option>
<option value="base*2">Lati superiore e inferiore</option>
<option value="altezza*2">Lati destro e sinistro</option>

</select>

dove base e altezza sono i valori inseriti dall'utente all'inizio del form; base*2 e altezza*2 un'eventuale operazione (è possibile eseguire un'operazione li?).

E' possibile farlo direttamente in questo modo all'interno del menu a tendina oppure occorre seguire altra strada?

ciao

monak83

[artorius]

mmm puoi fare una form dove l'utente inserisce i dati e le option si aggiornano da sole, ma non puoi mettere la formula dento l'html. Devi definire una sequenza di passi che generino le diverse option, partendo dai dati inseriti nella form, poi crei una funzione che faccia il lavoro. Infine, associ la funzione sugli eventi onblur degli input ed onchange delle select della form, in modo che ad ogni modifica di un dato, la select si aggiorni.

N.B: se cambi completamente le option, ovvero se le rimuovi e le rimetti, finisce che perdi l'elemento selezionato della select (del tipo, l'utente seleziona Lato Inferiore, pi cambia idea e altera un valore precedente, la select si rigenera e la selezione va persa. Se vuoi evitarlo devi prendere gli elementi della select e controllare il testo contenuto in ciascuna option, modificando poi il value in base al testo, e può non essere semplicissimo.

[monak83]

Grazie per la celere risposta!

Potresti farmi un esempio di come posso utilizzare il valore della variabile base come oprion di una select?

Grazie mille

monak83

[artorius]

allora, immagino tu abbia una form tipo:

<form action="tuo/file" method = "post" id="TheForm">
   


       Base : <input type="text" name="base" />
   </p>
   


       Altezza : <input type="text" name = "altezza" />
   </p>
   


       Asole Saldata:
       <select name="asole">
<option value="">Vuoi le asole saldate?</option>
<option value="0">No</option>
<option value="" id = "AsoleLSup">Lato superiore</option>
<option value="" id = "AsoleLInf">Lato inferiore</option>
<option value="" id = "AsoleLDX">Lato destro</option>
<option value="" id = "AsoleLSX">Lato sinistro</option>
<option value="" id = "AsoleLSupInf">Lati superiore e inferiore</option>
<option value="" id = "AsoleLDXSX">Lati destro e sinistro</option>
       </select>
   </p>
</form> 

dopodiché crei una funzione:

function UpdateOption(){
   var base = parseInt(document.getElementById('TheForm').base.value);
   var altezza = parseInt(document.getElementById('TheForm').altezza.value);

   if(base && altezza){
         document.getElementById('AsoleLSup').value = base;
         document.getElementById('AsoleLInf').value = base;
         //E così via
   }
}

[monak83]

Grazie mille per la tua cortese e velocissima risposta ma non sono pratico di javascript e non riesco a farlo funzionare.

Prova a postare il codice in caso avessi tempo di darci un occhio.

CODICE HTML

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Informazioni sul formato</h1>
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 445px;">Numero di copie (stesso soggetto)</label>
    <input class="cf_inputbox required validate-number" maxlength="150" size="5" title="Inserisci un valore numerico corretto" id="text_1" name="n_copie" type="text" onChange="updatethis(this.form);" value="" />
  <a class="tooltiplink" onclick="return false;">[img]components/com_chronocontact/css/images/tooltip.png[/img]</a>
				<div class="tooltipdiv">Numero di copie (stesso soggetto) :: Inserisci il numero (in cifre) di copie dello stesso sogetto</div>
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 445px;">Base (in cm)</label>
    <input class="cf_inputbox required validate-number" maxlength="150" size="5" title="Inserisci un valore numerico corretto" id="text_2" name="base" type="text" onChange="updatethis(this.form);" value="" />
  <a class="tooltiplink" onclick="return false;">[img]components/com_chronocontact/css/images/tooltip.png[/img]</a>
				<div class="tooltipdiv">Base (in cm) :: Inserisci la dimensione in centimetri della BASE del tuo Banner</div>
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 445px;">Altezza (in cm)</label>
    <input class="cf_inputbox required validate-number" maxlength="150" size="5" title="Inserisci un valore numerico corretto" id="text_3" name="altezza" type="text" onChange="updatethis(this.form);" value="" />
  <a class="tooltiplink" onclick="return false;">[img]components/com_chronocontact/css/images/tooltip.png[/img]</a>
				<div class="tooltipdiv">Altezza (in cm) :: Inserisci la dimensione in centimetri dell' ALTEZZA del tuo Banner</div>
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 445px;">Superficie (in mq)</label>
    <input class="cf_inputbox required validate-number" maxlength="150" size="5" title="" id="text_4" name="sup" type="text" readonly="readonly" />
  <a class="tooltiplink" onclick="return false;">[img]components/com_chronocontact/css/images/tooltip.png[/img]</a>
				<div class="tooltipdiv">Superficie (in mq) :: Superficie calcolata in metri quadrati con arrotondamento al metro quadro SUPERIORE</div>
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 45px;">Tipo</label>
    <select class="cf_inputbox validate-selection" id="select_5" size="1" title=""  name="tipo" onChange="updatethis(this.form);">
    <option value="">Clicca per scegliere</option>
      <option value="9.9">Banner pvc 440gr calandrato € 9,90/mq</option>
<option value="12.5">Banner pvc 440gr calandrato alta qualità € 12,50/mq</option>
<option value="12">Banner pvc 500gr spalmato endutex classe B1 € 12,00/mq</option>
<option value="15">Banner pvc 500gr spalmato endutex classe B1 alta qualità € 15,00/mq</option>
<option value="23">Banner pvc 510gr spalmato bifacciale € 23,00/mq</option>
<option value="26">Banner pvc 680gr spalmato bifacciale € 26,00/mq</option>
<option value="23">Banner backlit eurosol 550gr spalmato € 23,00/mq</option>
<option value="13">Rete mesh antivento 400gr classe B1 endutex € 13,00/mq</option>

    </select>
    <a class="tooltiplink" onclick="return false;">[img]components/com_chronocontact/css/images/tooltip.png[/img]</a>
				<div class="tooltipdiv">Tipo :: Scegli il tipo di materiale</div>
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Lavorazioni accessorie</h1>
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 195px;">Occhiellatura</label>
    <select class="cf_inputbox validate-selection" id="select_8" size="1" title=""  name="occhiellatura" onChange="updatethis(this.form);">
    <option value="">Clicca per scegliere</option>
      <option value="1">Standard ogni 50 cm (nessu costo aggiuntivo)</option>
<option value="1.08">Occhielli ogni 30 cm (+8%)</option>

    </select>
    <a class="tooltiplink" onclick="return false;">[img]components/com_chronocontact/css/images/tooltip.png[/img]</a>
				<div class="tooltipdiv">Occhiellatura :: Scegli il tipo di occhiellatura</div>
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 195px;">Asole saldate</label>
    <select class="cf_inputbox validate-selection" id="select_8" size="1" title=""  name="asole" onChange="updatethis(this.form);">
    <option value="">Vuoi le asole saldate?</option>
      <option value="0">No</option>
<option value="l_sup">Lato superiore</option>
<option value="l_inf">Lato inferiore</option>
<option value="l_dx">Lato destro</option>
<option value="l_sx">Lato sinistro</option>
<option value="l_supinf">Lati superiore e inferiore</option>
<option value="l_dxsx">Lati destro e sinistro</option>

    </select>
    <a class="tooltiplink" onclick="return false;">[img]components/com_chronocontact/css/images/tooltip.png[/img]</a>
				<div class="tooltipdiv">Asole saldate :: Seleziona le asole</div>
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Informazioni sul file</h1>
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 195px;">Nome del file</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_10" name="nomefile" type="text" />
  <a class="tooltiplink" onclick="return false;">[img]components/com_chronocontact/css/images/tooltip.png[/img]</a>
				<div class="tooltipdiv">Nome del file :: Inserisci il nome del file esatto compresa l'estensione</div>
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 195px;">Modalità d'invio</label>
    <select class="cf_inputbox validate-selection" id="select_12" size="1" title=""  name="mod_invio">
    <option value="">Clicca per scegliere</option>
      <option value="Subito via FTP">Subito via FTP</option>
<option value="Più tardi via FTP">Più tardi via FTP</option>
<option value="Invierò a mia cura">Invierò a mia cura</option>

    </select>
    <a class="tooltiplink" onclick="return false;">[img]components/com_chronocontact/css/images/tooltip.png[/img]</a>
				<div class="tooltipdiv">Modalità d'invio :: Scegli come inviare il tuo file tra le varie modalità</div>
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Costi</h1>
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 445px;">Prezzo netto</label>
    <input class="cf_inputbox" maxlength="150" size="5" title="" id="text_13" name="prezzo" type="text" readonly="readonly" />
  
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 445px;">Prezzo (iva 20% inclusa)</label>
    <input class="cf_inputbox" maxlength="150" size="5" title="" id="text_14" name="prezzo_iva" type="text" readonly="readonly" />
  
  </div>
  <div class="cfclear"></div>
</div>

CODICE JAVASCRIPT

function updatethis(form) {
      form.elements['sup'].value = Math.ceil((form.elements['base'].value * form.elements['altezza'].value)/10000);

form.elements['prezzo'].value = form.elements['n_copie'].value * form.elements['sup'].value * form.elements['tipo'].value * form.elements['occhiellatura'].value + form.elements['asole'].value * 2.5;

form.elements['prezzo_iva'].value = form.elements['prezzo'].value * 1.2;

}

In pratica vorrei che al PREZZO venisse aggiunto il valore della SELECT (l_sup, l_inf... a sconda della scelta) moltiplicato pee una costante (2,5)

Scusate se ho postato tutto questo codice ma non so come venirne fuori.

grazie mille

monak83

[monak83]

@ artorius...appena hai un attimo potresti darmi un occhio? te ne sarei grato!
Sono fermo e non riesco a capire il perchè!?!?!?

Cmq grazie di cuore a tutti voi che date un enorme contributo a questa comunità e alle persone DUMMIE come me!!!

Ciao monak83