VisueltDesign Nybegynder
14. januar 2013 - 09:35 Der er 14 kommentarer

Valider form og opret svardokument

Hej eksperter

Jeg skal bruge et javascript der kan følgende:

En form bestående af eks. vis 3 tekstfelter + submit

Skal checke for at indholdet er korrekt udfyldt:
eks. vis "formfelt1" skal være udfyldt med ordet "ordnung", "formfelt2" skal være "muss" og "formfelt3" skal være "sein".

Efterfølgende skal html side genereres med tilbagesvar af antal rigtige samt points: Eks.: "Du havde "antal" formfelter rigtige - det giver dig "variabel 1-3" points.

(I dette tilfælde: 1 point for 1 rigtig, 2 points for 2 osv.)

På forhånd tak.
michael_stim Seniormester
14. januar 2013 - 13:20 #1
Her er en med popup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Pop Up Point</title>
    <script type="text/javascript">
    function popUp(){
        var point=0;
        if(document.getElementById('felt1').value.toLowerCase()=="ordnung"){
            point++;
        }
        if(document.getElementById('felt2').value.toLowerCase()=="muss"){
            point++;
        }
        if(document.getElementById('felt3').value.toLowerCase()=="sein"){
            point++;
        }
    alert('Du havde '+point+' formfelter rigtige - det giver dig '+point+' points.');
    }
    </script>
</head>
<body>
    <h1>Pop Up Point</h1>
    <form name="points" action="" method="POST">
    <input type="text" id="felt1" name="felt1">
    <input type="text" id="felt2" name="felt2">
    <input type="text" id="felt3" name="felt3">
    <input type="submit" name="send" id="sendBtn" value="Send" onclick="popUp()">
    </form>
   
</body>
</html>
VisueltDesign Nybegynder
14. januar 2013 - 13:31 #2
Hej Michael

Det er rigtig fint ;-) Jeg skal bruge en, der opretter helt nyt html dokument - er det til at tilpasse?
michael_stim Seniormester
14. januar 2013 - 14:17 #3
I stedet for alert, kan du bruge document.write og på den måde generere et htmldokument.
michael_stim Seniormester
14. januar 2013 - 14:24 #4
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Pop Up Point</title>
    <script type="text/javascript">
    function popUp(){
        var point=0;
        if(document.getElementById('felt1').value.toLowerCase()=="ordnung"){
            point++;
        }
        if(document.getElementById('felt2').value.toLowerCase()=="muss"){
            point++;
        }
        if(document.getElementById('felt3').value.toLowerCase()=="sein"){
            point++;
        }
    document.writeln("<!DOCTYPE html>");
    document.write ("<html><head><title>NEWDOCUMENT</title> </head><body><p>");   
    document.write('Du havde '+point+' formfelter rigtige - det giver dig '+point+' points.');
    document.write ("</p></body></html>");
    document.close();
    }
    </script>
</head>
<body>
    <h1>Pop Up Point</h1>
    <form name="points" action="" method="POST">
    <input type="text" id="felt1" name="felt1">
    <input type="text" id="felt2" name="felt2">
    <input type="text" id="felt3" name="felt3">
    <input type="submit" name="send" id="sendBtn" value="Send" onclick="popUp();">
    </form>
   
</body>
</html>
VisueltDesign Nybegynder
14. januar 2013 - 14:40 #5
Det var lige i øjet ;-)
olebole Nybegynder
14. januar 2013 - 17:33 #6
<ole>

- men husk, at brugeren selv bestemmer sit pointantal, da hun jo kan se svaret i kildekoden  *o)

/mvh
</bole>
VisueltDesign Nybegynder
18. januar 2013 - 15:22 #7
Meeeeeeen....

Hvorfor virker det ikke i Safari?
olebole Nybegynder
18. januar 2013 - 17:47 #8
#7: Forkert spørgsmål. Det korrekte spørgsmål lyder: "Hvorfor mon det virker i andre browsere end Safari og Chrome?"  =)

Scriptet giver ikke så meget mening, da submit af en form jo skal indebære et sideskift. Faktisk virker scriptet kun som forventet i Safari og Chrome.

I de to browsere overskrives dokumentet, hvorefter siden skiftes - helt som det bør ske. Hvorfor IE, Firefox og Opera så ikke gør, som de bør, kan jeg ikke svare på  =)
VisueltDesign Nybegynder
18. januar 2013 - 18:25 #9
#8: Har lavet masser af småting (med Javascript), hvor submit af en form kun resulterer i udregninger og lign. - og ikke nødvendigvis et sideskift... Det er muligt at opfinderne ikke havde de intentioner - men hvis det virker... ;-)

#4: Findes der alternativer til document.write - der åbenbart er noget hø, hvis man bruger Safari? (Jeg har Googlet det)
olebole Nybegynder
18. januar 2013 - 18:36 #10
"Har lavet masser af småting (med Javascript), hvor submit af en form kun resulterer i udregninger og lign. - og ikke nødvendigvis et sideskift"

Nej, ikke med mindre du har foretaget dig noget aktivt for ikke at få formen submittet.

document.write fungerer fint i Safari (og Chrome). Problemet med scriptet er som sagt ikke, at der ikke skrives noget ud - men at siden efterfølgende skiftes ... præcis som det bør forventes  =)

Er det en ren frontend ting, eller skal der også sendes data til en server? Hvis koden kun skal afvikles i browseren, skal der ikke være noget FORM element. Så vil scriptet give mening i IE, Firefox og Opera - og det vil også virke i Safari og Chrome
VisueltDesign Nybegynder
18. januar 2013 - 18:53 #11
#10 Se eks. vis BMI beregneren i diabetes2.dk

Er det ikke en form?

Men yes. det er en ren frontend-ting. Scriptet skal kunne afvikles off-line i browseren.
olebole Nybegynder
18. januar 2013 - 18:59 #12
Jo, det er en FORM, men den har jo ingen submitknap, hvorfor den aldrig submittes. Altså er der gjort noget aktivt for, at formen ikke skal submittes  =)

Men hvorfor overhovedet bruge et totalt overflødigt element? Når der ikke skal submittes data, giver et FORM element ikke mening ... der er intet at bruge det til  =)
VisueltDesign Nybegynder
18. januar 2013 - 19:10 #13
#12 Forstået. Men hvad gør man så, når man gerne vil have 3 indtastningsfelter, der skal valideres ift. indhold og en ny side dannes med resultatet - og det skal kunne bruges off-line?
olebole Nybegynder
18. januar 2013 - 19:24 #14
Slet FORM-elementet - det bruges ikke til noget
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

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





Computerworld
Kritikken tager til: Windows 10 fryser og hakker efter stor opdatering
Microsofts store Windows 10-opdatering skaber alvorlige problemer på en række maskiner, der fryser og hakker. Kritikken fra brugerne tager til.
CIO
It-sikkerhed skal tænkes helt om: Det forkromede overblik er en mangelvare
Klumme: It-sikkerhed og bekæmpelse af cybercrime er kommet øverst på to-do-listen på direktionsgangene. Men hvis virksomhederne for alvor skal forstærke det digitale forsvarsværk, skal sikkerhedsbranchen se anderledes på it-løsningerne.
Channelworld
Dansk hosting-direktør: På disse tre områder banker danske hosting-firmaer Microsoft og Amazon af banen
Den danske hostingbranche er godt polstret til at modstå konkurrencen fra globale cloud-spillere som Amazon og Microsoft. Her er tre grunde til, at danske hostingudbydere ikke blæser omkuld i konkurrencen.
White paper
Mobility - her er de aktuelle udfordringer
Hvad med sikkerheden? Mobility-bølgen fejer igennem danske virksomheder, og der er masser af muligheder og faldgruber. Sikkerheden halter, men det kan der gøres noget ved. Produceret af Computerworld.dk i oktober 2014.