melding bij verlaten pagina na wijzigen texterea

[gebruiker35]

Ik wil dat bezoekers een melding krijgen als ze de pagina verlaten, maar alleen als ze een van de drie textvakken hebben gewijzigd. Ik heb nu het volgende maar dat werkt niet:

[JS] <script language="javascript" type="text/javascript">
if(veranderd > 1)
{
alert(veranderd);
UNLOAD_MSG = 'Let op! Fout!';
function doBeforeUnload()
{
if(window.event)
{
window.event.returnValue = UNLOAD_MSG;
}
else
{
return UNLOAD_MSG;
}
}
if(window.body)
{
window.body.onbeforeunload = doBeforeUnload;
}
else
{
window.onbeforeunload = doBeforeUnload;
}
}
</script>
[/JS]

en in de input:

[JS] onchange="var veranderd= 2;"[/JS]

 

[ErikBooy007]

Ik zou het zo doen:

<textarea id="veld1"></textarea>
<textarea id="veld2"></textarea>
<textarea id="veld3"></textarea>

[JS]
window.onunload = leave;

function leave () {

var obj1 = document.getElementById ( 'veld1' );
var obj2 = document.getElementById ( 'veld2' );
var obj3 = document.getElementById ( 'veld3' );

if ( obj1.value != obj1.defaultValue || obj2.value != obj2.defaultValue || obj3.value != obj3.defaultValue ) {

alert ( 'Weet u zeker dat u de pagina wilt verlaten?' );

}

}
[/JS]

 

[That Guy]

[JS]window.onunload = leave;
[/JS]

-->
[JS]if(window.addEventListener)
{
window.addEventListener('unload',leave,false);
}else if(window.attachEvent)
{
window.attachEvent('onunload',leave);
}else{
window.onunload = leave;
}[/JS]
Maargoed, details

 

[ErikBooy007]

Ah, dat is wel netter ja. :thumb:

 

[gebruiker35]

Super bedankt, werkt!!

Nog iets uitgebreider: als hij het formulier post hoeftie geen waarschuwing te geven... hoe doe ik dat?

 

[ErikBooy007]

Euhm, het enige wat ik zo kan bedenken is een variabele zetten op "wel alert weergeven" (true) en zo gauw het formulier verzonden wordt die variabele op false te zetten..

Misschien heeft Vegras een mooiere oplossing.

 

[That Guy]

Meh, dat is de makkelijkste oplossing, denk ik. Een nettere oplossing zou zijn om het event te clearen. Zoiets:
[JS]
function viaSubmit()
{
if(window.removeEventListener)
{
window.removeEventListener('unload',leave,false);
}else if(window.detachEvent)
{
window.detachEvent('onunload',leave);
}else{
window.onunload = function(){};
}
}[/JS]
en dan je submit:

<input type='submit' onclick='viaSubmit();' />

Maar dat is wel even weer wat regeltjes erbij.



:thumb:

 

[gebruiker35]

Thanks, dat is niet erg want het wordt enkele tientallen keren op een dag gebruikt, maar als ik op andere manier de pagina verlaat, wil ik wel dat ik dat kan annuleren, dat kan nu namelijk niet, kan alleen op ok klikken. hoe verbeter ik dat?

 

[That Guy]

hoe bedoel je, 'op een andere manier de pagina verlaten'? Via links enzo?


:thumb:

 

[gebruiker35]

ja inderdaad, links of gewoon de pagina sluiten. nu krijg je een venster waarin je op ok kunt klikken, moet er een zijn waar je ook op annuleren kunt klikken

 

[ErikBooy007]

Maak van alert een confirm , denk dat dat is wat je bedoelt.

 

[gebruiker35]

dat bedoel ik ja, maar als ik nu op annuleren klik gaat hij wel gewoon door...

 

[ErikBooy007]

Maak dan van (het oorspronkelijke)

[JS]
alert ( 'Weet u zeker dat u de pagina wilt verlaten?' );
[/JS]

[JS]
return confirm ( "Weet u zeker dat u de pagina wilt verlaten?" );
[/JS]

 

[gebruiker35]

leuk, maar dan alsnog gaat hij gewoon door als ik op annuleren klik...

 

[ErikBooy007]

Hmm, dan maar even wachten of Vegras (of iemand anders) er nog iets zinnigs over te zeggen heeft.

 

[That Guy]

hmm, even kijken. Het punt is dat je gebruikers niet kan DWINGEN op een pagina te blijven. Maar, mischien werkt dit.

[JS]if(window.addEventListener)
{
window.addEventListener('unload',leave,false);
}else if(window.attachEvent)
{
window.attachEvent('onunload',leave);
}else{
window.onunload = leave;
}


function leave()
{
var obj1 = document.getElementById( 'veld1' );
var obj2 = document.getElementById( 'veld2' );
var obj3 = document.getElementById( 'veld3' );

if(obj1.value != obj1.defaultValue ||
obj2.value != obj2.defaultValue ||
obj3.value != obj3.defaultValue)
{
var retval = confirm("Weet u zeker dat u de pagina wilt verlaten?");
if(retval)
{
if(window.removeEventListener)
{
window.removeEventListener('unload',leave,false);
}else if(window.detachEvent)
{
window.detachEvent('onunload',leave);
}else{
window.onunload = function(){};
}
return true;
}else{
return false;
}
}
}[/JS]

<textarea id="veld1"></textarea>
<textarea id="veld2"></textarea>
<textarea id="veld3"></textarea>

Als iemand nu weggaat, wordt het unload event aangeroepen. Deze return false als de gebruiker op 'anuleren' klikt. Mocht dit niet werken, weet ik het zo even ook niet meer - het kan zelfs zijn dat het dan gewoon niet kan.



:thumb:

 

[ErikBooy007]

Tsja, dacht ik ook aan, maar

1. Het event is al getriggered, dus het removen heeft volgens mij niet meer zoveel zin
2. Door het removen, werkt het script ook niet meer als de gebruiker opnieuw de pagina probeert te verlaten

 

[That Guy]

hmmm. Daar heb je een punt (of eigenlijk, twee).

Nu heb ik snel even een oplossing bedacht. Voordeel dat het geen gigantische event-dingen meer gebruikt (hoewel: de <a onclick> moet eigenlijk ook anders, maargoed). Het nadeel is dat je dan navigeert via Javascript. Maar daar kan je wel een leuke oplossingen voor verzinnen. Dit is het idee:
[JS]function nav(loc)
{
if(canNavigate() === true)
{
window.location = loc;
}else{
return false;
// zorgt ervoor dat je niet alsnog via de normale href naar de
// pagina gaat. Weet niet zeker, kan iemand dit confirmen?
}
}

function canNavigate()
{
var obj1, obj2, obj3, retval;

obj1 = document.getElementById( 'veld1' );
obj2 = document.getElementById( 'veld2' );
obj3 = document.getElementById( 'veld3' );

if(obj1.value != obj1.defaultValue ||
obj2.value != obj2.defaultValue ||
obj3.value != obj3.defaultValue)
{
retval = confirm("Weet u zeker dat u de pagina wilt verlaten?");

if(retval)
{
return true;
}else{
return false;
}

}
}[/JS]
Je links worden dan zoiets:

<a href='pagina.html' onclick='nav("pagina.html");'>ga naar pagina</a>

een button is hetzelfde idee, met een onclick erin.


Ik weet niet of het een strak plan is, maar mischien kan ErikBooy007 er een argument voor verzinnen.
Overgens kan je / ik / iemand, als je geen zin hebt om al je links te veranderen, een extra script maken dat de onclick automatisch bij elke link zet. Scheelt weer werk


:thumb:

 

[gebruiker35]

Ja, maar hoe zet je in de link van het rode kruisje bovenin de browser een onclick dat lijkt mij toch best lastig...????

 

[That Guy]

Ja, maar hoe zet je in de link van het rode kruisje bovenin de browser een onclick dat lijkt mij toch best lastig...????

Javascript is een client-side browser script. Dit betekent dat het vanalles kan doen, binnen de browser.

Het zgn. Chrome van de browser (knopjes, menu, etcetera) hoort, uiteraard vanwege de veiligheid, niet aan te passen te zijn. Ofwel, dit kan je niet met Javascript veranderen. Anders zou je een gebruikernooit uit jouw site kunnen laten ontsnappen met een scripje! Dat is niet zo handig.


Kortweg: het close-knopje van je browser kan je niet scripten. Alleen dingen 'in' de huidige pagina kan je aanpassen.


:thumb: