Ciao, sicuramente mi sto perdendo qualcosa ma non capisco il senso di avere le due pagine in cui devi riportare lo stesso form.
Tutto ciò che scrivo dopo il document.location non funziona. Perché?
In realtà sta funzionando. Cioè lo script che scrivi dopo document.location viene comunque eseguito, almeno fino a quando non avviene il reindirizzamento alla nuova pagina. Ad ogni modo, nel momento in cui la nuova pagina viene caricata, tutti i dati e le variabili esistenti nella vecchia pagina, di norma vengono persi. In generale, lo script eseguito su una specifica pagina non si propaga sulla nuova pagina che viene caricata. Questo è il normale funzionamento.
Per passare dei dati da una pagina .html ad un'altra puoi usare svariati sistemi.
Un metodo semplice è quello di passare i dati via GET cosi come avverrebbe normalmente al submit di un form con l'attributo method impostato su GET. Questo significa che i dati li ritroverai sotto forma di query string nell'URL della nuova pagina. A quel punto potrai recuperarli attraverso JavaScript.
Ti posto un esempio pratico.
Questo è il tuo file pagina_a.html:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script type="text/javascript">
function validaForm(form){
var partenza = form.selectRicercaRapidaHomePartenza.value
, destinazione = form.selectRicercaRapidaHomeDestinazione.value
, data = form.RicercaRapidaHomeData.value
, orario = form.RicercaRapidaHomeOrario.value
;
if (data == "") { alert("Inserire data!"); return false; }
if (orario == "") { alert("Inserire orario!"); return false; }
}
</script>
</head>
<body>
<h1>PAGINA A</h1>
<form action="pagina_b.html" method="get" onsubmit="return validaForm(this)">
<input name="selectRicercaRapidaHomePartenza">
<input name="selectRicercaRapidaHomeDestinazione">
<input name="RicercaRapidaHomeData">
<input name="RicercaRapidaHomeOrario">
<input type="submit" value="Calcola">
</form>
</body>
</html>
Questo invece è pagina_b.html:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
</head>
<body>
<h1>PAGINA B</h1>
<form id="tuoForm" action="#" method="post">
<input name="selectRicercaRapidaHomePartenza">
<input name="selectRicercaRapidaHomeDestinazione">
<input name="RicercaRapidaHomeData">
<input name="RicercaRapidaHomeOrario">
<input type="submit" value="Calcola">
</form>
<script type="text/javascript">
(function(){
var query = window.location.search.substring(1).split("&")
, i = query.length
, dati={}
, el
;
while (i--){
el = query[i].split("=");
dati[el[0]] = el[1];
}
var partenza = dati.selectRicercaRapidaHomePartenza
, destinazione = dati.selectRicercaRapidaHomeDestinazione
, data = dati.RicercaRapidaHomeData
, orario = dati.RicercaRapidaHomeOrario
, form = document.getElementById('tuoForm')
;
form.selectRicercaRapidaHomePartenza.value = partenza
form.selectRicercaRapidaHomeDestinazione.value = destinazione
form.RicercaRapidaHomeData.value = data
form.RicercaRapidaHomeOrario.value = orario
})();
</script>
</body>
</html>
La sintassi JavaScript è abbastanza ottimizzata e sintettica ma chiaramente è solo un esempio che puoi prendere come spunto e rielaborare secondo il tuo metodo di programmazione o come meglio preferisci.
Un sistema più pulito (a livello di utilizzo), ma anche più complesso (a livello di sviluppo), potrebbe essere quello di caricare i vari form (o comunque i contenuti delle pagine) attraverso AJAX (meglio se utilizzando jQuery). A quel punto non avrai bisogno di eseguire dei reindirizzamenti da una pagina all'altra, quindi tutti i dati li avrai sempre disponibili e manipolabili da script.
Oppure usare un iframe.
Ancora, potresti passare i dati memorizzandoli attraverso dei cookie o, meglio ancora, attraverso localstorage e sessionstorage (nuove funzionalità di HTML5) con cui si possono immagazzinare dati lato client e gestirli facilmente via script.
Esistono anche svariate librerie con cui sono implementate queste funzionalita. Qui un archivio: https://github.com/bebraw/jswiki/wiki/Storage-libraries
A te la scelta.
Rispondi quotando
