Javascript su select che funziona su Internet Explorer e Chome, ma non su Firefox

A volte programmando in javascript delle funzioni, può capitare di dare per scontato o non ricordare che certi metodi sono specifici per il tipo di campo di input su cui stiamo lavorando. Per questo motivo decido di scrivere questa pillola relativa a un errore che ho dovuto correggere, apparentemente senza spiegazione, ma che una spiegazione ce l’ha, bella e soprattutto di fondamentale importanza.

COMPORTAMENTO VOLUTO:

al cambiamento di un campo data, tipo input text associato a un calendario jquery, la pagina sottomette una form con la data modificata e il valore di un campo select, quest’ultimo reso vuoto all’evento onsubmit.

COMPORTAMENTO RISULTANTE:

al cambiamento del campo data, su Internet Explorer e su Chrome, la form viene sottomessa con la data nuova e il valore della select vuoto. Su Firefox no e manda la pagina in errore poichè la select non era valorizzato a “” (stringa vuota).

CODICE ORIGINALE:

function reload()
{
    document.Mia_Form.Mia_Select.value="";
    document.Mia_Form.submit();
}

IL PERCHE’ DELL’ERRORE:

dopo aver analizzato le variabili inviate al server mi sono soffermato sul codice sorgente, sulla funzione reload(), che a colpo d’occhio mi sembrava corretta. Reinviando diverse volte il modulo non notavo differenze fra Internet Explorer e Chrome e Firefox, tranne l’errore di quest’ultimo a valle della submit. Ma mi sbagliavo: un campo select non ha l’attributo value! Infatti sostituendo la riga, alla nuova:

$('select[name=Mia_Select]').append('<option value="" selected="selected"></option>');

il codice funziona su tutti e tre i browser, notando come, con un rapido colpo d’occhio, esso ora viene posto a vuoto in tutti e tre i casi, fornendo il risultato atteso.

LEZIONE:

ricordare sempre che i campi di input sono diversi fra loro e che aderire allo standard è compito prima di tutto dello sviluppatore, oltre che del produttore di software di browser. E che una select viene valorizzata con i tag interni option e un input con l’attributo value. Infatti la mia personale opinione è che, paradossalmente, Firefox, in minoranza in questo caso, era l’unico che si comportava in modo corretto dei tre browser. Inoltre, questo è uno di quei casi in cui la console degli errori non dava alcun cenno di error o warning, rendendo il debug un po’ più oneroso.

Posted in Javascript Tagged with: , ,

Leave a Reply