[javascript] formulier & waarschuwing bij verlaten pagina

[marty]

Dit is het probleem:
Ik heb een interface gemaakt wat gebruikers in staat stelt veranderingen in een database door te voeren. Echter, ze kunnen er maar niet aan wennen dat ze eerst op 'opslaan' moet klikken alvorens verder te navigeren. En dan zijn ze dus alle data kwijt.
Nou heb ik zitten nadenken over hoe ik dat het makkelijkste op kan lossen. Ik heb overigens ook de zoekmachine gebruikt, maar kon nix vinden:

Het beste wat ik kon bedenken was dit:
Aan ieder invoerveld een onChange event hangen die een functie triggered die een waarde zet. Bij het verlaten van de pagina (onBlur is dat toch?) controleer je dan op die waarde.
Dat zou volgens mij moeten gaan werken.

Ik vroeg me alleen af: kan dit niet makkelijker? Want dan moet ik dus wel zo'n onChange aan al die invoervelden gaan hangen. En dat zijn er nogal wat.

[Verwijderd]

Inderdaad een interessant vraagstuk. Mijn idee:
Gebruik de body-functie OnUnLoad (event bij verlaten pagina) om te checken dat een bezoeker weggaat. Geef wanneer dit gebeurt een melding 'Weet je zeker dat u de pagina wilt verlaten zonder de gegevens door te voeren'. Met de js functie confirm is dit perfect te regelen. Zo worden de gebruikers er dus op attent gemaakt dat ze de data nog niet doorgevoerd hebben.

[crisp]

Voor IE kan je daar onBeforeUnload voor gebruiken: http://www.webreference.c...eforeunload/bunload3.html

[marty]

Ok, maar dan zit ik dus nog steeds aan die onChange voor ieder invoerveld vast. En als ik dat enigzins kan voorkomen zou dat wel lekker zijn. Het wordt namelijk echt een ***klus om dat voor al die velden te gaan maken.

Ze moeten namelijk wel lekker overal doorheen kunnen navigeren. Het is niet de bedoeling dat ze iedere klik moeten aangeven of ze het wel zeker weten dat ze de pagina willen verlaten. Het komt vaker voor dat ze ergens komen, niets invullen en dan weer verder klikken dan dat ze wel wijzigingen aanbregen.

hmm...ik zit nu te denken...misschien dat ik gewoon bij het laden van de pagina een variabele de waarde van alle velden kan geven, en bij het verlaten van de pagina controleren of de waardes van alle velden op dat moment verschilt van die eerder gezette waarde.

Da's...misschien nog niet eens zo'n gek idee...ik gaat ff zoeken hoe ik (dynamisch) door alle formelementen kan lopen en laat het weten als het gelukt is

[r0bert]

Door alle formelementen lopen:

code:

objFormEls = document.forms['formName'].elements

for (strIets in objFormEls)
{ /* objFormEls[strIets]... */ }

[marty]

Het wil nog niet helemaal lukken. Wat me tot dus ver al wel gelukt is, is om 1 string te maken van alle waarden in het formulier. Die zou ik dus kunnen matchen op het moment dat iemand de pagina wil verlaten.
crisp dat ding van jou is niet echt een optie want die vraagt het altijd. Ik wil het dus alleen vragen in het geval dat er iets gewijzigd is.
sKiLL4 die onUnLoad is opzich wel te gebruiken, alleen weet ik niet hoe ik het dan af kan kappen dat de user toch niet de pagina verlaat.
ik heb zoiets geprobeerd:

code:

function leave()
{
    if (1 == 0)
    {
        alert(FormValues);
    }
    else
    {
        confirm('weet je het zeker?');
    }
}

Maar dat werk niet. Ik heb dus even het geval gesimuleerd dat er ongelijke waardes zijn. Dan kom je dus in het else gedeelte terecht. Die vraagt dan wel of je het zeker weet, maar laat je vervolgens toch de pagina verlaten. Komt natuurlijk omdat ie niet rechtstreeks aan het onUnLoad event hangt.
Maargoed...ik weet dus niet hoe ik het op kan lossen. Kan iemand me helpen?

[r0bert]

edit: sorry.. was beetje te gehaast

[crisp]

marty schreef op 11 oktober 2002 @ 19:40:
Het wil nog niet helemaal lukken. Wat me tot dus ver al wel gelukt is, is om 1 string te maken van alle waarden in het formulier. Die zou ik dus kunnen matchen op het moment dat iemand de pagina wil verlaten.
crisp dat ding van jou is niet echt een optie want die vraagt het altijd. Ik wil het dus alleen vragen in het geval dat er iets gewijzigd is.
sKiLL4 die onUnLoad is opzich wel te gebruiken, alleen weet ik niet hoe ik het dan af kan kappen dat de user toch niet de pagina verlaat.
ik heb zoiets geprobeerd:

code:

function leave()
{
    if (1 == 0)
    {
        alert(FormValues);
    }
    else
    {
        confirm('weet je het zeker?');
    }
}

Maar dat werk niet. Ik heb dus even het geval gesimuleerd dat er ongelijke waardes zijn. Dan kom je dus in het else gedeelte terecht. Die vraagt dan wel of je het zeker weet, maar laat je vervolgens toch de pagina verlaten. Komt natuurlijk omdat ie niet rechtstreeks aan het onUnLoad event hangt.
Maargoed...ik weet dus niet hoe ik het op kan lossen. Kan iemand me helpen?

De onUnload kan je niet cancellen; de onBeforeUnload heeft de mogelijkheid wel om de onUnload niet uit te voeren door het stellen van de vraag.
Hoe kan je dit nu oplossen; door in de functie die onBeforeUnload wordt aangeroepen te kijken of er iets is gewijzigd, en zo ja, dan een bericht returnen, en zo nee, dan niets returnen; dat had je kunnen vinden als je nog een pagina verder gekeken had in de link die ik je gaf...

[Annie]

Weet niet of het helemaal toepasbaar is voor jouw situatie maar het is niet altijd nodig om de event-handlers aan specifieke targets te hangen. Een globale eventhandler op het document object is ook mogelijk.

voorbeeldje:

JavaScript:

<script type="text/javascript" defer="defer">

function handleDocEvent(oEvent)
{
  var bNetscape = (navigator.appName == 'Netscape');
  
  var oElement = (bNetscape ? oEvent.target : event.srcElement);
  var sElement = (oElement != null ? oElement.name : '');
  var oForm = (oElement != null ? oElement.form : '');
  var sForm = (oForm != null ? oForm.name : '');
  var sType = (oElement != null ? oElement.type : '');
  var sEventType = (bNetscape ? oEvent.type : event.type);
    
  alert (
          "form\t= " + sForm + "\n"
        + "element\t= " + sElement + "\n"
        + "type\t= " + sType + "\n"
        + "event\t= " + sEventType + "\n"
        );
  return true;
}


if ((navigator.appName == "Netscape") && (document.layers))
{
    document.captureEvents(Event.KEYUP | Event.MOUSEUP);
}
document.onkeyup = handleDocEvent;
document.onmouseup = handleDocEvent;

</script>

[ Voor 0% gewijzigd door Annie op 12-10-2002 01:23 . Reden: layout ]

[crisp]

Annie schreef op 12 oktober 2002 @ 01:21 a message:

Ehhmmmz, verkeerde topic wellicht?

[marty]

crisp schreef op 12 oktober 2002 @ 00:47:
[...]

De onUnload kan je niet cancellen; de onBeforeUnload heeft de mogelijkheid wel om de onUnload niet uit te voeren door het stellen van de vraag.
Hoe kan je dit nu oplossen; door in de functie die onBeforeUnload wordt aangeroepen te kijken of er iets is gewijzigd, en zo ja, dan een bericht returnen, en zo nee, dan niets returnen; dat had je kunnen vinden als je nog een pagina verder gekeken had in de link die ik je gaf...

Sorry crisp. Ik had die pagina wel gelezen, maar te snel zie ik nu. Ik dacht dat ie standaard aan stond alleen gedisabled kon worden. Ik zag toen niet hoe je dat om kon draaien, maar was eerlijk gezegd ook met honderd dingen te gelijk bezig vanmiddag :-) Nu ik het ff wat aandachtiger lees zie ik dat het inderdaad uitkomst gaat bieden. Excuus.

Als ie af is post ik 'm hier wel ff.

[Annie]

crisp schreef op 12 oktober 2002 @ 01:24:
[...]

Ehhmmmz, verkeerde topic wellicht?

Uhm, nou, wilde alleen maar aangeven dat je niet altijd op elk form element een eventhandler (onchange, onclick, whatever) hoeft te hangen, maar dat ook globaal kan doen op het document en binnen je JS functie bepalen aan de hand van de event-parameters of je wel of niet iets wil triggeren.
Beetje n.a.v. opmerking van TS:

Want dan moet ik dus wel zo'n onChange aan al die invoervelden gaan hangen. En dat zijn er nogal wat.

En ik had toevallig nog een stukkie code liggen in het archief

[crisp]

Annie schreef op 12 oktober 2002 @ 01:30:
[...]

Uhm, nou, wilde alleen maar aangeven dat je niet altijd op elk form element een eventhandler (onchange, onclick, whatever) hoeft te hangen, maar dat ook globaal kan doen op het document en binnen je JS functie bepalen aan de hand van de event-parameters of je wel of niet iets wil triggeren.
Beetje n.a.v. opmerking van TS:

[...]
En ik had toevallig nog een stukkie code liggen in het archief

Ach so, ja; ik zag weer captureEvents enzo en legde de link met een ander topic dat over NS4 ging enzo dus vandaar...

[Annie]

crisp schreef op 12 oktober 2002 @ 01:34:
[...]

Ach so, ja; ik zag weer captureEvents enzo en legde de link met een ander topic dat over NS4 ging enzo dus vandaar...

offtopic:
* Annie heeft vanavond wel een fles port richting glasbak geholpen, maar is nog niet helemaal

[marty]

BEN ER BIJNA!!!

Ik ben er bijna uit, het laatste kleine rotdingetje wil alleen niet lukken
Dit is wat ik heb:

code:

function CheckValues()
{
    if (InitValue == CompValues())
    {
        return null;
    }
    else
    {
        return 'Er Zijn Veranderingen Gemaakt!';
    }
}

window.onbeforeunload = CheckValues;

Opzich gaat het goed.
Als ik veranderingen maak dan komt ie in het else gedeelte, verander ik nix, dan komt ie in het if gedeelte. Dat werk dus. Alleen krijg ik als ik geen veranderingen maak, toch de vraag of ik de pagina wel wil afsluiten (met als bericht null).
Ik snap niet waarom - window.unbeforeunload zou nu toch gewoon null moeten worden en daardoor die hele vraag skippen?

(ik heb ook nog geprobeerd dit te doen:

code:

    var message;
    if (InitValue == CompValues())
    {
        message = null;
    }
    else
    {
        message = 'Er Zijn Veranderingen Gemaakt!';
    }
    return message;

maar dat maakte ook geen verschil)

[crisp]

en als je gewoon return; doet, of helemaal nix?

[marty]

Annie schreef op 12 oktober 2002 @ 01:21:
Weet niet of het helemaal toepasbaar is voor jouw situatie maar het is niet altijd nodig om de event-handlers aan specifieke targets te hangen. Een globale eventhandler op het document object is ook mogelijk.
</script>
[/code]

Bedankt voor het meedenken. Dat was opzich een goede vervanging geweest. Maar ik heb nu al iets anders wat opzich nog beter werkt denk ik. Als je namelijk een waarde van 21 naar 20 en weer terug naar 21 verandert, dan zal het zeggen dat er wat veranderd is, terwijl dat in weze niet zo is. Het stukje code wat ik heb geschreven zegt ook dat er nix veranderd is. Wat natuurlijk netter is.

[marty]

crisp schreef op 12 oktober 2002 @ 01:52:
en als je gewoon return; doet, of helemaal nix?

Crisp, ik kan je wel zoenen!
Javascript zal wel nooit mijn ding worden, want ik snap dus niet waarom dat nu weer wél werkt (idd gewoon return;), maargoed, ik ben veel te blij dát het werkt, om me daar op dit moment nog druk over te maken.

hier is de volledige source (voor het archief):

code:

<html>
<head>
<script language="JavaScript">
var InitValue = '';
function CompValues()
{
    var FormValues;
    FormValues = '';
    for (x=0;x<document.forms[0].length;x++)
    {
        if (document.forms[0].elements[x].type != 'checkbox' && document.forms[0].elements[x].type != 'radio')
        {
            // alert(document.forms[0].elements[x].name+' '+document.forms[0].elements[x].value);
            FormValues = FormValues+document.forms[0].elements[x].value;
        }
        else
        {
            // alert(document.forms[0].elements[x].name+' '+document.forms[0].elements[x].checked);
            FormValues = FormValues+document.forms[0].elements[x].checked;
        }
    }
    return FormValues;
}
function SetInitValue()
{
    InitValue = CompValues();
}
function CheckValues()
{
    if (InitValue == CompValues())
    {
        return;
    }
    else
    {
        return 'Er Zijn Veranderingen Gemaakt!';
    }
    // return message
}

window.onbeforeunload = CheckValues;

// End -->
</SCRIPT>
</head>

<BODY onLoad="SetInitValue()">

<a href="form2.html">link</a><br>
<br>
<form enctype="text/plain" NAME="frm" onsubmit="CompValues();">
<input type="text" name="naam" value="marty"><br>
<input type="checkbox" name="dag" value="maandag" checked> maandag<br>
<input type="checkbox" name="dag" value="dinsdag" checked> dinsdag<br>
<input type="checkbox" name="dag" value="woensdag"> woensdag<br>
<input type="radio" name="sexe" value="man" checked> man<br>
<input type="radio" name="sexe" value="vrouw"> vrouw<br>
<select name="leeftijd">
<option value=""></option>
<option value="0-49" selected>0-49</option>
<option value="50-99">50-99</option>
</select><br>
<textarea name="tekst" row="3" cols="30">bladibla</textarea><br>
<input type="submit">
</form>

</body>
</html>

Ik zal vast een aantal dingen wel niet helemaal netjes hebben gemaakt, maar zoals ik al zei, Javascript is niet echt mijn ding. Maargoed, misschien dat ik andere mensen er ook nog gelukkig mee kan maken zo

[marty]

p.s.je:

code:

 function CompValues()
 {
    var FormValues = '';
    if (document.forms[0])
    {
        for (x=0;x<document.forms[0].length;x++)
        {
            if (document.forms[0].elements[x].type != 'checkbox' && document.forms[0].elements[x].type != 'radio')
            {
                // alert(document.forms[0].elements[x].name+' '+document.forms[0].elements[x].value);
                FormValues = FormValues+document.forms[0].elements[x].value;
            }
            else
            {
                // alert(document.forms[0].elements[x].name+' '+document.forms[0].elements[x].checked);
                FormValues = FormValues+document.forms[0].elements[x].checked;
            }
        }
    }
    return FormValues;
 }

dat werkt wat beterL voor als je 'm in elke pagina wil includen - dan geeft ie geen foutmelding als er geen formulier aanwezig is

[marty]

toch nog een klein vraagje. Als ik die functie wil cancellen doe ik

code:

window.onbeforeunload = null;

Dat heb ik ook nodig, want gek genoeg wordt die functie ook geactiveerd als ik via een link een popupje open vanaf een pagina. Door een functie voor die popup te schrijven kan ik 'm dan eerst uitschakelen, waardoor ie 'niet afgaat' en vervolgens die popup laten openen. Dat werkt goed, alleen krijg ik 'm daarna niet meer 'aangezet' :-) (het probleem is dus dat mensen daarna gewoon weer van de pagina weg kunnen navigeren, ook als ze wijzigingen hebben gemaakt)
als ik window.onbeforeunload = true; doe, dan geeft ie een foutmelding Niet Geimplementeerd. En ook window.onbeforeunload = 'true' helpt niet.

(crips..... ?? )

[Annie]

Als je de click op de link 'uitschakeld' dan heb je waarschijnlijk nergens meer last van.
Dus:
<a href="javascript://" onclick="window.open('next.html'); return false;">popup</a>

[crisp]

de onbeforeunload weer activeren doe je als volgt:

code:

window.onbeforeunload = CheckValues;

Het is namelijk een event-handler die of nergens naar verwijst (null) of naar een functie.

[marty]

Het mocht niet baten.
Ik heb het geprobeerd door het in de link te zetten zoals je zei:

code:

<a href="javascript: popup('show.php?what=all', 'popUpWin', '750', '500', 'yes'); return false;">

en ook om door het in de popup funtie te zetten:

code:

 function popup(url,win,w,h)
 {
    // window.onbeforeunload = null;
    var winl = (screen.width - w) / 2;
    var wint = (screen.width - h) / 2;
    prop = 'height='+h+',width='+w+',top=100,left='+winl+',scrollbars=yes,resizable=no,toolbar=no,location=no,status'
    Window = window.open(url,win,prop);
    // window.onbeforeunload = 'true';
    return false;
 }

Maar beide hielp niet

[crisp]

marty schreef op 12 oktober 2002 @ 13:54:
Het mocht niet baten.
[...]
Maar beide hielp niet

Probeer het eens zo; het is juist de bedoeling nl dat je geen href uitvoert:

HTML:

<a href="javascript://" onClick="popup('show.php?what=all', 'popUpWin', '750', '500', 'yes'); return false;">

of die return false nu in de functie staat of in de onclick maakt niet zoveel uit; allebei is goed.

[marty]

crisp schreef op 12 oktober 2002 @ 13:46:
de onbeforeunload weer activeren doe je als volgt:

code:

window.onbeforeunload = CheckValues;

Het is namelijk een event-handler die of nergens naar verwijst (null) of naar een functie.

Maar als ik dat doe, dan 'gaat ie gelijk weer af'. Of ik doe nog steeds iets fout. Ik heb m'n popup functie nu zo:

code:

 function popup(url,win,w,h)
 {
    window.onbeforeunload = null;
    var winl = (screen.width - w) / 2;
    var wint = (screen.width - h) / 2;
    prop = 'height='+h+',width='+w+',top=100,left='+winl+',scrollbars=yes,resizable=no,toolbar=no,location=no,status'
    Window = window.open(url,win,prop);
    window.onbeforeunload = CheckValues;
 }

maar dan krijg ik dus nog die melding of ik het wel zeker weet.

[marty]

crisp schreef op 12 oktober 2002 @ 14:00:
[...]

Probeer het eens zo; het is juist de bedoeling nl dat je geen href uitvoert:

HTML:

<a href="javascript://" onClick="popup('show.php?what=all', 'popUpWin', '750', '500', 'yes'); return false;">

of die return false nu in de functie staat of in de onclick maakt niet zoveel uit; allebei is goed.

AAAaaaahhhh....ik snap het idee!
En het werkt ook!!

Crisp en Annie, beide hartelijk bedankt voor de hulp.
Hij werkt trouwens goed die functie. Ik heb 'm in m'n header.php file gestopt en hij doet 't gelijk overal op iedere pagina. Echt super. Jullie weten niet half hoeveel mensen ik hier gelukkig mee heb gemaakt (including myself!)