interaktywne formularze

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
riker
Nowy
Nowy
Posty: 100
Rejestracja: sob wrz 25, 2004 2:03 pm
Lokalizacja: Wrocław

interaktywne formularze

Post autor: riker »

Witam
Potrzebuje zrobic formularz www (spory). Jak zrobic zeby po wybraniu ktoregos elementu formularza pojawiała sie obok niego informacja, ewentualnie drugi formularz. Chce to polaczyc z php gdyz potrzebuje zrobic pewne obliczenia. W czym i czy wogole jest mozliwe zrobienie tego typu formularzy.
Wojciech Kocjan
Zaczyna działać
Zaczyna działać
Posty: 427
Rejestracja: sob gru 14, 2002 10:51 am

Re: interaktywne formularze

Post autor: Wojciech Kocjan »

Najłatwiej będzie połączyć tutaj chyba JS i CSS. Tworzysz sobie 2 formularze, przy czym ten drugi ma sie pokazac gdy z pierwszego zostanie wybrana jakas opcja. Przy tejze opcji dajesz zdarzenie onclick, onselect lub podobne i dopisujesz do niego w JS funkcje zmieniajaca parametr visibility: formularza drugiego.

Moze jasniej:
- tworzysz 2 formularze, z czego drugiemu dajesz visibility: hidden;
- do jednego z pol 1 formularza przypisujesz zdarzenie np. onselect
- gdy to zdarzenie zajdzie, za pomoca JS zmieniasz visibility: hidden na visible (dla 2 formularza)
riker
Nowy
Nowy
Posty: 100
Rejestracja: sob wrz 25, 2004 2:03 pm
Lokalizacja: Wrocław

Re: interaktywne formularze

Post autor: riker »

Nie znam java script, wlasnie sciagam kurs. Jakbys mogl mi napisac co wpisac tutaj aby uaktywnic drugi formularz, mialbym przyklad na ktorym moglbym sie wzorowac.
<html>
<script language="JavaScript">
function onSelect() {
alert("Wybrałeś pole nr 1");
}
</script>
<form method=post action="nastepna.php" >
<input name=test type=radio value=1 onSelect()> 1
<input name=test type=radio value=2> 2
<input name=test type=radio value=3> 3
</form>
<form method=post vasibly=hidden action="nastepna.php" >
<input name=test type=radio value=1> 4
<input name=test type=radio value=2> 5
<input name=test type=radio value=3> 6
</form>

ps. jest jakas funkcja ktora po kliknieciu zdarzenia dodaj po rostu jakis tekst na trone? chcialbym zeby obok pojawiala sie informacja po wybraniu danej opcji

Prosze o pomoc
Wojciech Kocjan
Zaczyna działać
Zaczyna działać
Posty: 427
Rejestracja: sob gru 14, 2002 10:51 am

Re: interaktywne formularze

Post autor: Wojciech Kocjan »

Zobacz cos takiego:

Kod: Zaznacz cały

<form method=post action="nastepna.php" >
<input name=test type=radio value=1 onclick="document.getElementById('form2').style.visibility='visible'"> 1
<input name=test type=radio value=2> 2
<input name=test type=radio value=3> 3
</form>
<form method=post style="visibility: hidden;" action="nastepna.php" id="form2">
<input name=test type=radio value=1> 4
<input name=test type=radio value=2> 5
<input name=test type=radio value=3> 6
</form>
Nie dziala w druga strone, czyli ze jak sie kliknie gdy juz jest widoczny, to wtedy nie powraca do pierwotnego stanu.. To juz zadanie dla Ciebie ;-)
riker
Nowy
Nowy
Posty: 100
Rejestracja: sob wrz 25, 2004 2:03 pm
Lokalizacja: Wrocław

Re: interaktywne formularze

Post autor: riker »

Moje zadanie wypełniłem w dojść premitywny sposob ale działa :D :

Kod: Zaznacz cały

<html>
<head>
<script language="JavaScript">
     function onSelect() {
       document.getElementById('form3').style.visibility='hidden';
       document.getElementById('form2').style.visibility='visible';
  }
     function onSelect2() {
       document.getElementById('form2').style.visibility='hidden';
       document.getElementById('form3').style.visibility='visible';
  }
 </script>
</head>
<form method=post action="nastepna.php" >
<input name=test type=radio value=1 onclick="onSelect()">   1
<input name=test type=radio value=2 onclick="onSelect2()">   2
</form>
<form method=post style="visibility: hidden;"  action="nastepna.php" id="form2">
<input name=test type=radio value=1>   4
<input name=test type=radio value=2>   5
<input name=test type=radio value=3>   6
</form>
<form method=post style="visibility: hidden;"  action="nastepna.php" id="form3">
<input name=test type=radio value=1>   7
<input name=test type=radio value=2>   8
<input name=test type=radio value=3>   9
</form>


Dzieki wielkie za pomoc. Nie moge powiedziec ze nauczylem sie dzisiaj js ale bede mogl odrobic "zadanie domowe".
riker
Nowy
Nowy
Posty: 100
Rejestracja: sob wrz 25, 2004 2:03 pm
Lokalizacja: Wrocław

Re: interaktywne formularze

Post autor: riker »

Kurde, a juz myslelem ze cos umiem, dlaczego takie cos nie dziala:
<html>
<head>
<script language="JavaScript">
function onSelect() {
document.getElementById('akapit').style.visibility='visible';
}
</script>
</head>
<body>
<form method=post action="nastepna.php" >
<select name="wybor"> Klawiatura:<br>
<option onclick="onSelect()">wybierz klawiature....</option>
<option>z wyswietlaczem LCD</option> <p id="akapit" style="visibility: hidden;"> tekst o wyswietlaczu LCD</p>
<option>bez wyswietlacza -LED</option>

</select>
</body>
</html>

Prosze o pomoc
riker
Nowy
Nowy
Posty: 100
Rejestracja: sob wrz 25, 2004 2:03 pm
Lokalizacja: Wrocław

Re: interaktywne formularze

Post autor: riker »

Chodzi mi o to zeby po wybrtaniu jakiejs opcji z pola listy obok pojawiał sie jej opis, zmieniam <p> z hidden na visibly ale to cos nie chce dzialac. Prosze o pomoc
Wojciech Kocjan
Zaczyna działać
Zaczyna działać
Posty: 427
Rejestracja: sob gru 14, 2002 10:51 am

Re: interaktywne formularze

Post autor: Wojciech Kocjan »

Nie mozesz miec <p> wewnatrz <select>, daj <p> poza to pole. Oprocz tego - do <option> raczej nie stosuj 'onclick' co oznacza gdy kliknie, tylko np. onselect (chyba ;-))

I jeszcze jendo - stosuj znacznik

Kod: Zaznacz cały

 na forum, juz nie mam ochoty poprawiac Twoich postow po raz kolejny - przeczytaj regulamin.
ODPOWIEDZ