Avatar billede Slettet bruger
29. marts 2011 - 18:30 Der er 12 kommentarer og
1 løsning

Exit page alert

Jeg har forsøgt at finde forskellige scripts til hvordan man viser en exit page alert, men som udgangspunkt skal den kun vises hvis et eller flere af felterne er udfyldt.

På min hustrus hjemmeside kan man bestille sange, men enkelte har desværre mistet alle data i bestillingsformularen, da de er kommet til at klikke ind på en af de andre sider.

http://cassiopia.dk/bestilling.php

Vi vil gerne have en påmindelse til den besøgende som er ved at bestille, altså når i hvert fald email feltet er udfyldt, at så vises den hvis der klikkes på et link, ellers skal den ikke vises.

Og så skal den også gerne falde i med sidens design.

Nogen gode ideer, de skal virke i både IE og Firefox
Avatar billede claes57 Ekspert
29. marts 2011 - 18:34 #1
hvad med at deaktivere menuer mens data er udfyldt - sæt evt en 'rens og fortryd' knap, der tømmer formular og genaktiverer menuer.
Avatar billede Slettet bruger
29. marts 2011 - 19:08 #2
Kræver det ikke en helt anden opbygning af menusystemet?
Avatar billede olebole Juniormester
29. marts 2011 - 19:22 #3
<ole>

Jo, men det slipper du næppe uden om. Du kan i toppen af dokumentet sætte en global variabel til false bEdited = false;.

På alle felter kan du så lægge en onchange handler, der eveluerer, om feltets defaultValue er forskellig fra dets value. Hvis det er tilfældet, sættes bEdited = true;.

Så kan du skrive noget i stil med:


window.onbeforeunload = function(){
    if (bEdited) return "Er du sikker på, du vil forlade siden?"
}



/mvh
</bole>
Avatar billede olebole Juniormester
29. marts 2011 - 19:26 #4
- men spørgsmålet er, om det er hensigtsmæssigt at forsøge at lave de tekniske grundvilkår for WWW om. Hvis en bruger ikke kan holde snitterne fra en menu, mens hun udfylder en formular, er hun næppe klar til at sidde alene foran en PC  =)
Avatar billede werd Nybegynder
29. marts 2011 - 19:33 #5
@olebole
hehe true! Men tror ikke det er de mest garvede computerbrugere der bestiller festsange. Desuden vil man jo gøre alt hvad man overhovedet kan for at undgå tabt salg.

løsningen ovenfor er god men hvis du gerne vil undgå den grimme confirm-boks bliver du nødt til at gemme værdierne af felterne i sessionen.

Felterne kan så enten gemmes asynkront når felterne forlades eller synkront på onbeforeunload eventen. Denne løsning kræver at du fra js kalder en php ressource gennem xhr og at du når du åbner siden med formularen henter sessionsvariablerne ind i felterne.

Denne løsning er ikke lavet på 5 minutter, men til gengæld får du et flottere resultat.
Avatar billede claes57 Ekspert
29. marts 2011 - 19:56 #6
du kunne måske gemme felt-data når de udfyldes løbende i cookie, og hvis bruger går væk, så har du data til næste gang denne bruger kommer til bestil, så kan du let reetablere data.
Avatar billede olebole Juniormester
29. marts 2011 - 20:18 #7
werd >> Ja, hvis applikationen fejler - eller f.eks. ved fejludfyldning af et felt - bør man gøre alt for at redde brugeren. Direkte dumme handlinger hverken kan eller bør man efter min mening bruge krudt på.

Ja, man vil gerne redde et salg, men man vil endnu hellere redde et liv ... og vi har jo altså ikke 78.397 hold stående parat ved alle landets fodgængerovergange til at lægge klodser under speederen på biler, der venter for rødt lys. Det må formodes, at folk selv kan holde de gigtsvage gangvorter fra speederen. Så deeeeeeet ...  *o)
Avatar billede Slettet bruger
29. marts 2011 - 22:16 #8
ok.. så hvis vi ser bort fra kvinder og gigtsvage sjæle :) så lyder de der småkager som en god idé.

Hvad skal jeg bruge for at få det hele gemt i en cookie? Eller er det smartere med asynkront/synkront (og hvad dælen er det)

Bestilling.php
<?php
  $page_title         = "Bestilling";
  $stylesheet         = "music";
  $menu             = "music";
  $graphics            = "music";
  include($_SERVER["DOCUMENT_ROOT"].'/php/start.php');
?>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript">
_d=document;
var selec
function ajaxFileUpload()
{
$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});

$.ajaxFileUpload
(
{
url:'doajaxfileupload.php?ranfnvn='+document.getElementById('ranfnvn').value,
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
forrfil: _d.getElementById('fileToUpload').value,
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
document.getElementById('loading').style.display = 'none';
//alert(data.msg);

document.getElementById('uplod').style.display = 'none';
if (data.msg != "4") {
fff = this.forrfil;
_d.getElementById('upldd').innerHTML += '<br/>' + fff;
_d.getElementById('fileToUpload').value = "";
document.getElementById('uplod').style.display = 'block';
} else {
_d.getElementById('upldd').innerHTML += '<br/>' + this.forrfil + 'Ikke flere fil uploads.';
}

}
}
},
error: function (data, status, e)
{
alert(e);
}
}
)

return false;

}
$(document).ready(function () {$('input:first').focus()});
</script>

<form action="mailform.php?tak=tak.php" method="post" enctype="multipart/form-data" name="form1">
  <table width="100%" border="0">
    <tr>
      <td></td>
      <td><strong>Afsender</strong></td>
    </tr>
    <tr>
      <td align="right">Navn: </td>
      <td><input type="text" id="navn" name="navn" class="t1">&nbsp;<span class="star"><strong>&#8249;</strong></span></td>
    </tr>
    <tr>
      <td align="right">Adresse: </td>
      <td><input type="text" id="adresse" name="adresse" class="t1"></td>
    </tr>
    <tr>
      <td align="right">Postnummer og By: </td>
      <td><input type="text" id="postnr_by" name="postnr_by" class="t1"></td>
    </tr>
    <tr>
      <td align="right">Telefon: </td>
      <td><input type="text" id="telefon" name="telefon" class="t1"></td>
    </tr>
    <tr>
      <td align="right">Mail: </td><!-- vigtigt : email input SKAL ha name="email" og id="email" -->
      <td><input type="text" id="email" name="email" class="t1">&nbsp;<span class="star"><strong>&#8249;</strong></span></td>
    </tr>
    <tr>
      <td></td>
      <td><strong>Modtager</strong></td>
    </tr>
    <tr>
      <td align="right">Navn: </td>
      <td><input type="text" id="modtager" name="modtager" class="t1">&nbsp;<span class="star"><strong>&#8249;</strong></span></td>
    </tr>
    <tr>
      <td align="right">Alder: </td>
      <td><input type="text" id="alder" name="alder" class="t1">&nbsp;<span class="star"><strong>&#8249;</strong></span></td>
    </tr>
    <tr>
      <td></td>
      <td><strong>Begivenhed</strong></td>
    </tr>
    <tr>
      <td align="right">Anledning: </td>
      <td><input type="text" id="anledning" name="anledning" class="t1">&nbsp;<span class="star"><strong>&#8249;</strong></span></td>
    </tr>
    <tr>
      <td align="right">Fest dato: </td>
      <td><input type="text" id="festdato" name="festdato" class="t1">&nbsp;<span class="star"><strong>&#8249;</strong></span></td>
    </tr>
    <tr>
      <td align="right">Melodi: </td>
      <td><input type="text" id="melodi" name="melodi" class="t1"></td>
    </tr>
    <tr>
      <td align="right" valign="top">Musik til sangen?: </td>
      <td>
        <select name="musik" id="musik" class="t1">
          <option>Nej</option>
          <option>Ja</option>
        </select>&nbsp;<span class="star"><strong>&#8249;</strong></span>
      </td>
    </tr>
    <tr>
      <td align="right">V&aelig;lg format: </td>
      <td>
        <select name="format" id="format" class="t1">
          <option>Angiv venligst format..</option>
          <option>Opsat i word klar til kopiering (kr. 400,-)</option>
          <option>Med foto/clipart på A4 side klar til kopiering (kr. 500,-)</option>
          <option>Med foto/Clipart på 1 foldet A4 side klar til kopiering (kr. 550,-)</option>
          <option>Med foto/clipart på 2 A4 sider foldet som et lille hæfte og klar til kopiering (kr. 600,-)</option>
          <option>Personlig takkesang opsat i word (Kr. 200,-)</option>
        </select>&nbsp;<span class="star"><strong>&#8249;</strong></span>
      </td>
    </tr>
    <tr>
      <td align="right" valign="top">Stikord: </td>
      <td><textarea id="stikord" name="stikord" class="t3"></textarea>&nbsp;<span class="star"><strong>&#8249;</strong></span></td>
    </tr>
    <tr>
      <td align="right" valign="top">Levering: </td>
      <td>
        <select name="levering" id="levering" class="t1">
          <option>Sendes som E-mail</option>
          <option>Sendes med posten</option>
        </select>
      </td>
    </tr>
    <tr>
      <td align="right" valign="top">Leveringstid: </td>
      <td>
        <select name="leveringstid" id="leveringstid" class="t1">
          <option>Leveret indenfor 3 uger</option>
          <option>Leveret indenfor 5 dage (+ Kr. 100,-)</option>
        </select>
      </td>
    </tr>
    <tr>
      <td align="right" valign="top">Billede(r): </td>
      <td valign="top">
        <!--<input id="t1" type="file" name="file">--><input id="uplb" type="button" value="upload Billed(er)" onClick="if (_d.getElementById('email').value=='') {$('#noem').html('Mail skal udfyldes f&oslash;r billedupload.');return;};$('#noem').html('');_d.getElementById('ranfnvn').value=_d.getElementById('email').value;_d.getElementById('uplod').style.display='block';this.style.display='none';" /><div id="noem" style="color:#880000;"></div>
        <div style="color:#3333cc;" id="upldd"></div>
      </td>
    </tr>
    <tr>
      <td></td>
      <td><input id="t1" type="button" value="Send bestilling" onClick="tjek()" /></td>
    </tr>
  </table>
</form>
<div id="uplod" style="display:none;width:650px;margin-left:auto;margin-right:auto;">
<table width="100%" class="tableForm">
  <tr>
    <td width="130" nowrap></td>
    <td><strong>Billeder</strong> (max 5 billeder)</td>
  </tr>
  <tr>
</table>
<center><img id="loading" src="js/loading.gif" style="display:none;"></center>
<form id="uform" name="form" action="" method="POST" enctype="multipart/form-data">
<table width="100%" class="tableForm">
  <tr>
    <td width="130" nowrap></td>
    <td>V&aelig;lg fil, og klik upload knap</td>
  </tr>
  <tr>
    <td width="130" nowrap></td>
    <td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input" unselectable="on"></td>
  </tr>
  <tr>
    <td width="130" nowrap></td>
    <td><button class="button" id="buttonUpload" onClick="$('#loading').show();return ajaxFileUpload();" unselectable="on">Upload</button></td>
  </tr>
</table>
<input type="hidden" name="ranfnvn" id="ranfnvn" value="" />
</form>   
</div>

<?php include($_SERVER["DOCUMENT_ROOT"].'/php/end.php'); ?>
Avatar billede werd Nybegynder
29. marts 2011 - 23:04 #9
Som jeg skrev tidligere så tager det lidt tid så enten må du oprette et spørgsmål i den kategori der hedder "opgaver" eller også kan du tage et kig på nedenstående links og prøve selv. Jeg vil selvfølgelig gerne hjælpe hvis det driller.

PHP sessions: http://www.tizag.com/phpT/phpsessions.php
PHP og XHR: http://www.w3schools.com/php/php_ajax_php.asp

Hvad angår synkront og asynkront så er det en parameter der kan sættes i XHR-elementet og betyder kort sagt om funktionen der kalder ressourcen skal vente på svar eller om der skal fortsættes og lade en funktion håndtere svaret når det er klar.

Hvis du bruger den event der hedder onbeforeunload som ole beskrev skal du gøre det synkront da felterne skal gemmes før denne sendes videre. Hvis du bruger den event der hedder onblur på input elementerne (når felterne forlades) kan du med fordel gøre det asynkront da man så gemmer felterne undervejs og brugeren derfor ikke er på vej væk.
Avatar billede Slettet bruger
30. marts 2011 - 00:21 #10
Unødvendigt ?

Har lige prøvet. Hvis man begynder at udfylde formen, og så liige vil se "priser", og derefter bakker tilbage, så er beholder felterne deres indhold - som forventet. No problem.

Hvis du alligevel vil "deaktivere" menuen, så læg et layer henover så det bliver umuligt at klikke på den - det kan gøres uden at pille  ved selve menuen.

Tilføj:
<div id="skjold" style="position:absolute; top:0px; left:0px; right:0px; height:200px; display:none; z-index:100;"></div>
Sidst i <body>.

Og læg så en "event" på alle <input>'erne:
onkeyup="if (this.value != '') document.getElementById('skjold').style.display='block'"

Dette bør så suppleres med en "reset" knap, som dels sletter indholdet i alle felterne, og samtidig hæver "skjoldet"
<input type="reset" onclick="document.getElementById('skjold').style.display='none'" value="Fortryd/reset..">

Løsningen med cookies er ikke helt god, for der er ret snærende grænser for hvormeget man kan fylde i sådan én..
Avatar billede olebole Juniormester
30. marts 2011 - 20:34 #11
werd >> "Hvis du bruger den event der hedder onbeforeunload som ole beskrev skal du gøre det synkront da felterne skal gemmes før denne sendes videre"

Det er ikke korrekt. Så snart requesten er sendt - er den sendt. Serveren er ligeglad med, om du bliver hængende og ser dens response, og det er siden også  *o)
Avatar billede werd Nybegynder
30. marts 2011 - 21:10 #12
Ja du har sådanset ret, men jeg har haft problemer med at requesten ikke bliver færdighåndteret før siden skifter. Du kan selv prøve:
<?php
session_start();
$a = (isset($_SESSION["a"])) ? $_SESSION["a"] : "";
$b = (isset($_SESSION["b"])) ? $_SESSION["b"] : "";
$c = (isset($_SESSION["c"])) ? $_SESSION["c"] : "";
$d = (isset($_SESSION["d"])) ? $_SESSION["d"] : "";
$e = (isset($_SESSION["e"])) ? $_SESSION["e"] : "";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Page 1</title>
    <script type="text/javascript">
        var active_element;
        window.onload = function() {
            var felter = document.getElementById("formular").elements;
            for (i=0; i<felter.length; i++)
            {
                var elem = felter[i];
                elem.onfocus=function() {
                    active_element=this;
                };
                elem.onblur=function() {
                    //saveValue(this,true);
                };
              }
        };

        //window.onbeforeunload = function(){
        //    if (active_element&&active_element.value&&active_element.name) {
        //        saveValue(active_element,false);
        //    }
        //};
        function go() {
        //window.onbeforeunload = function(){
            var felter = document.getElementById("formular").elements;
            var qstring = "?";
            for (i=0; i<felter.length; i++)
            {
                qstring += felter[i].name+"="+felter[i].value;
                if (i+1<felter.length) {qstring+="&"}
            }
            if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
                  xmlhttp=new XMLHttpRequest();
            }
            else
              {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //document.getElementById('stat').innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","savesessionvar.php"+qstring,true);
            xmlhttp.send();
        };
       
        function saveValue(felt,sync) {
            var qstring = "?"+felt.name+"="+felt.value;
            if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
                  xmlhttp=new XMLHttpRequest();
            }
            else
              {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //document.getElementById('stat').innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","savesessionvar.php"+qstring,sync);
            xmlhttp.send();
        }
    </script>
</head>
<body>
<div>
    <div>
    <a href="form.php">Form</a> |
    <a href="otherpage.php">Other page</a>
    <input type="button" onclick="go();" />
    </div>
    <div id="lort">
    <form action="#" id="formular">
    <input type="text" value="<?php echo $a ?>" name="a" />
    <input type="text" value="<?php echo $b ?>" name="b" />
    <input type="text" value="<?php echo $c ?>" name="c" />
    <input type="text" value="<?php echo $d ?>" name="d" />
    <input type="text" value="<?php echo $e ?>" name="e" />
    <input type="submit" />
    </form>
   
    </div>
</div>
</body>
</html>

og xhr ressourcen:
<?php
session_start();
foreach ($_REQUEST as $key => $value)
{
    $_SESSION[$key] = $value;
}
?>
Avatar billede Slettet bruger
25. maj 2011 - 07:36 #13
Lukket
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester