Notifikationer

Markér alle som læst Log ud

jumario Nybegynder

30. maj 2003 - 10:57 Der er 35 kommentarer og
2 løsninger

Opdeling af formular i flere "sider"

Jeg har en lang række spørgsmål med tilhørende svar i en lang formular. er det muligt via JavaScript at dele formen op i små bider så den kun viser 1 spørgsmål (med svar) ad gangen, og så der er en forrige og næste knap?

Synes godt om

Slettet bruger

30. maj 2003 - 10:59 #1

Ja, hvis du fx bruger en skjult frame til at huske svarene i.
Men koden skal skræddersys, så du må komme med flere oplysninger.

Synes godt om

horsmark Nybegynder

30. maj 2003 - 11:02 #2

jeg bruger følgende

<div name="spm_gruppe_01" style="display:none">
<input type="text">
<input type="text">
<input type="text">
</div>

<div name="spm_gruppe_02" style="display:none">
<input type="text">
<input type="text">
<input type="text">
</div>

Brugeren ser altså kun en gruppe ad gangen og du skal så ved "udfyldt" sætte display:block; efterhånden

:-)

Synes godt om

googolplex Novice

30. maj 2003 - 11:02 #3

Skal det laves i javascript ?

Synes godt om

horsmark Nybegynder

30. maj 2003 - 11:03 #4

check evt. privat.tdc.dk/loesninger/duet/bestil

Synes godt om

roenving Novice

30. maj 2003 - 11:07 #5

>>googolplex

-- havde du tænkt dig at en serverdatabase skulle opdatere en hel side for hver gang en bruger havde haft fat i eet spm ?-)

Synes godt om

jumario Nybegynder

30. maj 2003 - 11:09 #6

googolplex: nej ik nødvændigvis javascript, men bare noget hvor formen kun skal submittes til php'en Én gang.

horsmark: Det ser meget interesant ud det der første eksempel du har skrevet. Kunne du komme med lidt flere detaljer om hvordan det skal opbygges?

Synes godt om

roenving Novice

30. maj 2003 - 11:10 #7

-- horsmarks løsning kan endda laves endnu frækkere med en kombination af divs og spans, da man så kan placere evt. irrelevante spørgsmål (checkboxe, radios mv.) i en span som bare forsvinder, hvilket er virkningen af display:none

Synes godt om

googolplex Novice

30. maj 2003 - 11:11 #8

Havde kun set spørgsmålet da jeg sendte :) Nu er det jo lidt bøvlet at lave det i andet...

Synes godt om

jumario Nybegynder

30. maj 2003 - 11:13 #9

alle spørgsmål vil enten bestå af radio buttons eller checkboxe, alt efter om der er 1 eller flere svarmuligheder. hvordan kan "forrige" og "næste" knapperne laves bedst?

Synes godt om

roenving Novice

30. maj 2003 - 11:16 #10

Der er mange muligheder ... se f.eks. http://www.eksperten.dk/spm/358748
hvor to bokse skifter plads ...

-- horsmarks skal bare tilføjes nogle buttons som viser næste/forrige sektion og skjuler denne !-)

Synes godt om

jumario Nybegynder

30. maj 2003 - 11:17 #11

roen: da jeg er helt blank indenfor denne kategori ville jeg sætte stor pris på et eksempel på hvordan knapperne skal laves så når man trykker så vises der en ny divgruppe og skjules den forrige

Synes godt om

jumario Nybegynder

30. maj 2003 - 11:19 #12

ok var lidt for hurtig der kan se der muligivs er noget i det link du skrev. kigger lige på det

Synes godt om

horsmark Nybegynder

30. maj 2003 - 11:22 #13

<html>
<head>
<script language="javascript">
function checkform(){
if(minform.inp_01.value != ""){
document.getElementById('spm_gruppe_01').style.display = 'block'
} else {
document.getElementById('spm_gruppe_01').style.display = 'none'
}
}
</script>
</head>
<body>
<form name="minform">
<input name="inp_01" type="text" onchange="checkform(this);">

<div id="spm_gruppe_01" style="display:none;">
<input name="inp_02" type="text">
<input name="inp_03" type="text">
<input name="inp_04" type="text">
</div>

</form>
</body>
</html>

Synes godt om

roenving Novice

30. maj 2003 - 11:25 #14

Der er brugt en checkbox, med knapper (som jeg nok ville tænke på her), skulle man:

<div id="spm_gruppe_01" style="display:none">
<button onclick="document.getElementById
('spm_gruppe_01').style.display='none';document.getElementById('spm_gruppe_00').style.display='block';>Forrige</button>
<input type="text">
<input type="text">
<input type="text">
<button onclick="document.getElementById('spm_gruppe_01').style.display='none';document.getElementById('spm_gruppe_02').style.display='block';>Næste</button>
</div>

<div id="spm_gruppe_02" style="display:none">
<button onclick="document.getElementById
('spm_gruppe_02').style.display='none';document.getElementById('spm_gruppe_01').style.display='block';>Forrige</button>
<input type="text">
<input type="text">
<input type="text">
<button onclick="document.getElementById('spm_gruppe_02').style.display='none';document.getElementById('spm_gruppe_03').style.display='block';>Næste</button>
</div>

... osv.

Synes godt om

jumario Nybegynder

30. maj 2003 - 11:27 #15

horsmark der mangler lige "forrige" og "næste" knappen

for lige at opsumere det hele her:
formen består af et spørgsmål som overskrift, og nogen checkboxe/radiobuttons som svarmuligheder.
der skal ikke ændres noget når der trykkes i radio/checkboxene, men når der trykkes på "forrige" eller "næste" knapperne skal det nuværende spørgsmål m. svar skjules og det næste/forrige skal vises.

Synes godt om

jumario Nybegynder

30. maj 2003 - 11:31 #16

roen: det lignede noget jeg kunne bruge det sidste. men på http://juma.juma.dk/rod/skjul4.php hvor jeg har pastet koden ind ser der ikke noget. er jeg helt galt på den siden den ik viser noget? hva mangler der?

Synes godt om

roenving Novice

30. maj 2003 - 11:35 #17

Du skal starte med at sætte een af dem til display:block, f.eks den første:

<div id="spm_gruppe_01" style="display:block">

Synes godt om

roenving Novice

30. maj 2003 - 11:36 #18

-- og så kan du selvfølgelig kun skifte frem og tilbage mellem de to ...

Synes godt om

jumario Nybegynder

30. maj 2003 - 11:42 #19

ok der er vidst et eller andet galt som det ser ud nu :P

Synes godt om

roenving Novice

30. maj 2003 - 11:47 #20

Uff, ja:

<div id="spm_gruppe_01" style="display:block;">
<button onclick="document.getElementById
('spm_gruppe_01').style.display='none';document.getElementById('spm_gruppe_00').style.display='block';">Forrige</button>
<input type="text">
<input type="text">
<input type="text">
<button onclick="document.getElementById('spm_gruppe_01').style.display='none';document.getElementById('spm_gruppe_02').style.display='block';">Næste</button>
</div>

<div id="spm_gruppe_02" style="display:none">
<button onclick="document.getElementById
('spm_gruppe_02').style.display='none';document.getElementById('spm_gruppe_01').style.display='block';">Forrige</button>
<input type="text">
<input type="text">
<input type="text">
<button onclick="document.getElementById('spm_gruppe_02').style.display='none';document.getElementById('spm_gruppe_03').style.display='block';">Næste</button>
</div>

-- der manglede et par ""

Synes godt om

roenving Novice

30. maj 2003 - 11:50 #21

Og så en text ind, som kan fortælle, at vi skifter:-)

<p>Gruppe 1</p>
<input type="text">
.
.
.
<p>Gruppe 2</p>

Synes godt om

horsmark Nybegynder

30. maj 2003 - 12:15 #22

Jeg skal selv bruge denne funktion i nær fremtid så her er en der virker dynamisk uanset hvor mange grupper (divs) der bliver sat på

<html>
<head>
<script language="javascript">
var myGroup = 0;
function switchDiv(action){
if(action == "next"){
var checkDiv = 'spm_gruppe_'+(myGroup+1)
if(document.getElementById(checkDiv)){
document.getElementById(checkDiv).style.display = 'block'
document.getElementById('spm_gruppe_'+myGroup).style.display = 'none'
myGroup = myGroup + 1
}
}
if(action == "back"){
var checkDiv = 'spm_gruppe_'+(myGroup-1)
if(document.getElementById(checkDiv)){
document.getElementById(checkDiv).style.display = 'block'
document.getElementById('spm_gruppe_'+myGroup).style.display = 'none'
myGroup = myGroup - 1
}
}
}
</script>
</head>
<body>
<form name="minform">

<div id="spm_gruppe_0" style="display:block;">
spm_gruppe_0
<input type="text">
<input type="text">
<input type="text">
</div>

<div id="spm_gruppe_1" style="display:none;">
spm_gruppe_1
<input type="text">
<input type="text">
<input type="text">
</div>

<div id="spm_gruppe_2" style="display:none;">
spm_gruppe_2
<input type="text">
<input type="text">
<input type="text">
</div>

<div id="spm_gruppe_3" style="display:none;">
spm_gruppe_3
<input type="text">
<input type="text">
<input type="text">
</div>

<input type="button" onClick="switchDiv('back');" value="tilbage">
<input type="button" onClick="switchDiv('next');" value="næste">

</form>
</body>
</html>

Synes godt om

roenving Novice

30. maj 2003 - 12:18 #23

Ser godt ud horsmark !-)

Synes godt om

jumario Nybegynder

30. maj 2003 - 12:25 #24

kanon horsmark, det kunne jeg bruge!

roen: Smider points nu så lav lige et svar hvis du også vil have lidt med :)

Synes godt om

horsmark Nybegynder

30. maj 2003 - 12:26 #25

takker roenvig :-). Rart at få lidt ros herinde når jeg får så mange slag på arbejdet ;-)

Synes godt om

roenving Novice

30. maj 2003 - 12:29 #26

*gg*

>>jumario

oki, men vi tog jo alle ideerne fra horsmark, så ...

Synes godt om

roenving Novice

30. maj 2003 - 19:02 #27

Takker for points ;~}

Synes godt om

horsmark Nybegynder

31. maj 2003 - 01:06 #28

ditto her :-)

Synes godt om

jumario Nybegynder

31. maj 2003 - 10:32 #29

your welcome :]

har et sidste spørgsmål hvis nogen af jer stadig er med...
er det muligt på første div at skjule "tilbage" knappen, og ditte skjule "Frem" knappen på sidste div?

Synes godt om

roenving Novice

31. maj 2003 - 11:03 #30

Jeps -- kommer tilbage senere ;O)

Synes godt om

jumario Nybegynder

31. maj 2003 - 11:06 #31

Lyder godt :)

(og der skulle selfølgelig stå ditto og ikke ditte) :P

Synes godt om

roenving Novice

31. maj 2003 - 22:35 #32

Som start skal dine inputs se sådan ud:

<div id="buttonBack" style="visibility:hidden"><input type="button" onClick="switchDiv('back');" value="tilbage"></div>
<div id="buttonNext" style="visibility:visible"><input type="button" onClick="switchDiv('next');" value="næste"></div>

-- så er der afsat plads til dem , men den ene vises ikke ...

Desuden skal vi så tilrette (og vi skal kende antallet af knapper, så det må du rette !-):

<script language="javascript" type="text/javascript">
var numQs = 3;//antallet af spm/grupper af spørgsmål
var myGroup = 0;
function switchDiv(action){
if(action == "next"){
var checkDiv = 'spm_gruppe_'+(myGroup+1)
if(document.getElementById(checkDiv)){
document.getElementById(checkDiv).style.display = 'block'
document.getElementById('spm_gruppe_'+myGroup).style.display = 'none'
myGroup = myGroup + 1
document.getElementById("buttonBack").visibility="visible";
if (myGroup==numQs)document.getElementById("buttonNext").visibility="hidden";
}
}
if(action == "back"){
var checkDiv = 'spm_gruppe_'+(myGroup-1)
if(document.getElementById(checkDiv)){
document.getElementById(checkDiv).style.display = 'block'
document.getElementById('spm_gruppe_'+myGroup).style.display = 'none'
myGroup = myGroup - 1
document.getElementById("buttonNext").visibility="visible";
if (myGroup==numQs)document.getElementById("buttonBack").visibility="hidden";
}
}
}
</script>

Ganske utestet, men det skal du jo alligevel igennem ;O)

Synes godt om

roenving Novice

31. maj 2003 - 22:36 #33

-- den sidste skulle selvfølgelig være:

if (myGroup==0)document.getElementById("buttonBack").visibility="hidden";

Synes godt om

jumario Nybegynder

02. juni 2003 - 14:28 #34

1000 tak :D

Synes godt om

roenving Novice

02. juni 2003 - 14:34 #35

Velbekomme ;O)

Synes godt om

roenving Novice

11. juni 2005 - 10:30 #36

-- og det hedder selvfølgelig .style.visibility ,-(

(på baggrund af http://www.eksperten.dk/spm/624692 !-)

Synes godt om

jumario Nybegynder

23. juni 2005 - 08:36 #37

jamen godt at se at min gamle tråd stadig kan være til hjælp :D

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS