aggiunta select a form

[tata1283]

Ciao a tutti,
inizio ad usare Javascript oggi per la prima volta.
Ho sempre usato il php.

Mi trovo a dover usare questo linguaggio per poter creare una form dinamica all'interno di una database clinico per la creazione di una lettera di dimissione.
La prima cosa che ho fatto è creare una select con una lista di complicanze e una volta scelta una complicanza dalla lista si apre il pop up della pagina relativo all'inserimento della complicanza nel database, anch'essa una form.
Questo l'ho fatto utilizzando OnChage - Open.
Adesso però vorrei che oltre ad aprire la pagina per l'inserimento dedicato alla complicanza scelta si crei sotto la mia select delle complicanze una select uguale identica che funzioni allo stesso modo e così fin quando non si ha più bisogno di inserire complicanze.
Questo perchè durante un ricovero un paziente può avere più complicanze e non si può sapere a priori quante.
Sono ore che cerco metodi per poterlo fare ma non riesco ad adattare niente al mio caso.

Immagino che per qualcuno che usa spesso javascript questo mio problema sia molto semplice da risolvere quindi qualcuno potrebbe dirmi come si può fare?

So che da qualche parte in questo forum magari c'è la risposta ma ho già cercato per parecchie ore e come ho detto prima non riesco ad adattare niente al mio caso.

Spero possiate aiutarmi!!!
Grazie!

[Xinod]

in "script discussioni utili" (in cima nella pagina con tutte le discussioni del forum javascript) trovi 2 link a discussioni che possono aiutarti:
aggiungi / rimuovi input dinamicamente (se capisci il concetto lo applichi senza problemi anche alle select)
oppure
duplicare righe di tabella contenenti parti complesse di form

ciao

[tata1283]

Ciao,
sono riuscita a modificare lo script che mi hai segnalato ieri così adesso ho un bottone che aggiunge a richiesta una nuova select.
Però adesso avrei bisogno che queste select aggiunte funzionino esattamente come quella iniziale che è sempre visibile, che cioè ad ogni cambiamento della complicanza aprano la pagina per l'inserimento della stessa in un pop up, questo nella select iniziale è fatto con onChange - Open.
Inoltre vorrei che il testo "Complicanza n." prima di ogni select aggiunta sia formattato secondo il mio css.

Incollo qua sotto il mio codice:

<script language="JavaScript" type="text/javascript">
<!--
var num=2;
function accoda(){
if(document.createElement && document.getElementById && document.getElementsByTagName) {
// crea elementi
var oTr=document.createElement("TR");
var oTd1=document.createElement("TD");
var oField=document.createElement("SELECT");
var oText=document.createTextNode("Complicanza "+num);

// setta attributi

oField.setAttribute("name","complicanza"+num);

var opt = document.createElement("option");
opt.value = '0';
opt.appendChild(document.createTextNode('nessuna') );
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '1';
opt.appendChild(document.createTextNode('complican za chirurgica'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '2';
opt.appendChild(document.createTextNode('complican za biliare'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '3';
opt.appendChild(document.createTextNode('complican za vascolare'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '4';
opt.appendChild(document.createTextNode('complican za infettiva'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '5';
opt.appendChild(document.createTextNode('ptld'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '6';
opt.appendChild(document.createTextNode('cmv'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '7';
opt.appendChild(document.createTextNode('complican za ascitica'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '8';
opt.appendChild(document.createTextNode('complican za cardiovascolare'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '9';
opt.appendChild(document.createTextNode('complican za renale'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '10';
opt.appendChild(document.createTextNode('complican za neuropsichiatrica'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '11';
opt.appendChild(document.createTextNode('complican za metabolica'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '12';
opt.appendChild(document.createTextNode('complican za neoplastica'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '13';
opt.appendChild(document.createTextNode('rigetto') );
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '14';
opt.appendChild(document.createTextNode('rigetto cronico'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '15';
opt.appendChild(document.createTextNode('rigetto cellulare tardivo'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '16';
opt.appendChild(document.createTextNode('epatite de novo'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '17';
opt.appendChild(document.createTextNode('recidiva malattia'));
oField.appendChild(opt);
var opt = document.createElement("option");
opt.value = '18';
opt.appendChild(document.createTextNode('de novo autoimmune'));
oField.appendChild(opt);

// appendi al relativo padre
oTd1.appendChild(oText);
oTd1.appendChild(oField);
oTr.appendChild(oTd1);

document.getElementById('tabella').getElementsByTa gName('TBODY')[0].appendChild(oTr);

// incrementa variabile globale
num++
}
}

//-->
</script>


.........
.........Qui c'è del codice non relativo al mio problema
.........


print '<TABLE class=tabellaGeneralità id="tabella">';

print '<caption class=boldmaiuscolo> Complicanze sopraggiunte durante il ricovero </caption>';
print '<tr>';
print '<td> <input class=bottone type="button" value="Aggiungi un\'altra complicanza" onclick="accoda()"> </td>';
print '</tr>';
print '<tr>';
print '<td> <span class=bold> complicanza 1 </span>';
print '<select name="complicanza1" onchange="if(this.options[1].selected) window.open(\'inserisci_complicanze_chirurgiche.ph p\', \'complicanze\', \'\');
else if(this.options[2].selected) window.open(\'inserisci_complicanze_biliari.php\', \'complicanze\', \'\');
else if(this.options[3].selected) window.open(\'inserisci_complicanze_vascolari.php\ ', \'complicanze\', \'\');
else if(this.options[4].selected) window.open(\'inserisci_complicanze_infettive.php\ ', \'complicanze\', \'\');
else if(this.options[5].selected) window.open(\'inserisci_ptld_generale.php\', \'complicanze\', \'\');
else if(this.options[6].selected) window.open(\'inserisci_cmv.php\', \'complicanze\', \'\');
else if(this.options[7].selected) window.open(\'inserisci_complicanze_ascitiche.php\ ', \'complicanze\', \'\');
else if(this.options[8].selected) window.open(\'inserisci_complicanze_cardiovascolar i.php\', \'complicanze\', \'\');
else if(this.options[9].selected) window.open(\'inserisci_complicanze_renali.php\', \'complicanze\', \'\');
else if(this.options[10].selected) window.open(\'inserisci_complicanze_neuropsichiatr iche_generale.php\', \'complicanze\', \'\');
else if(this.options[11].selected) window.open(\'inserisci_complicanze_metaboliche.ph p\', \'complicanze\', \'\');
else if(this.options[12].selected) window.open(\'inserisci_complicanze_neoplastiche_g enerale.php\', \'complicanze\', \'\');
else if(this.options[13].selected) window.open(\'inserisci_rigetto.php\', \'complicanze\', \'\');
else if(this.options[14].selected) window.open(\'inserisci_rigettocronico.php\', \'complicanze\', \'\');
else if(this.options[15].selected) window.open(\'inserisci_rigettocellularetardivo.ph p\', \'complicanze\', \'\');
else if(this.options[16].selected) window.open(\'inserisci_epatite_denovo_generale.ph p\', \'complicanze\', \'\');
else if(this.options[17].selected) window.open(\'inserisci_recidiva_malattia_generale .php\', \'complicanze\', \'\');
else if(this.options[18].selected) window.open(\'inserisci_denovo_autoimmune.php\', \'complicanze\', \'\'); ">';
print '<option selected="selected" value="0">';
print 'nessuna';
print '</option>';
print '<option value="1">';
print 'complicanza chirurgica';
print '</option>';
print '<option value="2">';
print 'complicanza biliare';
print '</option>';
print '<option value="3">';
print 'complicanza vascolare';
print '</option>';
print '<option value="4">';
print 'complicanza infettiva';
print '</option>';
print '<option value="5">';
print 'ptld';
print '</option>';
print '<option value="6">';
print 'cmv';
print '</option>';
print '<option value="7">';
print 'complicanza ascitica';
print '</option>';
print '<option value="8">';
print 'complicanza cardiovascolare';
print '</option>';
print '<option value="9">';
print 'complicanza renale';
print '</option>';
print '<option value="10">';
print 'complicanza neuropsichiatrica';
print '</option>';
print '<option value="11">';
print 'complicanza metabolica';
print '</option>';
print '<option value="12">';
print 'complicanza neoplastica';
print '</option>';
print '<option value="13">';
print 'rigetto';
print '</option>';
print '<option value="14">';
print 'rigetto cronico';
print '</option>';
print '<option value="15">';
print 'rigetto cellulare tardivo';
print '</option>';
print '<option value="16">';
print 'epatite de novo';
print '</option>';
print '<option value="17">';
print 'recidiva malattia';
print '</option>';
print '<option value="18">';
print 'de novo autoimmune';
print '</option>';
print '</select>';
print '</div> </td>';
print '</tr>';

print '</select>';

print '</td>';
print '</tr>';

print '</TABLE>';

Qualcuno può dirmi come si fanno queste due cose? Credo debba cambiare qualcosa all'interno della funzione accoda ma non riesco a capire che cosa.

Grazie!

[cavicchiandrea]

prova a modificare cosi:
righe attuali:
var oField=document.createElement("SELECT");
var oText=document.createTextNode("Complicanza "+num);
aggiuni sotto queste due righe:
oField.onchange='nomefunzione()';
oText.className='nomeclasse';
ti ricordo che il DOM è complesso, nel caso che cosi tu non risolva leggiti la guida DOM

[tata1283]

Ho letto la guida che mi hai indicato ma non riesco a trovare la soluzione.
Ho provato anche con le due righe di codice che mi hai scritto ma non cambia niente.

Qualcun'altro ha qualche idea?

[tata1283]

Per la questione di utilizzare la classe per la stringa ho provato a girarci intorno (perchè tanto è solo un attributo di font_weight=bold) ma non mi funziona, non da errore ma non visualiza la scritta in grossetto!

Nella funzione accoda() ho aggiunto queste tre righe:

var oSpan=document.createElemet("SPAN");
oSpan.style.fontWeight="bold";
oTd1.appendChild(oSpan); // questo prima di appendChild(oText);

Però non stampa in grossetto!!! Ma perchè???
A logica in questo modo ho messo il testo dentro a uno span che ha come regola il bold eppure non fa niente!
Qualcuno sa il perchè?

[tata1283]

Se a qualcuno interessa ho trovato la soluzione sia per la clausola onchange sia per la stampa in grassetto.

Per onchange dentro alla funzione accoda() bisogna aggiungere:

oField.onchange=function() { // quello che vuoi che faccia }

Per far scrivere in grassetto invece aggiungere e modificare così, sempre in accoda():

var bold=document.createElement("b");
bold.appendChild(oText);
oTd1.appendChild(bold);

Magari ai posteri potrà servire.
Ciao ciao!