|
|
|
|
|
|
|
|||
|
JavaScript.nu
/
JavaScript-kurs
/
Formul�r med JavaScript och indexOf()
Nu ska du l�ra dig lite andra saker i JavaScript som �r v�ldigt bra n�r man g�r formul�r, vilket jag f�ruts�tter att du kan om du ska l�sa detta kapitel, annars kan du l�ra dig det h�r. Givetvis kan du �ven helt enkelt hoppa �ver detta kapitel om du inte vill l�ra dig att skapa formul�r. Om du har, t.ex. en g�stbok, men inte vill att folk ska skriva in sig med ett speciellt namn (t.ex. ditt), s� kan du hindra dem fr�n att skriva in sig med det namnet med ett JavaScript (vad annars :) ). L�t oss s�ga att du har en g�stbok hos GuestWorld, d� har du dessa f�lt. �ven om du inte har din g�stbok d�r s� kan du l�tt f�lja med. Att jag tagit GuestWorld som exempel betyder INTE att jag f�ruts�tter att du kan n�got som helst om dem, dessa f�lt skulle allts� kunna vara precis vilka f�lt som helst. Jag har valt Guestworlds f�lt just f�r att de inneh�ller de sorts f�lt vi ska titta p�: <!-- Formul�rets start ---------------------------------------------------------> <form method="post" name="LiveFORM" action="http://din_planet.guestworld.com/wgb/wgb.dbm?owner=din_g�stboks_namn"> <!-- G�mda F�lt -----------------------------------> <input type="hidden" name="copyright" value="Copyright (C) 1996,1997 Patil Systems, Inc."> <input type="hidden" name="verno" value="1.7"> <!-- Namn ---------------------------------> <input name="fullname" size=30 maxlength=60> <!-- E-mail-adressen ------> <input name="email" size=30> <!-- Hemsidans adress ------------------------> <input name="homepage" value="https://" size=30> <!-- Hemsidans namn ------------------------> <input name="hometitle" size=30 maxlength=60> <!-- Vart man bor ----------> <input name=location size=30> <!-- Bes�karens kommentarer --------------------------> <TEXTAREA NAME="lfgbcomment" COLS=30 ROWS=8></textarea> <!-- Submit-knapp --> <input type=submit> </FORM>L�t oss nu s�ga att du inte vill att n�gon ska kunna skriva in sitt namn som "G�ran Persson". D� f�r du ta till ett script som l�ser av rutan d�r man skriver in sitt namn och ser till att det inte st�r G�ran Persson d�r innan det skickar iv�g formul�ret till GuestWorld (eller vart man nu har sin g�stbok). Observera att s� gott som alla g�stb�cker kan "signeras" fr�n en annan sida �n din, s� en bes�kare kan signera din g�stbok fr�n sin h�rddisk med vilka uppgifter (= ifyllda f�lt) som helst. Skulle du inte vilja detta f�r du ta till cgi och g�ra dig en egen g�stbok, vilket vi inte alls ska f�rdjupa oss i (du �r ju trots allt h�r f�r att l�ra dig JavaScript). N�ja, tillbaka till formul�ret och att man inte fick fylla i G�ran Persson som sitt namn.
Till att b�rja med s� g�r vi s� att s� fort man f�rs�ker skicka formul�ret
s� startas en funktion, den som ska avsl�ja vad man f�r och inte f�r skriva i formul�ret.
S� fort n�gon trycker p� submit-knappen som finns i denna "FORM"
s� startar funktionen funktionens_namn(). Att vi har "return"
f�rst beror p� att vi ska kunna avbryta skickandet av formul�ret om vi vill
med "return false" (nedan l�r du dig vad det �r).
Nu �r allt i formul�ret f�rdigt, nu ska du l�ra dig vad vi ska skriva i funktionen funktionens_namn() som g�r formul�ret till det vi vill. Vi b�rjar med att skriva detta:
<SCRIPT LANGUAGE="JavaScript">
<!--
function funktionens_namn()
{
if (document.LiveFORM.fullname.value == "G�ran Persson" || (document.LiveFORM.fullname.value == "g�ran persson") || (document.LiveFORM.fullname.value == "G�RAN PERSSON"))
{
alert("L�gnare d�r! Du heter inte alls " + document.LiveFORM.fullname.value + "");
}
}
//-->
</SCRIPT>
Vi b�rjar med att g�ra funktionen (vad annars) och
sedan g�r vi en "if", d�r vi s�ger att
om document.LiveFORM.fullname.value
�r detsamma som de v�rden vi gett (G�ran Persson,
g�ran persson och G�RAN PERSSON (eftersom JavaScript
�r k�nslig med StOr oCh lItEn bokstav s� har vi graderat oss med
alla "G�ran Persson"-varianter)) s� h�nder det som
st�r mellan { och }. Allt detta har du l�rt dig,
f�rutom vad texten document.LiveFORM.fullname.value
betyder.
document.LiveFORM.fullname.value har som vi ser 4 delar.
Med denna information tittar webbl�saren (p� uppdrag av funktionen) p� v�rat dokument efter formul�ret liveFORM och f�ltet fullname med v�rdet G�ran Persson, g�ran persson eller G�RAN PERSSON. Nu kan vi hur l�tt som helst s�tta in attributen maxlength i INPUT-f�lt s� att man inte kan fylla i mer �n ett visst antal tecken, men detta g�r ju inte med TEXTAREA-f�lten, d�rf�r kan du, om du inte vill ha f�r l�nga inl�gg i g�stboken skriva...
if (document.LiveFORM.lfgbcomment.value.length > 60)
{
alert("Ditt inl�gg f�r inte vara l�ngre �n 60 tecken, ditt inl�gg �r p� " + document.LiveFORM.lfgbcomment.value.length + " tecken");
}
...i funktionen,
f�r d� reagerar v�rt script om ett inl�gg �r under 60 tecken
(f�r den som inte kan alltf�r mycket i matte s� betyder <
"�r mindre �n", = "�r lika med" och > "�r mer �n").
Observera att vi skriver exakt samma sak nu som f�rr, fast nu har vi med length (eng. l�ngd) efter value (plus att formul�rets namn har �ndrats fr�n fullname till lfgbcomment s� att scriptet tittar i r�tt f�lt), som ber�ttar att v�rdet vi vill ha �r l�ngdens v�rde, inte v�rdet som st�r i f�ltet. �ndrar vi > till < s� f�r antalet tecken i f�ltet lfgbcomment inte vara mindre �n 60 tecken.
En viktig sak att komma ih�g �r att trots att scriptet reagerar
s� kommer formul�ret att skickas iv�g, men f�r att hindra det s�
g�r vi s� att n�r man skickar iv�g formul�ret s� startar scriptet -
precis som vanligt - men om scriptet regerar s� avbryts processen,
och formul�ret skickas inte iv�g.
Ett exempel p� detta �r s� h�r (observera att det �r samma script som f�rut fast detta script avslutar allt om man har mindre �n 60 tecken i f�ltet lfgbcomment):
if (document.LiveFORM.lfgbcomment.value.length > 60)
{
alert("Ditt inl�gg f�r inte vara l�ngre �n 60 tecken, ditt inl�gg �r p� " + document.LiveFORM.lfgbcomment.value.length + " tecken");
return false;
}
Nu avslutas scriptet av return false; om man har �ver 60 tecken i
f�ltet lfgbcomment, om man inte har det s� kommer ju
allt mellan { och } ignoreras.
if ((document.LiveFORM.email.value.indexOf("@") == -1) ||
(document.LiveFORM.email.value == ""))
{
alert("En e-mail-adress �r t.ex. s� h�r:\n namn@bolag.com\n Var god och fyll i eran e-mail");
return false;
}
Att min "if-rad" nu �r p� 2 rader spelar ingen som helst roll,
jag skulle ha kunnat ha som jag brukar p� en l�ng rad,
men nu har jag valt att ha p� 2 rader (l�gg m�rke till
att "||" (Alt Gr + <) �ven finns h�r).
Min andra if-rad �r precis som du ser en vanlig rad d� scriptet reagerar om f�ltet �r helt tomt, medan den f�rsta if-raden slutar med .indexOf("@") == -1, vilket inneb�r att scriptet reagerar d� det INTE finns ett "@" (snabel-a) i f�ltet. Vill jag att scriptet ska reagera d� det finns ett "@" i f�ltet skriver jag ist�llet .indexOf("@") != -1. Som jag har skrivit nu i scriptet m�ste ett "@" finnas i email-f�ltet (vilket skulle kunna vara b�de ett TEXTAREA-f�lt och ett INPUT-f�lt (i mitt fall �r det ett INPUT-f�lt)).
Vad mer kan man g�ra?
if (document.formularets_namn.knappens_namn.checked)
{
}
else
{
alert("Du m�ste l�sa v�ra regler f�r att anv�nda detta formul�r.");
return false;
}
...Eller detta script (b�da g�r exakt samma sak):
if (!document.formularets_namn.knappens_namn.checked)
{
alert("Du m�ste l�sa v�ra regler f�r att anv�nda detta formul�r.");
return false;
}
Det som h�nder �r att om rutan �r ikryssad s� h�nder inget,
om den inte �r ikryssad s� kommer en alertruta fram.
Efter att alertrutan kommit fram s� aktiveras raden
return false;, vilket avslutar formul�ret s� att det inte
skickas iv�g, smart va? ;)
Innan detta kapitel slutar ska jag bara s�ga en viktig sak som annars
kanske st�ller till stora problem.
Jaha, nu var denna del avslutad, mer kommer i n�sta del. Copyright © Omid Rouhani 1997-2022; Alla r�ttigheter reserverade. Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ] |
