controllo su form + operazioni supplementari

[diablo85]

Salve a tutti! Avrei un problema (strano :P) con javascript.

Vorrei che quando clicco su un form se c'è qualche errore mi venga fuori un'alert e se invece va tutto ok devo richiamarmi una funzione che mi modifica il DOM. L'idea sarebbe quella di compilare un form che, al submit dello stesso, mi va a checkare i campi. Se è ben compilato mi fa apparire un div "caricamento in corso", altrimenti mi visualizza un'alert.

Allora: il punto 1 l'ho già fatto e il punto 2 anche! Il problema è unire le due cose!!!

Praticamente sul button INVIA del form ho messo onclick="return check_works_form()" che mi richiama la funzione check_works_form() e mi controlla se tutto è ok. In questo caso mi ritorna TRUE altrimenti FALSE e butta fuori un'alert.

La funzione che modifica il DOM (l'ho chiamata upload_alert(), che fantasia) mi mette un div a tutto schermo con un'immagine e una scritta. Funziona anche questa.

Adesso... come faccio ad unire queste due cose? E' il return che mi frega! Io nel check_works_form() ho un pò di if che sono tutte le condizioni in cui mi deve ritornare FALSE:
if(...)
return false;
else if(---)
return false;
return true;

E questo è fatto bene! Solo che se provo a richiamare la funzione upload_alert poco prima del return true non me la calcola e passa direttamente al return! Come è possibile?!? Come posso fare!??! Vi prego... illuminatemi!! Grazie!

Se volete vi posto qui di seguito il codice del check:

function check_works_form(){
    if (document.works_form.title.value=="") {
        alert('Non hai inserito alcun titolo');
        return false;
    }
    else if (document.works_form.photo.value=="1" && document.works_form.photo_chooser.value=="") {
        alert('Hai attivato la casella \'foto\' ma non ne hai selezionata nessuna');
        return false;
    }
    else if (document.works_form.description.value=="") {
        alert('Non hai inserito alcuna descrizione');
        return false;
    }
    return true;
}

[Xinod]

il fatto che una funzione richiamata onclick su un input di tipo submit ritorni false non ferma l' invio, lo fa se la funzione la richiami all' onsubmit del form

function check_works_form(){
    var bool=true;
    if (document.works_form.title.value=="") {
        alert('Non hai inserito alcun titolo');
        bool=false;
    }
    else if (document.works_form.photo.value=="1" && document.works_form.photo_chooser.value=="") {
        alert('Hai attivato la casella 'foto' ma non ne hai selezionata nessuna');
        bool=false;
    }
    else if (document.works_form.description.value=="") {
        alert('Non hai inserito alcuna descrizione');
        bool=false;
    }
    if(bool) upload_alert();
    return bool;
}

<form onsubmit="return check_works_form()">
rimuovendo quello che hai al momento nell' onclick sul tasto submit

ciao

[Xinod]

se poi upload_alert() continua a sembrarti che non venga richiamata e' perche' il form viene inviato nella stessa finestra
e sta al browser decidere cosa mostrare dopo l' invio di un form che ha per target (anche implicito) lo stesso oggetto window:
puo' essere una pagina bianca mentre attende il risultato dell' elaborazione
puo' essere la pagina stessa "freezata" su cui oramai non hai piu' controllo
puo' fare in tempo a mostrare questa modifica al DOM che apporti in upload_alert()
...

[diablo85]

Grande Xinod!! Risolto tutto! Grazie mille!!!

[diablo85]

Scusate! E' vero abbiamo risolto tutto però adesso è sorto un altro problema a cui prima non avevo fatto caso... Ho inserito delle select (i famosi menù a tendina). Su firefox nessun problema (ovviamente) invece su IE6 queste select appaiono sopra tutto il resto della pagina, come se avessero uno z-index superiore a tutti i contenuti.
Io però dal css ho settato questo nuovo div che dovrà coprire tutta la pagina con uno z-index pari a 10000. Mi sembra abbastanza! Vi posto il codice:

#modalContainer {
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:10000;
    background-color: #575c5a;
    background-image:url('bg.gif');
}

Ho addirittura messo nel file javascript che crea questo div "al volo" un paio di righe di codice per rendere "invisibili" le select. Ho provato in due modi.
Modo 1:

array_select = document.getElementsByTagName("select");
    for (i=0; i<array_select.length; i++){
        array_select[i].style.visibility = "hidden";
    }

Modo 2:

array_select = document.getElementsByTagName("select");
    for (i=0; i<array_select.length; i++){
        array_select[i].style.zIndex = -5;
    }

Ma continuo a vedere le select sopra tutto il resto della pagina! Come è possibile?
Vi posto uno screenshot per spiegarmi meglio.

Grazie mille

[Xinod]

le select non sono soggette allo z-index,
come gli oggetti incorporati nella pagina come swf, applet java e simili

renderle invisibili e' la soluzione che adottano moltissimi script in giro,
tra l' altro mi sembra corretto il codice che hai postato
quindi ricontrolla come e dove lo richiami

[diablo85]

Dovrebbe essere giusto il codice per renderle invisibili! E' quello che ti ho postato. L'ho messo nella funzione che crea il div con sfondo grigio e lo mette a tutto schermo, subito all'inizio. Ti posto la funzione che fa quello che ti ho descritto.

function upload_alert() {
    d = document;

    // if the modalContainer object already exists in the DOM, bail out.
    if(d.getElementById("modalContainer")) return;
    
    array_select = document.getElementsByTagName("select");
    for (i=0; i<array_select.length; i++){
        array_select[i].style.visibility = "hidden";
    }

    // create the modalContainer div as a child of the BODY element
    mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
    mObj.id = "modalContainer";
    // make sure its as tall as it needs to be to overlay all the content on the page
    mObj.style.height = document.documentElement.scrollHeight + "px";

    // create the DIV that will be the alert 
    alertObj = mObj.appendChild(d.createElement("div"));
    alertObj.id = "alertBox";
    // MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
    if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
    // center the alert box
    alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
    alertObj.style.marginTop = ((screen.height/2)-150)+"px";

    // create an H1 element as the title bar
    h1 = alertObj.appendChild(d.createElement("h1"));
    h1.appendChild(d.createTextNode(ALERT_TITLE));

    // create a paragraph element to contain the txt argument
    div_centrale = d.createElement("div");
    div_centrale.setAttribute("style","text-align:center");
    immagine = d.createElement("img");
    immagine.setAttribute("src","loading.gif");
    immagine.setAttribute("alt","loading...");
    paragrafo = d.createElement("div");
    paragrafo.setAttribute("id","paragrafo");
    paragrafo.appendChild(d.createTextNode("Il tempo di caricamento puo' variare a seconda della connessione e della dimensione dell'immagine"));
    h3 = d.createElement("h3");
    h3.appendChild(d.createTextNode("Caricamento dell'immagine in corso..."));
    msg = alertObj.appendChild(div_centrale);
    msg.appendChild(immagine);
    msg.appendChild(h3);
    msg.appendChild(paragrafo);