Avatar billede dk-morten Nybegynder
06. september 2007 - 12:39 Der er 4 kommentarer og
1 løsning

Wizzard i javascript

Hej alle eksperter.

Jeg er ved at lave en simple wizzard i javascript, men jeg kan ikk helt lige komme videre.
Planen er at alt skal forgå på 1 side (altså samme side).
Jeg skal have gjort sådan at der er 4 HTML text boxe (har jeg lavet) hvor der så står Navn, EfterNavn o.s.v
også skal der så være en "Næste" knap allernederst (neden under de 4 boxe) og der skal den så gå videre til næste formular (IKKE NÆSTE SIDE)og der skal så være 4 boxe mere bare med (Uddannelse, skole o.s.v) og til sidst en 3 side hvor der så står alle oplysningerne som man har angivet. Vil gerne prøve at lave noget validation på alle boksene men kan jeg ikke lige helt finde ud af, fik det sådan halvt til at virke, men opgav det. Har dette stykke kode indtil videre:



    <script type="text/javascript">
   
    //Javascript side1
    var Navn,EfterNavn,Alder,Postnr,By;
   
   
    function side1()
    {
        Navn = document.getElementById("txtName").value;
        Efternavn = document.getElementById("txtEfternavn").value;
        Alder = document.getElementById("txtAlder").value;
        Postnr = document.getElementById("txtPostnr").value;
        By = document.getElementById("txtBy").value;
    }
   
   
        //Javascript Side2
        var Uddannelse,Skole,Kæreste
       
        function side2()
    {
        Uddannelse = document.getElementById("txtUddannelse").value;
        Skole = document.getElementById("txtSkole").value;
        Kæreste = document.getElementById("txtKæreste").value;
        køn = document.getElementById("txtKøn").value;
    }
   
   
    //Javascript side 3
        function side3()
    {
       
    }
   
    </script>
   
   
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
      <%--Side1--%>
     
        <strong>Personlige Oplysninger</strong><br />
        <br />
        <br />
        <table id="Table1">
            <tr>
                <td style="width: 100px; height: 26px;">
        Navn:</td>
                <td style="width: 200px; height: 26px;">
   
   
   
                    <input id="txtNavn" type="text" /></td>
            </tr>
            <tr>
            <td style="width: 100px">
                    Efternavn:</td>
            <td style="width: 200px">
                    <input id="txtEfternavn" type="text" /></td>
            </tr>
            <tr>
            <td style="width: 100px">
                    Alder:</td>
            <td style="width: 200px">
                    <input id="txtAlder" type="text" /></td>
            </tr>
            <tr>
            <td style="width: 100px">
                    Postnr/By:</td>
            <td style="width: 200px">
                    <input id="txtPostnr" type="text" style="width: 41px" />
                    -
                    <input id="txtBy" style="width: 129px" type="text" /></td>
            </tr>
        </table>
                    <br />
                    <input id="Submit1" type="submit" value="Næste" /><br />
                      <br />
                    --------<br />
                    <br />
                    <div>
                   
                    <%--Side2--%>
                   
                    <strong>Andre Oplysninger<br />
                    </strong>
                    <br />
        <table id="Table2">
            <tr>
            <td style="width: 100px">
                    Uddannelse:&nbsp;</td>
            <td style="width: 173px">
                    <input id="txtUddannelse" type="text" /></td>
            </tr>
            <tr>
            <td style="width: 100px">
                    Skole:&nbsp;</td>
            <td style="width: 173px">
                    <input id="txtSkole" type="text" /></td>
            </tr>
            <tr>
            <td style="width: 100px">
                    Kæreste?</td>
            <td style="width: 173px">
                <input id="txtKæreste" type="text" /></td>
            </tr>
            <tr>
            <td style="width: 100px">
                    Køn:</td>
            <td style="width: 173px">
                <input id="txtKøn" type="text" /></td>
            </tr>
        </table>
        <br />
        <input id="Submit3" type="submit" value="Næste" /><br />
        <br />
        --------<br />
        <br />
       
        </div>
        <div>
       
        <%--Side3--%>
       
        <strong>Oversigt/Godkendelse</strong><br />
        </div>
    </div>


Håber der er nogen der kan hjælpe mig!
På forhånd tak!
Morten
Avatar billede dk-morten Nybegynder
10. september 2007 - 21:58 #1
..
Avatar billede jhe-ting Nybegynder
10. september 2007 - 23:29 #2
Jeg sad lige med noget kode til dig, men ... hm -
Avatar billede dk-morten Nybegynder
12. september 2007 - 16:22 #3
Har fået det fixet. Men vil da gerne se din kode og hvis den er brugbar skal du self have points for det :)
Avatar billede jhe-ting Nybegynder
12. september 2007 - 19:24 #4
Jeg blev ikke helt færdig, men denne arbejdsmodel skal bare udbygges med check på resten af input-felterne.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
<title>Ekselpel til spm/795114</title>
<script type="text/javascript"><!--
    function gEl(strId){return document.getElementById(strId)}
    function crTx(strText){return document.createTextNode(strText)}
    function crEl(strTag){return document.createElement(strTag)}
    window.onload = function(){
        h1Title = gEl("h1Title");
        h1Title.appendChild(crTx(document.title));
    }
    function isBlank(strVal){
        return typeof strVal != "undefined" && strVal === "";
    }
    function isInt(x) {
        var y=parseInt(x);
        return !isNaN(y) && x==y && x.toString()==y.toString();
    }

  //Javascript side1
    var Navn,Efternavn,Alder,Postnr,By;
 
    function sideCheck1(){
        Navn = gEl("txtNavn");
        Efternavn = gEl("txtEfternavn");
        Alder = gEl("txtAlder");
        Postnr = gEl("txtPostnr");
        By = gEl("txtBy");
        if (isBlank(Navn.value)) {
            showPage(1);
            Navn.focus();
            alert("Navn skal udfyldes")
            return false;
        }
        /* Check for Efternavn her... */
        if (!isInt(Alder.value)){
            showPage(1);
            Alder.focus();
            alert("Alder skal udfyldes med tal.\nIndtastet værdi: '"+Alder.value+"'");
            return false
        }
        /* Check for Postnr og By her... */
        return true;
    }
    //Javascript Side2
    var Uddannelse,Skole,Kaereste, koen;
     
    function sideCheck2(){
        Uddannelse = gEl("txtUddannelse");
        Skole = gEl("txtSkole");
        Kaereste = gEl("txtKaereste");
        koen = gEl("txtKoen");
        if (isBlank(Uddannelse.value)){
            showPage(2);
            Uddannelse.focus();
            alert("Uddannelse skal udfyldes")
            return false;
        }
        return true;
    }
 
    //Javascript side 3
    function sideCheck3(){
        return true;
    }
   
    function showAllFields(){
        var dst = gEl("allFieldsList");
        while (dst.lastChild) dst.removeChild(dst.lastChild);
        var form = gEl("form1");
        var elmList = form.elements;
        var reportText = "Indtastede oplysninger\n";
        var tbl = crEl("table");
        tbl.setAttribute("border","1");
        var tblHead = tbl.createTHead();
        tblHead.setAttribute("bgcolor","#EEEEEE")
        var row = tblHead.insertRow(-1);
        var cell = row.insertCell(-1);
        cell.appendChild(crTx("Feltnavn"));
        cell = row.insertCell(-1);
        cell.appendChild(crTx("Feltindhold"));
        var tblBody = crEl("tbody");
        tbl.appendChild(tblBody);
        for (ii = 0, nn=elmList.length; ii<nn; ii++){
            var fld = elmList[ii];
            if (fld.type == "button" || fld.type == "submit" ) continue;
            row = tblBody.insertRow(-1);
            cell = row.insertCell(-1);
            cell.appendChild(crTx(fld.name));
            cell = row.insertCell(-1);
            cell.appendChild(crTx(fld.value));
        }
        dst.appendChild(tbl);
    }
   
    var maxPage = 3;
    var currentPage = 1;
   
    function showPage(pageNumber){
        if (
            currentPage == pageNumber
          || 
            pageNumber>currentPage
          &&
            ! window["sideCheck"+currentPage]()
        ) return;
        if (pageNumber == maxPage){ showAllFields();}
        for (var ii=1; ii<=maxPage; ii++){
            var objDiv = gEl("Side"+ii);
            if (ii==pageNumber) objDiv.style.display="block"
            else objDiv.style.display="none";
        }
        currentPage = pageNumber;
    }
   
    function validateForm1(){
//        return false;
        return (sideCheck1() && sideCheck2() && sideCheck3());
    }
//--></script>
</head>
<body>
<h1 id="h1Title">&nbsp;</h1>
  <form id="form1" action="xxx.htm" method="get" onsubmit="return validateForm1();">
      <div id="Side1" style="display:block">
   
        <strong>Personlige Oplysninger</strong>
        <br>
        <br>
        <br>
        <table id="Table1">
            <tr>
                <td style="width: 100px; height: 26px;">Navn:</td>
                <td style="width: 200px; height: 26px;">
                <input id="txtNavn" name="txtNavn" type="text"></td>
            </tr>
            <tr>
                <td style="width: 100px">Efternavn:</td>
                <td style="width: 200px">
                <input id="txtEfternavn" name="txtEfternavn" type="text"></td>
            </tr>
            <tr>
                <td style="width: 100px">Alder:</td>
                <td style="width: 200px">
                    <input id="txtAlder" name="txtAlder" type="text" /></td>
            </tr>
            <tr>
            <td style="width: 100px">
                    Postnr/By:</td>
            <td style="width: 200px">
                    <input id="txtPostnr" name="txtPostnr" type="text" style="width: 41px">
                    -
                    <input id="txtBy" name="txtBy" style="width: 129px" type="text"></td>
            </tr>
        </table>
        <br />
        <input id="btnNext1" type="button" value="Næste &gt;&gt;" onclick="showPage(2)"><br>
      </div>
      <div id="Side2" style="display:none">
        <strong>Andre Oplysninger<br>
        </strong>
        <br />
        <table id="Table2">
            <tr>
            <td style="width: 100px">
                    Uddannelse:&nbsp;</td>
            <td style="width: 173px">
                    <input id="txtUddannelse" name="txtUddannelse" type="text" /></td>
            </tr>
            <tr>
            <td style="width: 100px">
                    Skole:&nbsp;</td>
            <td style="width: 173px">
                    <input id="txtSkole" name="txtSkole" type="text" /></td>
            </tr>
            <tr>
            <td style="width: 100px">
                    Kæreste?</td>
            <td style="width: 173px">
                <input id="txtKaereste" name="txtKaereste" type="text" /></td>
            </tr>
            <tr>
            <td style="width: 100px">
                    Køn:</td>
            <td style="width: 173px">
                <input id="txtKoen" name="txtKoen" type="text" /></td>
            </tr>
        </table>
        <br />
        <input id="btnBack1" type="button" value="&lt;&lt; Tilbage" onclick="showPage(1)"><br>
        <input id="btnNext2" type="button" value="Næste &gt;&gt;" onclick="showPage(3)"><br>
      </div>
      <div id="Side3" style="display:none">
            <strong>Oversigt/Godkendelse</strong><br>
            <p>Indtastede oplysninger</p>
            <p><div id="allFieldsList"></div>
            <p></p>
            <input id="btnBack2" type="button" value="&lt;&lt; Tilbage" onclick="showPage(2)">
            <input id="btnNext3" type="submit" value="Send &gt;&gt;"><br />
      </div>
  </form>
</body>
</html>
Avatar billede jhe-ting Nybegynder
15. september 2007 - 22:12 #5
Håber du kunne bruge det til noget.
Hvis du vil give point, kan du oprette et nyt sp. og lægge et link her.
Avatar billede 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. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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