CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede dennisbjorn Juniormester
11. januar 2012 - 21:10 Der er 11 kommentarer og
1 løsning

Dynamisk tilføjelse af input felter i form

Til en simpel form med kun et input felt, søger jeg en funktion, hvor brugerne kan tilføje x antal input felter efter behov.
Dvs. at funktionen skal tilføje en ny række med et ekstra input felt hver gang den kaldes.

Når formen submittes, må de indtastede data fra x antal input felter gerne postes som en kommasepareret streng.
Avatar billede olebole Juniormester
11. januar 2012 - 22:22 #1
<ole>

Det er ikke helt så enkelt, da IE før version 9 havde en meget sær måde at forholde sig til denne del af DOM specifikationen på.

Du kan skrive denne funktion:

var createElm = (function(doc){
    try {
        var o = doc.createElement("<input type='text'>");
        createStd = o = null;
        return createIE;
    }
    catch(e) {
        createIE = null;
        return createStd;
    }
    function createIE(sTag, oOpts) {
        var a = [], i = 0;
        for (x in oOpts) {
            if (x=="css") a[i++] = 'style="'+oOpts[x]+'"';
            else a[i++] = x+'="'+oOpts[x]+'"';
        }
        return doc.createElement("<"+sTag+(a.length>0?" "+a.join(" "):"")+">"+("input,link,img,area,".indexOf(sTag+",")?"":"</"+sTag+">"));
    }
    function createStd(sTag, oOpts) {
        var x, elm = doc.createElement(sTag);
        for (x in oOpts) {
            if (x=="css") elm.style.cssText = oOpts[x];
            if (x=="class") elm.className = oOpts[x];
            else elm.setAttribute(x, oOpts[x]);
        }
        return elm;
    }
})(document);

Så vil du kunne oprette et INPUT element og indsætte det i elementet med id="fooBar" med følgende kode:

var oOpts = {
    "type": "text",
    "name": "fornavn",
    "value": "Skriv dit navn",
    "class": "my-input-class",
    "css": "width:200px;background:#ff0"
};
var elm = createElm("input" oOpts);
document.getElementById("fooBar").appendChild(elm);


/mvh
</bole>
Avatar billede olebole Juniormester
11. januar 2012 - 22:24 #2
Der vil ikke være forskel på disse elementer og alle andre formelementer på siden. De vil alle blive postet på helt sædvanligvis og kan derfor på serveren findes ved hjælp af de name attributter, du har oprettet felterne med
Avatar billede dennisbjorn Juniormester
12. januar 2012 - 07:50 #3
Hej Ole - tak for dit script.
Jeg har ikke styr på hvordan jeg skal kalde funktionen - vil du hjælpe med at lave det færdig?


<html>
<head>

<script type="text/javascript">


var createElm = (function(doc){
    try {
        var o = doc.createElement("<input type='text'>");
        createStd = o = null;
        return createIE;
    }
    catch(e) {
        createIE = null;
        return createStd;
    }
    function createIE(sTag, oOpts) {
        var a = [], i = 0;
        for (x in oOpts) {
            if (x=="css") a[i++] = 'style="'+oOpts[x]+'"';
            else a[i++] = x+'="'+oOpts[x]+'"';
        }
        return doc.createElement("<"+sTag+(a.length>0?" "+a.join(" "):"")+">"+("input,link,img,area,".indexOf(sTag+",")?"":"</"+sTag+">"));
    }
    function createStd(sTag, oOpts) {
        var x, elm = doc.createElement(sTag);
        for (x in oOpts) {
            if (x=="css") elm.style.cssText = oOpts[x];
            if (x=="class") elm.className = oOpts[x];
            else elm.setAttribute(x, oOpts[x]);
        }
        return elm;
    }
})(document);



var oOpts = {
    "type": "text",
    "name": "fornavn",
    "value": "Skriv dit navn",
    "class": "my-input-class",
    "css": "width:200px;background:#ff0"
};
var elm = createElm("input" oOpts);
document.getElementById("fooBar").appendChild(elm);


</script>
 
</head>
<body>

<form name="brugerform" method="post" action="resultat.asp">
<div id="fooBar">
  <input type="text" name="nc">
</div>
<input type="button" onClick="doc();" value="tilføj felt">
<input type="submit" value="submit">
</form>

</body>
</html>
Avatar billede olebole Juniormester
12. januar 2012 - 15:50 #4
function doc() {
    var oOpts = {
        "type": "text",
        "name": "fornavn",
        "value": "Skriv dit navn",
        "class": "my-input-class",
        "css": "width:200px;background:#ff0"
    };
    var elm = createElm("input" oOpts);
    document.getElementById("fooBar").appendChild(elm);
}
Avatar billede dennisbjorn Juniormester
12. januar 2012 - 16:29 #5
kan desværre ikke få det til at virke...
Avatar billede olebole Juniormester
12. januar 2012 - 16:59 #6
Hvad sker der - og hvad sker der ikke? Udløses der JS-fejl? Tjekker du overhovedet for JS-fejl? At det ikke virker, er ikke en melding, der kan bruges til meget  =)

Nu har jeg selv testet og fundet ud af, at scriptet udløser en JS-fejl. Det er du nødt til altid at tjekke for, når du webudvikler. Der manglede et komma:

function doc() {
    var oOpts = {
        "type": "text",
        "name": "fornavn",
        "value": "Skriv dit navn",
        "class": "my-input-class",
        "css": "width:200px;background:#ff0"
    };
    var elm = createElm("input", oOpts); // <-- Her
    document.getElementById("fooBar").appendChild(elm);
}
Avatar billede dennisbjorn Juniormester
12. januar 2012 - 19:16 #7
Hej,

Jeg er ikke erfaren med JavaScript - så tak for tippet - jeg har nu aktiveret scriptfejl i min browser (IE9).

Har rettet kommafejlen, men der sker intet når man klikker på knappen 'tilføj felt'.

Får denne script-fejl:

Værdien af egenskaben 'appendChild' kan ikke hentes: Objektet er null eller er ikke defineret
Linje: 46
Tegn: 1
Kode: 0
Avatar billede olebole Juniormester
12. januar 2012 - 20:13 #8
<script type="text/javascript">
var createElm = (function(doc){
    try {
        var o = doc.createElement("<input type='text'>");
        createStd = o = null;
        return createIE;
    }
    catch(e) {
        createIE = null;
        return createStd;
    }
    function createIE(sTag, oOpts) {
        var a = [], i = 0;
        for (x in oOpts) {
            if (x=="css") a[i++] = 'style="'+oOpts[x]+'"';
            else a[i++] = x+'="'+oOpts[x]+'"';
        }
        return doc.createElement("<"+sTag+(a.length>0?" "+a.join(" "):"")+">"+("input,link,img,area,".indexOf(sTag+",")?"":"</"+sTag+">"));
    }
    function createStd(sTag, oOpts) {
        var x, elm = doc.createElement(sTag);
        for (x in oOpts) {
            if (x=="css") elm.style.cssText = oOpts[x];
            if (x=="class") elm.className = oOpts[x];
            else elm.setAttribute(x, oOpts[x]);
        }
        return elm;
    }
})(document);

function doc() {
    var oOpts = {
        "type": "text",
        "name": "fornavn",
        "value": "Skriv dit navn",
        "class": "my-input-class",
        "css": "width:200px;background:#ff0"
    };
    var elm = createElm("input", oOpts);
    document.getElementById("fooBar").appendChild(elm);
}
</script>

<form name="brugerform" method="post" action="resultat.asp">
<div id="fooBar">
  <input type="text" name="nc">
</div>
<div>
  <input type="button" onClick="doc();" value="tilføj felt">
  <input type="submit" value="submit">
</div>
</form>
Avatar billede dennisbjorn Juniormester
12. januar 2012 - 20:28 #9
Super - mange tak!

Smid et svar for point.
Avatar billede dennisbjorn Juniormester
12. januar 2012 - 20:50 #10
En detalje; kan jeg indsætte et linebreat et sted, således at inputfelter kommer under hinanden og ikke på en linie?

Ellers er det helt perfekt..:-)
Avatar billede olebole Juniormester
12. januar 2012 - 22:48 #11
Du kunne jo lægge elementerne ind i et DIV:

function doc() {
    var oOpts = {
        "type": "text",
        "name": "fornavn",
        "value": "Skriv dit navn",
        "class": "my-input-class",
        "css": "width:200px;background:#ff0"
    };
    var elm = createElm("div");
    var elm2 = createElm("input", oOpts);
    elm.appendChild(elm2);
    document.getElementById("fooBar").appendChild(elm);
}

Jeg samler ikke point. Læg selv et svar og accepter det, så tråden lukkes. Men tak for tilbudet  =)
Avatar billede dennisbjorn Juniormester
13. januar 2012 - 07:15 #12
smukt - mange tak for hjælpen :-))
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Returner ikke alt Af ingeman i JavaScript 13 26/06/202414:40 01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript 4 24/06/202422:50 26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript 6 04/06/202416:23 05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript 4 21/05/202417:19 22/06/202422:07
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 14:53 OBS Studio - digital fnidder ved analog overspilning Af mikedk2100 i Andet software
04/1022:23 Dvd-film Af lottefie i PC
04/1020:49 Hjælp til nyt netværkskort Af m23226 i PC
04/1018:21 Jeg skal have ny skærm og kunne godt bruge imput fra andre. Af Peter Højer Barker i Skærme
04/1012:51 Hitachi model Axm709e musik anlæg vil ikke afspille cd med lyd Af made18 i Musik & videoafspillere
White papers
Flere white papers »


Premium
Teaser billede
Her blev Silicon Valley født: Kom med ind i den lille garage i en baghave i San Francisco, hvor det hele tog sin begyndelse
Læs mere »
Ambitiøst udspil fra telebranchen: Danmarks digitale infrastruktur trænger til et kæmpe løft og noget politisk kærlighed
Rejsekort ændrer i planerne: Fremover skal du kunne tjekke ind og ud med NFC og betalingskort
MitID misser krav om oppetid i næsten hver anden måned
Se alle »
Computerworld
Teaser billede
Test: iPhone 16 Pro Max er den bedste iPhone til dato - men du bør spare de næsten 12.000 kroner, som den koster
Læs mere »
Nu kan du få fingrene i den nyeste version af Windows: Sådan gør du
Tesla har med vilje gjort ladetiden dårligere med software-opdatering - skal nu betale erstatning til Tesla-ejere
Kvinde bortvist: Kaldte sin arbejdsgiver for inkompetent, doven, nasser og tyveknægt i lukket gruppe på Facebook
Se alle »
CIO
Teaser billede
Windows-opdatering kan få din pc til at crashe helt: Men du kan nemt løse problemet
Læs mere »
Vi er nået til et sted, hvor alle generalister får baghjul og ikke længere kan være med
Advarsel til brugere af Copilot: En kompromittering af en enkelt medarbejder kan koste dyrt, hvis ikke du passer på
IBM og Oracle vinder kæmpe ERP-aftale: Skal servicere 280.000 brugere
Se alle »
Job & Karriere
Teaser billede
Pludselig exit fra Schultz kom som en overraskelse for Merete Søby: Derfor stoppede samarbejdet
Læs mere »
Merete Søby fratræder med omgående virkning som CEO for Schultz efter blot tre måneder på posten
Professor: "Det er på høje tid at opløse virksomhedernes it-afdelinger"
Kom tæt på Danmarks nye digitaliserings-minister: 33-årige Caroline Stage Olsen er tidligere tobaks-lobbyist - har været aktiv i politik siden hun var helt ung
Se alle »
White paper
Teaser billede
Sådan får du overblik og beskytter dine cloudapplikationer
Læs mere »
Rapport kortlægger de 13 bedste muligheder for at sætte turbo på din cloud computing
Informationshåndtering på frontlinjen: Sådan optimerer du med automatisering
MDR: Transparent sikkerhed og overvågning i realtid
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »