Podstrony
- telcocafe
- [HTML] Formularz liczący punkty Coś w rodzaju testu liczącego punkty ;)
- [php] sprawdzanie formularzy !!! wyswietla sie komunikat ale skrypt wykonuje sie dalej!
- Formularz mailowy na www Formularz mailowy na www
- Pomocy ! JS z formularzem! :(
- [formularz] problem z textarea pojawianie sie textu w textarea
- [js]przekazywanie zmiennych z js do formularza
- [PHP] Wysylanie maila co 5min. w formularzu php
- [PHP] Funkcja include() odnośniki i formularze w includowanej stronie
- [PHP] uprawnienia plików przesyłanie plików za pomocą formularza
- [HTML lub PHP] Formularz generujacy plik HTML
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- nowepliki.pev.pl
telcocafe
Chciałbym się dowiedzieć jak można zrobić wielokrotny dynamiczny formularz. Może ta nazwa nic nie mówi, ale zaraz wyjaśnie o co mi chodzi bo widziałem już na kilku stronach...A mianowicie potrzebuje zrobic cos takiego:
najpierw jest formularz typu select z róznymi polami do wyboru np. 'humanistyczne', 'scisle'. Teraz po wybraniu np. 'ścisle' nizej pojawia się kolejny formularz select już z polami odpowiadającymi wyborowi wczesniej tzn. 'matematyka', 'informatyka', 'geografia' itp...
W czym można zrobić coś takiego?
Chciałbym się dowiedzieć jak można zrobić wielokrotny dynamiczny formularz. Może ta nazwa nic nie mówi, ale zaraz wyjaśnie o co mi chodzi bo widziałem już na kilku stronach...
A mianowicie potrzebuje zrobic cos takiego:
najpierw jest formularz typu select z róznymi polami do wyboru np. 'humanistyczne', 'scisle'. Teraz po wybraniu np. 'ścisle' nizej pojawia się kolejny formularz select już z polami odpowiadającymi wyborowi wczesniej tzn. 'matematyka', 'informatyka', 'geografia' itp...
W czym można zrobić coś takiego?
Bardzo łatwo. Wykorzystujesz do tego odrobine magii PHP i ukryte pola formularzy.
O to gotowy przykład z wyjaśnieniem:
<a href="http://compzone.org/art-4-Zastosowanie+ukrytych+pol-72.html">http://compzone.org/art- 4-Zastosowanie+ukrytych+pol-72.html</a>
W php z odświeżaniem strony też jestem w stanie zrobić coś takiego, jednak tu w tym przypadku chciałbym aby odświeżania nie było... Dokładniej chciałbym tu pomieszać php z dhtml-em, tak by kolejne podformularze tworzyły się z pól w bazie mysql, tylko nie wiem jak się zabrać za to od strony dhtml-a...
Może jest ktoś w tanie podsunąć jakiś przykładowy kod?
W php z odświeżaniem strony też jestem w stanie zrobić coś takiego, jednak tu w tym przypadku chciałbym aby odświeżania nie było... Dokładniej chciałbym tu pomieszać php z dhtml-em, tak by kolejne podformularze tworzyły się z pól w bazie mysql, tylko nie wiem jak się zabrać za to od strony dhtml-a...
Może jest ktoś w tanie podsunąć jakiś przykładowy kod?
kwestja css'a
display:block/none
wyswietla albo nie wyswietla i zmiana tych styli
za pomoca javascriptu getelementbyid()
EDIT>>
<script language="javascript" type="text/javascript">
<!--
function pokaz(id) {
document.getElementById(id).style.display="block";
}
// -->
</script>
<a href="#" onmouseover="pokaz('opcja1')"></a>
<div id="opcja1" style="display:none;">
jakieś opcje do wyboru
</div>
Użytkownik orglee edytował ten post 11 luty 2006, 15:50
Zobacz to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>TEST</TITLE> <META http-equiv=Content-Type content="text/html; charset=iso-8859-2"> <LINK href="style.css" type=text/css rel=stylesheet> <script> <!-- nc = (document.layers)? true:false ie = (document.all)? true:false function Show(){document.all.laduj.style.visibility='hidden'; } var wybor ="<input type='radio' value='V1' name='R"; function Pyt(licznik){ document.all.laduj.style.visibility='visible'; var x=licznik; if(ie & licznik<dl){ document.all['cos'].innerHTML="<p class='PYTANIE'>"+x+". "+pytDane[licznik].pyt+"</p><DIV id='done'><img src='"+pytDane[licznik].zdjecie+"' name='fot' align='right' hspace='10' onload='Show();'></DIV><p>"+wybor+x+"'>a) "+pytDane[licznik].a+"</p><p>"+wybor+x+"'>b) "+pytDane[licznik].b+"</p><p>"+wybor+x+"'>c) "+pytDane[licznik].c+"</p><p>"+wybor+x+"'>d) "+pytDane[licznik].d+"</p><p><input type='button' value=' >> ' name='next' onclick='Spr(licznik);'>"}; if(licznik==dl){KoncoweWyniki();document.all.laduj.style.visibility='hidden'; }; } --> </SCRIPT> <meta name="generator" content="WebSite PRO 4.0"> </HEAD> <BODY onload=Start();> <FORM name=test method=post> <SPAN id=npyt><A href="javascript:Spr(licznik);">Następne pytanie</A></SPAN> <SPAN id=stp><A class=1 href="javascript:KoncoweWyniki();">Zakończ test</A></SPAN> <SPAN id=pw></SPAN> <DIV id=cos></DIV> </FORM> <DIV id=wynik></DIV> <DIV id=laduj></DIV> <DIV id=pasek> <TABLE width="100%"> <TBODY> <TR> <TD class=zolty width=160 height=25> </TD> <TD class=zielony> </TD></TR> </TBODY> </TABLE> </DIV> <DIV id=tytul>Informatyka <BR><SPAN style="FONT-SIZE: 9pt">Test z Podstaw Techniki</SPAN></DIV> <script> <!-- function Roz(pyt,a,b,c,d,o,zdjecie){ this.pyt = pyt; // zadawane pytanie this.a = a; // 1 odpowiedź this.b = b; // 2 odpowiedź this.c = c; // 3 odpowiedź this.d = d; // 4 odpowiedź this.o = o; // odpowiedź : 8 - 1; 9 - 2; 10 - 3; 11 - 4 this.zdjecie=zdjecie; // zdjęcie do pytania } pytDane = new Array(); pytDane[1] = new Roz('Które zdanie jest prawdziwe?','w skład minimalnego zestawu mikrokomputerowego wchodzi klawiatura, monitor i stacja dysków','mysz jest wejściowym urządzeniem zewnętrznym','podstawowym urządzeniem wejściowym zewnętrznym jest monitor','klawiatura jest podstawowym urządzeniem wejściowym','11','pyt0.jpg') pytDane[2] = new Roz('Mikroprocesor to:','układ zainstalowany na płycie głównej komputera organizujący i nadzorujący pracę systemu','część komputera umożliwiająca słuchanie muzyki','układ sterujący czytnikiem CD-ROM','przenośny komputer niewielkich rozmiarów','8','pyt2.jpg') pytDane[3] = new Roz('Pamięć RAM to pamięć:','przeznaczona tylko do odczytu','operacyjna o dostępie swobodnym','przeznaczona tylko do zapisu','zewnętrzna','9','pyt3.jpg') pytDane[4] = new Roz('Każdy program przed uruchomieniem umieszczany jest','w pamięci ROM','w pamięci RAM','w pamięci zewnętrznej','na dysku twardym','9','pyt0.jpg') pytDane[5] = new Roz('Pamięć ROM to pamięć:','przeznaczona do przechowywania programów, danych i wyników','operacyjna zanikająca po wyłączeniu komputera','stała zawierająca programy startowe i programy obsługi urządzeń zewnętrznych','pamięć zewnętrzna','10','pyt0.jpg') pytDane[6] = new Roz('Po wyłączeniu komputera wymazuje się zawartość:','pamięci RAM','pamięci ROM','pamięci zewnętrznej','dyskietki','8','pyt0.jpg') pytDane[7] = new Roz('WINDOWS 2000 jest:','edytorem tekstu','encyklopedią multimedialną','systemem operacyjnym','programem graficznym','10','pyt0.jpg') pytDane[8] = new Roz('Tryb graficzny pracy komputera oznacza tryb:','który umożliwia tworzenie na ekranie wyłącznie grafiki (bez tekstów)','który niezależnie do rodzaju karty graficznej pozwala wyświetlić na ekranie 80x25 punktów','w którym na ekranie mogą pojawić się obrazy w kolorze jedynie z kartą graficzną SVGA','w jakim na ekranie można wyświetlić punkty(piksele), których liczba w pionie i w poziomie zależy od rodzaju karty graficznej','11','pyt8.jpg') var dl = pytDane.length; // ilość pytań var dlo = 4 // liczba możliwych odpowiedzi var db = 0 // ilość dobrych odpowiedzi var ndst=0 // ilość złych odpowiedzi var ocena var wynikistr var wynikizazncz odpDane = new Array(); for (j = 0; j<dl; j++){odpDane[j] = "0"} function Spr(k){ if(k<dl){ for (l = 0; l<dlo; l++){ if (eval("document.test.R"+k+"[l].checked") && pytDane[k].o%7-1==l){ db++; } if (eval("document.test.R"+k+"[l].checked") && pytDane[k].o%7-1!=l){ ndst++; } if (eval("document.test.R"+k+"[l].checked")){ switch(l){ case 0: odpDane[k]='a';break; case 1: odpDane[k]='b';break; case 2: odpDane[k]='c';break; case 3: odpDane[k]='d';break; } } } (wynikizazncz==true)? Wynik(): document.all.wynik.style.visibility='hidden';licznik+=1;Pyt(licznik); } } // gdy nie odpowiedzieliśmy function Neutral(){ for (k=1; k<dl; k++) { for (l = 0; l<dlo; l++){ db=0; } } } function Wynik(){ var wynikistr="Dobre odpowiedzi: <B>"+db+"</B><br>Złe odpowiedzi: <B>"+ndst+"</B><br>Razem <B>"+eval(db+ndst)+"</B> odpowiedzi na <B>"+eval(dl-1)+"</B> pytań"; if (ie){document.all['wynik'].innerHTML=wynikistr; document.all.wynik.style.visibility='visible'; } } function KoncoweWyniki(naz){ if (db <=4){ocena="niedostateczna";} //<=10 if(db > 4 & db <=5){ocena="dopuszczająca";} //>10 & <=15 if(db > 5 & db<=6){ocena="dostateczna";} //>15 & <=20 if(db > 6 & db<=7){ocena="dobra";} //>20 & <=23 if(db > 7 & db<=8){ocena="bardzo dobra";} //>23 & <=25 wynikistr="Dobre odpowiedzi: <B>"+db+"</B><br>Złe odpowiedzi: <b>"+ndst+"</b><br>Razem <B>"+eval(db+ndst)+"</B> odpowiedzi na <b>"+eval(dl-1)+"</B> pytań<p>Ocena: "+ocena+"<br>"; if (ie){document.all['cos'].innerHTML=wynikistr;licznik=dl; document.all.pw.style.visibility='visible'; } } function Loguj(){ licznik=1; document.all.npyt.style.visibility='visible'; document.all.stp.style.visibility='visible'; Pyt(licznik); } function Start(){ var przedmowa=""; var startt="<p>Aby rozpocząć test kliknij przycisk 'START'<br><br><input type='button' value='START' onclick='Loguj();'>"; if (ie){ document.all['cos'].innerHTML=przedmowa+startt; } } // --> </SCRIPT> </BODY></HTML>
i plik CSS
UNKNOWN { PADDING-LEFT: 10px; FONT-SIZE: 12px; BACKGROUND: rgb(255,255,255); MARGIN: 10px; COLOR: #29297c; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif } .PYTANIE { FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif } FORM { FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif } #wynik { PADDING-LEFT: 10px; Z-INDEX: 120; LEFT: 548px; VISIBILITY: hidden; FONT: 10pt Arial CE; WIDTH: 210px; CLIP: rect(0px 210px 50px 0px); COLOR: black; POSITION: absolute; TOP: 2px; HEIGHT: 50px; BACKGROUND-COLOR: #ffcc00; layer-background-color: ##FFCC00 } #cos { FONT-SIZE: 12px; Z-INDEX: 20; LEFT: 10px; WIDTH: 720px; COLOR: #29297c; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; POSITION: absolute; TOP: 100px } #pw { LEFT: 300px; VISIBILITY: hidden; POSITION: absolute; TOP: 256px } #npyt { Z-INDEX: 120; LEFT: 20px; VISIBILITY: hidden; FONT: bold 10pt Arial CE; COLOR: #ff0000; POSITION: absolute; TOP: 56px } #stp { Z-INDEX: 120; LEFT: 200px; VISIBILITY: hidden; FONT: bold 10pt Arial CE; POSITION: absolute; TOP: 56px } #laduj { Z-INDEX: 120; LEFT: 20px; VISIBILITY: hidden; FONT: bold 10pt Arial CE; POSITION: absolute; TOP: 400px } #tytul { FONT-WEIGHT: bold; FONT-SIZE: 12pt; Z-INDEX: 120; LEFT: 20px; WIDTH: 400px; CLIP: rect(0px 400px 49px 0px); COLOR: #29297c; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; POSITION: absolute; TOP: 10px; HEIGHT: 49px } A { COLOR: blue } .1 { COLOR: white } #npyt A { COLOR: #000000 } #pasek { Z-INDEX: 100; LEFT: 0px; WIDTH: 330px; CLIP: rect(0px 330px 24px 0px); POSITION: absolute; TOP: 50px; HEIGHT: 24px } .zielony { BACKGROUND-COLOR: #66CC00 } .zolty { BACKGROUND-COLOR: Yellow } TD { FONT-SIZE: 12px; COLOR: #29297c; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif }
Z tego co pamiętam, to chodziło tylko pod IE (dobrze chodziło)
Użytkownik a7v8x edytował ten post 11 luty 2006, 15:55
dobła dobła nie marudź tylko przeczytaj co napisałem
wyedytowałem post'a poprzedniego
EDIT>>
a jeśli chodzi o <inptu,..>
to musisz odpowiednie zachowanie do niego dobrać
to było chyba onfocus albo jakoś tak
Użytkownik orglee edytował ten post 11 luty 2006, 15:52
A jak coś takiego z selecem zrobic Orglee?
ps. dzieki a7v8x za helpa ale wolablybm zeby to dzialalo tez na firefoxie...
dobra skończe sobie szukać paru rzeczy i zaraz ci napisze taki skrypt
dobra skończe sobie szukać paru rzeczy i zaraz ci napisze taki skrypt
<html>
<head><title>formularz</title>
<script language="javascript" type="text/javascript">
<!--
function odkryj(id) {
document.getElementById(id).style.display="block";
}
// -->
</script>
</head>
<body bgcolor="#666666">
<form>
<input name="Opcja" type="radio" onfocus="odkryj('PodOpcja1')">Opcja(1)<br>
<div id="PodOpcja1" style="display:none; margin-left:30;">
<input type="checkbox">Opcja(1a)<br>
<input type="checkbox">Opcja(1b)<br>
</div>
<input name="Opcja" type="radio" onfocus="odkryj('PodOpcja2')">Opcja(2)<br>
<div id="PodOpcja2" style="display:none; margin-left:30;">
<input type="checkbox">Opcja(2a)<br>
<input type="checkbox">Opcja(2b)<br>
</div>
</form>
</body>
</html>
Użytkownik orglee edytował ten post 11 luty 2006, 16:52
Dzieki wielkie, ale chcialbym zapytać czy dałoby się to także zrobić jak select, czyli taki rozwijany w dół formularz?
hmm pewnie tak dało by się tylko trzeba ponazywać poszczególne pola wyboru
EDIT>>
na razie zrobiłem coś takiego:
<select name="PolaWyboru" onchange="odkryj('PodOpcja1')"> <option id="Opcja1Select">Opcja(1)</option> <option id="Opcja2Select">Opcja(2)</option> <option id="Opcja3Select">Opcja(3)</option> </select>
no niestety odsłania zawsze tylko pierwszą opcje
jeżeli miały by się różne odsłaniać to trzeba by było napisać jeszcze jedną funkcje JS
która by:
a) Pobierała obecne zaznaczenie pola <select>
B) Odkrywała odpowiednią część strony
niestety z tym ci już nie pomoge bo nie pamiętam jak się pobiera aktualnie
zaznaczoną opcje w polu select
Użytkownik orglee edytował ten post 11 luty 2006, 17:06
hmm pewnie tak dało by się tylko trzeba ponazywać poszczególne pola wyboru
Dobra już sobie przypomniałem.
W stronie musisz dać mniej więcej coś takiego:
<html> <head><title>formularz</title> <script language="javascript" type="text/javascript"> <!-- function WyswietlPodOpcje() { if (document.Opcja1Select.selected) { document.PodOpcja1.style.display="block"; } } // --> </script> </head> <body bgcolor="#666666"> <form> <select name="PolaWyboru" onchange="WyswietlPodOpcje()"> <option id="Opcja1Select">Opcja(1)</option> <option id="Opcja2Select">Opcja(2)</option> <option id="Opcja3Select">Opcja(3)</option> </select> <div id="PodOpcja1" style="display:none; margin-left:30;"> <input type="checkbox">Opcja(1a)<br> <input type="checkbox">Opcja(1b)<br> </div> <div id="PodOpcja2" style="display:none; margin-left:30;"> <input type="checkbox">Opcja(2a)<br> <input type="checkbox">Opcja(2b)<br> </div> </form> </html>
EDIT>>
kaszana nie działa ...
dobra nie będę kombinował bo na prawde nie pamiętam
pzdr
Użytkownik orglee edytował ten post 11 luty 2006, 17:17
Szkoda, ale dzieki za pomoc... może ktoś jeszcze ma pomysł?
http://bwana.website.pl/kursphp/
Odszukaj taki napis:
Uruchom.p18g.php
Szukana fraza: Uruchom.p18g.php
Zakres wyszukiwania: treść rozdziałów kursu oraz przykładowe skrypty
Niestety, nie znaleziono odpowiedzi. Sprawdź, czy w szukanej frazie wyrazy są wpisane bez błędów (np. literówek).
Edited:
znalazłem ten twój fragment, ale to nie o to chodzi... :(
Użytkownik TroubleM@ker edytował ten post 11 luty 2006, 19:18
Można to rozwiązać używajac techniki AJAX:
Technilogia AJAX
Kodie dzięki za info wyżej... całkiem ciekawy sposób :)
Znalazłem coś takiego:
<html> <head> <title>untitled</title> <style type="text/css"> .hiddenName { position: absolute; left: 110px; display: none; font: normal 14px verdana; } </style> <script type="text/javascript" language="javascript"> var showme = new Object(); showme['d1'] = 'ACCT-110'; showme['d2'] = 'ACCT-111'; showme['d3'] = 'BADM-231'; function display(selval) { for (divs in showme) if (showme[divs] == selval) document.getElementById(divs).style.display = 'block'; else document.getElementById(divs).style.display = 'none'; } </script> </head> <body> <form> <select name="course_code" onchange="display(options[selectedIndex].value)"> <option>choose</option> <option value="ACCT-110">ACCT-110</option> <option value="ACCT-111">ACCT-111</option> <option value="BADM-231">BADM-231</option> </select> <div id="d1" class="hiddenName">Accounting I</div> <div id="d2" class="hiddenName">Accounting II</div> <div id="d3" class="hiddenName">Business Communications</div> </form> </body> </html>
Czy ktoś mógłby mi pomóc przekształcić to w ten sposób, że po wyborze pierwszego pola z listy rozwijanej otwira się odpowodnia lista rozwijana. Na której po wybraniu pola pojawia się trzecia lista rozwijana (odpowiednia dla pola na drugiej liscie), po kliknieciu na ktora zostanie wyslany formularz?
zależy mi, by po wyborze pola na drugiej liście i otwarciu trzecie druga nie znikała...
Użytkownik TroubleM@ker edytował ten post 12 luty 2006, 17:12