Kurs 14: Lär dig språket JavaScript - Javascript + formulär = censur

JavaScript.nu / JavaScript-kurs / Formulär med JavaScript och indexOf()

LÄR DIG SPRÅKET JAVASCRIPT
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="http://" 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.
Det gör vi genom att sätta in onSubmit="return funktionens_namn()" i FORM-taggen (detta är ju en motsvarighet till OnMouseOver, OnMouseOut etc. fast detta reagerar då man "submitar" ett formulär).
Resultatet blir då:
<form method="post" onSubmit="return funktionens_namn()" name="LiveFORM" action="http://din_planet.guestworld.com/wgb/wgb.dbm?owner=din_gästboks_namn">

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).
Om du vill starta en helt vanlig funktion när man "submitar" formuläret så skriver du bara onSubmit="funktionens_namn()".

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.
Document säger att det är i vårat document (.shtml(l)-dokument) som saken ska hända i.
LiveFORM säger att formuläret som avses heter liveFORM (det står i FORM-taggen).
Fullname säger att namnet på fältet, knappen eller vad vi nu avser (i vårt fall ett vanligt INPUT-fält) heter fullname.
Value säger till webbläsaren att vi menar värdet (= det som står i fältet).

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.
Detta gör du genom att skriva return false; så avslutas scriptet. Orsaken till att det inte skickas är att det i "onSubmit" stod "return" och därefter funktionens namn. När man har med return xxx (xxx = false i vårt fall) i scriptet så kommer xxx att "returneras" (= false returneras) så att det står onSubmit="return false". För att formulärets ska skickas så får det inte vara "false", det måste vara "true". Att det ska vara true behöver du inte tänka på, det blir true om annat inte anges.

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.

Ett av de mest använda funktionerna är när man skriver:

        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?
Jo, man kan t.ex. kontrollera att folk inte kryssar i (eller kanske måste kryssa i) rutor. Om du t.ex. har ett formulär där det står "Om du har läst våra regler, kryssa i här." och sedan det finns en knapp som man kan kryssa i då kan du använda detta script:

        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? ;)

Ja, så lätt var det att kontrollera sina gästböcker, chatrum, e-mail-formulär eller vad man nu kan tänka sig ha formulär till. Som du vet kan du ju blanda in flera saker så att man t.ex. inte kan skriva in sig med ett speciellt namn etc. Men för att få det helt säkert måste du använda cgi, vilket vi inte ska gå igenom.

Innan detta kapitel slutar ska jag bara säga en viktig sak som annars kanske ställer till stora problem.
När du ska ändra ett värde i ett fält genom att ett JavaScript sätter in ett värde automatiskt ska du tänka på att formuläret måste vara placerad högre upp på sidan än scriptet, annars kommer scriptet visa ett felmeddelande och säga att det fältet (som du ska ändra värde på) inte finns (detta gäller bara om värdet ska ändras automatiskt, inte genom en funktion som ska startas av besökaren).
Detta beror logiskt på att om scriptet skrivs ut före formuläret på sidan så finns ju inte forumläret då scriptet aktiveras, och därför får man ett meddelande om att formuläret inte finns.

Jaha, nu var denna del avslutad, mer kommer i nästa del.

LÄR DIG SPRÅKET JAVASCRIPT Formulär med JavaScript och indexOf()

LÄR DIG SPRÅKET JAVASCRIPT
Formulär med JavaScript och indexOf()