home | sitemap

Aanmelden nieuwsbrief op elke pagina

Voor het snel aanmelden op een nieuwsbrief kan (op elke pagina) worden volstaan met onderstaande voorbeeld.

Plaats onderstaande html op de pagina. Het toont een invulveld met standaard de tekst 'e-mailadres...' (lichtgrijs.) Als het veld de focus krijgt verdwijnt de standaard tekst en kan men het emailadres opgeven. Door een Enter te geven of op de afbeelding/link achter het veld te klikken wordt het aanmeld-script aangeroepen (dat controleert of het e-mailadres correct is en de vervolgpagina toont.)

...
<p>
  <input type="text" name="nlemail" id="nlemail" value="e-mailadres..." onfocus="if
  (this.value=='e-mailadres...') this.value='';this.className='wbfocus'" onblur="if
  (this.value=='') {this.value='e-mailadres...';this.className='wbblur'}" onkeypress="return
  onkeyNieuwsbrief(event);" /><a href="#" onclick="javascript:return onclickNieuwsbrief();"><img
  src="/css/mijnstijl/gfx/link.gif" alt="" /></a>
</p>
...

Met ondersteuning van de volgende javascript en css:

function onclickNieuwsbrief() {
  // haal het ingevulde adres op
  var value = document.getElementById("nlemail").value;
  // als het adres niet de default tekst is
  if (value != "e-mailadres...") {
    // roep het aanmeld-script aan met de minimale gegevens: emailadres en formaat nieuwsbrief
    location.href = "/cgi/register.cgi?site=mijnwebsite;task=send;email="+
      encodeURIComponent(value)+";format=html";
  }
  return false;
}

function onkeyNieuwsbrief(e) {
  // check of er een Enter is gegeven en zo ja roep de onclickNieuwsbrief functie aan
  return ifEnter(e, onclickNieuwsbrief);
}

function ifEnter(e, func) {
  // Enter toets gedrukt?
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else {
    if (e) {
      keycode = e.which;
    } else {
      return true;
    }
  }
  // Ja! 
  if (keycode == 13) {
    // roep meegegeven functie aan
    func();
    return false;
  }
  return true;
}

.wbfocus { /* tekstkleur als veld focus heeft */
  color: black;
}
.wbblur { /* tekstkleur als veld de focus niet heeft */
  color: #aaa;
}