Preservare DOM generato con JS dopo submit

**sudo** · 13-02-2007, 20:09

Salve a tutti sto cercando di prendere un po' di confidenza con javascript facendo qualche esercizio stupido...
L'esempio seguente si limita a riscrivere una stringa inserita in una form solo che ho notato che se la funzione viene chiamata dall'evento onclick (cliccando sul tasto Ok) la pagina non viene caricata e quindi le modifiche al DOM fatte da javascript non scompaiono, mentre se la stessa funzione è richiamata dall'evento onsubmit (premendo Return quando il cursore è nel campo input text) le modifiche al DOM fatte da javascript sono corrette ma scompaiono immediatamente perchè la pagina viene ricaricata... Come posso evitare che questo avvenga?

Ecco il codice in questione...

codice:

<html>
<head>
<script type="text/javascript">
function genera(form)
{
	var s = form.s.value;
	var nl = document.createElement("p");
	nl.appendChild(document.createTextNode("Hai scritto: " + s));
	document.getElementById("r").appendChild(nl);
}
</script>
</head>

<body>
<form onsubmit="genera(this)">
	<input type="text" name="s" value="">
	<input type="button" value="Ok" onclick="genera(this.form)">
</form>
<div id="r"></div>
</body>
</html>

Ah, dimenticavo di dire che uso Firefox2 ma spero non ci sia differenza con altri browser...

PS: come viene implementato il controllo ortografico con sottolineatura in rosso delle parole errate nella textarea dei messaggi di questo forum? Non c'entra niente, è solo una curiosità...

**Xinod** · 13-02-2007, 20:51

benvenuto,

Originariamente inviato da sudo
se la stessa funzione è richiamata dall'evento onsubmit (premendo Return quando il cursore è nel campo input text) le modifiche al DOM fatte da javascript sono corrette ma scompaiono immediatamente perchè la pagina viene ricaricata... Come posso evitare che questo avvenga?

fatico a capire la domanda: il form viene inviato al submit, quello che hai fatto prima dell' invio non c'e' piu', questo e' normale
se vuoi propagarti informazioni persistenti al cambio pagina ci sono vari metodi ma il piu' semplice, almeno finche' il metodo del form e' get, consiste nell' analizzare la querystring (vedi per es. discussione linkata in script/discussioni utili) della pagina segnata nell' action del form e agire di conseguenza

**sudo** · 13-02-2007, 21:48

Ok ma con javascript posso analizzare i parametri nella url?
E poi comunque a me interesserebbe di più sapere se c'è un metodo per fare in modo che quando il cursore è nelal input text e l'utente preme Return non venga effettuato un submit con metodo http e load della pagina ma venga semplicemente richiamata la funzione javascript come nel caso di click sul bottone...
Cioè in pratica vorrei sapere se c'è un moto per intercettare la pressione del tasto Return...
Grazie

**Xinod** · 13-02-2007, 22:40

Originariamente inviato da sudo
Ok ma con javascript posso analizzare i parametri nella url?

si', come gia' ho detto c'e' un link ad un esempio in script/discussioni utili (in rilievo nella pagina delle discussioni)

in pratica vorrei sapere se c'è un moto per intercettare la pressione del tasto Return...

oh, gia' questo spiega molto meglio la tua richiesta

codice:

function noenter(e){
	if(!e) e=window.event;
	var source=(e.target)?e.target:e.srcElement;
	var keyC=(e.which)?e.which:e.keyCode;
	if(keyC==13){
		// qui eventuali istruzioni vuoi far eseguire alla pressione del tasto invio, x es.
		// genera(source.form);
		return false;
	}
}

codice:

<input type="text" name="s" value="" onkeydown="return noenter(event)">

questo impedisce che il form venga inviato alla pressione del tasto enter invio nel campo di testo
ciao

**homezappa** · 13-02-2007, 22:54

Originariamente inviato da sudo
... la pagina viene ricaricata... Come posso evitare che questo avvenga?

Ecco la correzione al codice in questione...

codice:

<html>
<head>
<script type="text/javascript">
function genera(form)
{
	var s = form.s.value;
	var nl = document.createElement("p");
	nl.appendChild(document.createTextNode("Hai scritto: " + s));
	document.getElementById("r").appendChild(nl);
	return false;
}
</script>
</head>

<body>
<form onsubmit="return genera(this)">
	<input type="text" name="s" value="">
	<input type="button" value="Ok" onclick="genera(this.form)">
</form>
<div id="r"></div>
</body>
</html>

Io ho capito che ti serviva tutto ciò solamente per testare un po' di javascript senza effettuare il submit.
Spero di aver capito bene

HTH
Zappa

**sudo** · 14-02-2007, 01:24

Grazie mille homezappa e Xinod, era proprio quello che volevo!

Xinod, la discussione di cui parlavi era questa?
http://forum.html.it/forum/showthrea...hreadid=346468

Inoltre riguardo a quella mia curiosità, qualcuno saprebbe dirmi come viene implementato il controllo ortografico nella textarea di quando si posta un messaggio su questo forum?

Discussione: Preservare DOM generato con JS dopo submit

Strumenti discussione

Ricerca discussione

Visualizza

Preservare DOM generato con JS dopo submit

Re: Preservare DOM generato con JS dopo submit

Re: Preservare DOM generato con JS dopo submit

Permessi di invio