<<<

Projektowanie stron internetowych

Formularze

Podstawy pod używanie formularzy w JavaScript wyjaśniłem we wcześniejszych rozdziałach (Zdarzenia, Hierarchia w JavaScript). Te wiadomości wystarczą nam do napisania skryptu sprawdzającego czy wpisaliśmy poprawnie adres email.

Wyszukiwanie znaków

Do wyszukiwania znaków służy metoda indexOf(). My chcemy aby skrypt wyszukiwał symbolu "@" i jednej ".". Zaczniemy od stworzenia okienka tekstowego i przycisku:

<form name="spr_email">
<input type="text" name="email">
<input type="button" value="sprawdz">
</form>

Teraz tworzymy odpowiednią funkcję

function sprawdz_email()
{
if (spr_email.email.value.indexOf('@',0) == -1 ||
spr_email.email.value.indexOf('.',0) == -1)
alert("Niepoprawny adres poczty elektronicznej!");
else
alert("OK!");
}

Wartość -1 oznacza null czyli nic. Nasz skrypt nie znalazł @ i kropki. Natomiast value oznacza wartość przechowywaną w okienku tekstowym. Jeśli wpiszemy do niego nasz email to JavaScript będzie to traktował jako value i tu wyszukiwał @ i kropki.

Teraz powiążemy wszystko w jedną całość

<script language="JavaScript">
<!--

function sprawdz_email()
{
if (spr_email.email.value.indexOf('@',0) == -1 ||
spr_email.email.value.indexOf('.',0) == -1)
alert("Niepoprawny adres poczty elektronicznej!");
else
alert("OK!");
}

// -->
</script>

<form name="spr_email">
<input type="text" name="email">
<input type="button" value="sprawdź" onclick="sprawdz_email()>
</form>

Wpisz swój adres email:

Emailery

Umiemy już sprawdzać poprawność adresu email. Teraz nauczymy się robić formularz wysyłający email pod wskazany przez nas adres. Nasz emailer będzie wyglądał tak:

Na początek tworzymy formularz który posłuży nam do wysyłania emaili.

<form name="wwwemail" method="post">
<input type="text" name="email" size="20"><br>
<input type="text" name="temat" size="20"><br>
<textarea cols="43" rows="13" TYPE="TEXT" NAME="tresc" MAXLENGTH="580"></textarea><br>
<input type="submit" value="wyślij"> <input type="reset" value="wyczyść">
</form>

Teraz tworzymy funkcje sprawdzającą adres email:

function sprawdz_email()
{
if (wwwemail.email.value.indexOf('@',0) == -1 ||
wwwemail.email.value.indexOf('.',0) == -1)
alert("Niepoprawny adres poczty elektronicznej!");
else
wyslij();
}

Jak przyjrzymy się temu kodu widzimy na końcu funkcję wyslij(), posłuży ona nam do definicji parametrów naszego emailera. Postać funkcji wyslij() ma postać:

function wyslij()
{
temat = "?subject=" + wwwemail.temat.value;
email = "mailto:" + wwwemail.email.value + temat;
document.wwwemail.action = email;
}

Zmiennej temat przypisujemy polecenie powodujące umieszczenie tematu do naszego listu. Do tego dopisujemy wartość okienka z tematem. Następną zmienną jest email. Jej przypisujemy oglną definicje znaną z HTML do wysyłania listów. Metoda document.wwwemail.action powoduje przypisanie poleceniu action adresu email z tematem.

Teraz musimy poskładać nasz kod do kupy.

<script language="JavaScript">
<!--
var temat;
var email;

function sprawdz_email()
{
if (wwwemail.email.value.indexOf('@',0) == -1 ||
wwwemail.email.value.indexOf('.',0) == -1)
alert("Niepoprawny adres poczty elektronicznej!");
else
wyslij();
}

function wyslij()
{
temat = "?subject=" + wwwemail.temat.value;
email = "mailto:" + wwwemail.email.value + temat;
document.wwwemail.action = email;
}

// -->
</script>

<form name="wwwemail" method="post" onsubmit="sprawdz_email()">
<input type="text" name="email" size="20"><br>
<input type="text" name="temat" size="20"><br>
<textarea cols="43" rows="13" TYPE="TEXT" NAME="tresc" MAXLENGTH="580"></textarea><br>
<input type="submit" value="wyślij"> <input type="reset" value="wyczyść">
</form>

Proszę zwrócić uwagę na sposób odwołania się do całego skryptu za pomocą polecenia onsubmit. Zawsze umieszczamy go w sekcji <form>. Ważne jest także umieszczenie method="post", gdyż ona gwarantuje pobranie wszystkich informacji z naszego formularza.

Projektowanie stron internetowych Copyright(c) 1998 by Robert Fontański