Gestire un <hr> con Dynamic HTML

[andre88]

Ciao ragazzi!
Sono alle prime armi con la programmazione web e mi sono imbattuto in un problema a cui non ho trovato soluzione né autonomamente né girando nel forum.

Ho bisogno di inserire una linea orizzontale (<hr>) in un documento HTML successivamente ad una selezione in un menù <select>. Ho pensato di inserirla staticamente e "giocare" con la visibilità per farla comparire successivamente, ma se avete suggerimenti migliori fateli pure! Questo è il codice che ho prodotto:

prenotazione.html:
...
<form action="#" id="preno_form">
<p id="preno">
<label class="block">1) scegli la prestazione che intendi prenotare:&nbsp;
<select name="prestazione">
<option selected="selected" value="none"></option>
<option id="chiru" value="chirurgica" onclick="chirurgica()">Visita chirurgica</option>
</select>
</label>
</p>
<hr style="visibility:hidden;">
</form>
...

prenotazione.js:
function chirurgica()
{
passi= document.getElementById("preno_form");
hr= linee.getElementsByTagName("hr");
hr[0].style.visibility= "visible";
}


Tenderei ad escludere errori nell'HTML in quanto il file è validato strict, mentre nel Javascript c'è solo quella funzione. Su Firefox funziona, su Chrome e su HTMLKit no... mi sapreste aiutare?

Grazie!

[cavicchiandrea]

<form action="#" id="preno_form">
<p id="preno">
<label class="block">1) scegli la prestazione che intendi prenotare:&nbsp;
<select name="prestazione" onchange="chirurgica(this.value)">
<option selected="selected" value="none"></option>
<option id="chiru" value="chirurgica">Visita chirurgica</option>
</select>
</label>
</p>
<hr style="visibility:hidden;">
</form>

-----
function chirurgica(val)
{
var stato = (val=='chirurgica')? "visible" : "hidden";
document.getElementsByTagName("hr").item(0).style.visibility= stato;
}

[Xinod]

(a parte "linee" che immagino ti sia sfuggito ricopiando qui)
probabilmente dipende dall' onclick sulle option, che ha un supporto limitato
prova invece settando un onchange sulla select

<select name="prestazione" onchange="gestioneSelezione(this)">

...

function

gestioneSelezione(s){
  var valore=s.options[s.selectedIndex].value;
  if(valore=='chirurgica') {
    // qui esegui quello che avevi in chirurgica()
  }
}

ciao

[andre88]

Ciao ragazzi,
grazie per le risposte! Ho adottato una via di mezzo tra le due soluzioni e ho superato lo scoglio. Grazie davvero!

Approfitto un attimo di voi e vi chiedo un altro aiutino se potete!

Come avete già capito, ho 'prestazione.html' nel quale voglio creare due select "a cascata": nella prima scelgo la prestazione, nella seconda il luogo di erogazione. Accanto alla seconda select mi piaceva inoltre farci apparire una mappa della zona dalla quale poter scegliere il luogo (con le mappe immagine) in alternativa all'uso della select.

Il problema oggi è con le mappe: su Chrome funzionano, HTMLKit, IE e Firefox no.... ho anche validato il codice! Come mai?

Poi un suggerimento: la funzione 'chirurgica' è troppo lunga? C'è il modo di scrivere meno codice e ottenere lo stesso risultato? Grazie!!


prenotazione.html

...
<form action="#" id="preno_form">
         <p class="label">
          <label class="block">1) scegli la prestazione che intendi prenotare:&nbsp;
           <select onchange="gestioneSelezione(this.value)">
            <option selected="selected" value="none"></option>
              <option value="chirurgica">Visita chirurgica</option>
                <option value="dermatologica">Visita dermatologica</option>
                <option value="neurologica">Visita neurologica</option>
           </select>
          </label>
         </p>
         <hr style="visibility:hidden;">         
      </form>
...

prestazione.js

...
function gestioneSelezione(v)
{
 //svuota();
 document.getElementsByTagName("hr").item(0).style.visibility= "visible";
 if (v=="chirurgica") chirurgica();
 if (v=="dermatologica") dermatologica();
 if (v=="neurologica") neurologica();
 if (v=="none") 
 { 
  document.getElementsByTagName("hr").item(0).style.visibility= "hidden";
    return;
 }
}
...

chirurgica.js

function chirurgica()
{
 var secondoPar= document.createElement("p");
 secondoPar.setAttribute("class", "label");
 var secondaLabel= document.createElement("label");
 secondaLabel.setAttribute("class", "block");
 var secondoPasso= document.createTextNode("2) scegli la sede della prestazione:\u00A0\u00A0");
 var secondaSelect= document.createElement("select");
 secondaSelect.setAttribute("name", "sede");
 var primoOption= document.createElement("option");
 primoOption.setAttribute("value", "none");
 var secondoOption= document.createElement("option");
 secondoOption.setAttribute("value", "castelfiorentino");
 var terzoOption= document.createElement("option");
 terzoOption.setAttribute("value", "empoli");
 var primaSede= document.createTextNode("Castelfiorentino");
 var secondaSede= document.createTextNode("Empoli");
 secondoOption.appendChild(primaSede);
 terzoOption.appendChild(secondaSede);
 secondaSelect.appendChild(primoOption);
 secondaSelect.appendChild(secondoOption);
 secondaSelect.appendChild(terzoOption);
 secondaLabel.appendChild(secondoPasso);
 secondaLabel.appendChild(secondaSelect);
 secondoPar.appendChild(secondaLabel);
 secondoPar.style.float= "left";
 var divmap= document.createElement("div");
 var map= document.createElement("img");
 map.setAttribute("src", "immagini/chirurgica.jpg");
 map.setAttribute("alt", "mappa visita chirurgica");
 map.setAttribute("usemap", "#chiru");
 var mapchiru= document.createElement("map");
 mapchiru.setAttribute("name", "chiru");
 var area1= document.createElement("area");
 area1.setAttribute("href", "../richieste_prestazioni/castelfiorentino_chiru.html");
 area1.setAttribute("alt", "Castelfiorentino");
 area1.setAttribute("shape", "circle");
 area1.setAttribute("coords", "345,289,8");
 var area2= document.createElement("area");
 area2.setAttribute("href", "../richieste_prestazioni/empoli_chiru.html");
 area2.setAttribute("alt", "Empoli");
 area2.setAttribute("shape", "circle");
 area2.setAttribute("coords", "315,75,8");
 mapchiru.appendChild(area1);
 mapchiru.appendChild(area2);
 divmap.appendChild(map);
 divmap.appendChild(mapchiru);
 divmap.style.float= "right";
 var formPreno= document.getElementById("preno_form");
 formPreno.appendChild(secondoPar);
 formPreno.appendChild(divmap); 
}

[cavicchiandrea]

questo é una "simulazione" del attributo map (che non ricordo se è ancora ammesso e supportato da tutti i browser) utilizzando css e jquery in sintesi (spero si capisca) ti crei delle immagini per ogni punto e metti in un div la mappa "nuda" (senza punti) in background e quando selezioni dal menu il punto interessato lo rendi visibile sulla mappa

[andre88]

Ciao Andrea!
Grazie per la risposta! Comunque a me bastano le map in semplice HTML. Anche perché al corso (si tratta di un esame universitario) non abbiamo parlato di jQuery...

In sostanza un select e a fianco un'immagine con delle aree che, se cliccate, reindirizzano alle stesse pagine a cui rendirizzerebbero gli option della select! Ne ho già fatte diverse in HTML statico e dovrei averle create anche con quella funzione javaScript, ma non funzionano! E non capisco dove sbaglio...