Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] prosty fromularz - pierwsze kroki
Forum PHP.pl > Forum > Przedszkole
php__amator
Witam serdecznie wszystkich przedszkolaków,

Zacząłem się trochę interesować JavaScriptem no i ..........
znowu mam pytanie. Cieszycie się ?

Oto moje pytanie:

Mam skrypt - patrz poniżej - nie jest mojego autorstwa, ja go tylko przerobiłem.
Zasadniczo chciałbym aby dane wybrane z list rozwijanych pojawiły się w liniach poniżej "Twoja konfiguracja:".

w takiej formie skrypt po wcisnieciu submit wysyla dane ale widze je na osobnej stronie w ciagu jeden za drugim a chcialbym aby pojawily sie w okreslonym wiekscu. Jak ?

  1. <script type="text/javascript">
  2. //Funkcja zwraca tablicę z wartościami pól z danego formularza
  3. function pokaz() {
  4. formularz = document.getElementById(hdd);
  5. var hdd = document.upgrades.hdd.value;
  6. var odd = document.upgrades.odd.value;
  7. var ram = document.upgrades.ram.value;
  8. document.write(hdd) ;
  9. document.write(odd) ;
  10. document.write(ram) ;
  11. }
  12.  
  13. Twoja konfiguracja:</br>
  14. HDD:<script type="text/javascript"> document.write(hdd);</script></br>
  15. ODD:<script type="text/javascript"> document.write(odd);</script></br>
  16. RAM:<script type="text/javascript"> document.write(ram);</script></br>
  17.  
  18. Wybierz upgrade'y
  19. ====================
  20. <form name="upgrades" id="upgrades" action="java script:pokaz()">
  21. <select name="hdd" id="hdd">
  22. <option value=""> </option>
  23. <option value="80">80 GB</option>
  24. <option value="120">120 GB</option>
  25. <option value="250">250 GB</option>
  26. <option value="500" selected>500 GB</option>
  27. <option value="1.0">1.0 TB</option>
  28. <option value="1.5">1.5 TB</option>
  29. <select name="odd" id="odd">
  30. <option value=""> </option>
  31. <option value="CD">CD Rom</option>
  32. <option value="DVD" selected>DVD Rom</option>
  33. <option value="COMBO">COMBO</option>
  34. <option value="CDRW">CD-RW</option>
  35. <option value="DVD-RW">DVD-RW</option>
  36. <option value="BluRay">BluRay</option>
  37. </select>
  38. <select name="ram" id="ram">
  39. <option value=""> </option>
  40. <option value="1">1 GB</option>
  41. <option value="2" selected>2 GB</option>
  42. <option value="4">4 GB</option>
  43. <option value="8">8 GB</option>
  44. <option value="16">16 GB</option>
  45. <option value="32">32 GB</option>
  46. <input type="submit" name="submit" value="submit"/>
  47. </form>


i czy potrzebny (w moim przypadku jest potrzebny smile.gif ) przycisk "SUBMIT"
czy np mozna zrobic w taki sposob aby dane wybierane z list rozwijanych automatycznie wskakiwaly w miejsca przy liscie konfiguracji ?

Pozdrawiam
phpamator
Turson
Jeżeli dobrze zrozumiałem to chodzi o onchange(). Wczoraj był podobny wątek - http://forum.php.pl/index.php?showtopic=226772&st=0
Kshyhoo
Cytat(phpamator @ 23.01.2014, 23:33:30 ) *
Witam serdecznie wszystkich przedszkolaków,

Trzy lata na Forum, i nie znasz zasad tego działu. Proszę dodać bb-code.
php__amator
No tak wlasnie myslalem ze o czyms zapomnialem, przepraszam smile.gifsmile.gifsmile.gif

Ech tam zaraz trzy lata, moze zapisalem sie na forum jakims cudem szukajac czegos smile.gif
Czynnie zaczalem dopiero niedawno smile.gif
A wlasciwie trudno nazwac to CZYNNIE, troche wiecej ostanio robie i wiecej pytam smile.gif

Tak czy siak, poprawie sie w niedalekiej przyszlosci smile.gif

Pozdrawiam
phpamator

P.S.
A propo's skryptu, zauwazylem, ze ostatnio ktos pytal o formularze ale dopiero po tym jak umiescilem swoj smile.gif
Wiec jesli to nie problem to podpowiedzcie bo w temacie JS jestem zielenszy od zielonego jakim jestem w php smile.gif
Co tu zmienic, zeby po wybraniu z listy dane umieszczane byly w tresci listy elementow upgrade'owanych ?

Pozdrawiam jeszcze raz
Turson
Przykład
  1. Wybierz<br>
  2. Procesor
  3. <select id="procesor" onchange="sprawdz(this)">
  4. <option>i3</option>
  5. <option>i5</option>
  6. <option>i7</option>
  7. <br>
  8. RAM
  9. <select id="ram" onchange="sprawdz(this)">
  10. <option>1 GB</option>
  11. <option>4 GB</option>
  12. <option>8 GB</option>
  13.  
  14. <div id="zestaw_procesor"></div>
  15. <div id="zestaw_ram"></div>
  16.  
  17. function sprawdz(x){
  18. var typ = $(x).attr('id');
  19. $('#zestaw_'+typ).text(typ+": "+$(x).val());
  20. }
php__amator
Serdeczne dzieki turson ale ze co ?

Bo jakoś nie załapałem, to jest coś co już wiem i z tym sobie poradzilem, nie do końca o to mi chodziło. Chodziło mi bowiem o to zeby tak jak w php, mam w miejscach czy to w tresci, czy liście elementów zmienne ktore moge modyfikowac przez wybranie odpowiednich z list rozwijanych:

1. w formularzu sa ustawione domyslnie pewne wartosci ale powiedzmy jestem klientem i chce zmodyfikowac co nieco, wybieram wiec z list rozwijanych to co chcialbym zmienic np wieklszy dysk albo wiecej pamieci.

2. wybrane elementy - inne niz ustawione domyslnie zastepuja te pierwsze pojawiajac sie w wyznaczonych miejscach/polach/divach.

3 jestem zadowolonym klientem i np drukuje sobie specyfikacje ze zmienionymi elementami lub wysyłam do koszyka (oczywiscie to wszystko w dużym uproszczeniu).


Ta da !

I jak spokonie sobie dam rade w php to nie bardzo daje rade - narazie - w JS bom poczatkujący javascriptamator.

Tego fragnemtu na przykład kompletnie nie kumam. Co to niby robi i po co ?
Gdybyś tak zechciał opisac co to robi proszę.
I na przykład jak tę zmienną typ wyświetlić w dowolnym jub bardzo określonym miejscu ? no i czy np zmienne te funkcjonują cały czas ? czy tylko do przeładownaia strony i czy żeby ją pokazać to musi znajdować się
w tym samym bloku skryptu czy jak w php moge wstawić blok <script> var typ </script> i ją wyświetlę ? Czy document.write to odpowiednik echo w php ? czt należy uzyć innego polecenia ?

Takich i milion podobnych pytań mam jeszcze w zapasie wiec ..... spoko smile.gif

W międzyczasie studiuję kurs dla amatorów Lynda - JavaScript for beginers smile.gif
ale jeszcze nic na tenat .formularzy nie znalazłem

  1. function sprawdz(x){
  2. var typ = $(x).attr('id');
  3. $('#zestaw_'+typ).text(typ+": "+$(x).val());
  4. }
Turson
Nie rozumiem, jaki masz zamysł.

Czy document.write to odpowiednik echo w php ?
>> Powiedzmy, że do diva chcesz wstawić tekst
  1. <div id="sample"></div>

[JAVASCRIPT] pobierz, plaintext
  1. var string = "Lorem Ipsum";
  2. /* JavaScript */
  3. document.getElementById('sample').innerHTML = string;
  4. /* jQuery */
  5. $('#sample').text(string);
[JAVASCRIPT] pobierz, plaintext
php__amator
Witaj turson,
Zamysl jest taki:

"Formularz konfiguracji sprzętu" (bez przeładowywania strony)
Procesor: zmienna w ktorej zawarta jest informacja na temat procesora (domyslnie wybrana jakas plus mozliwosc wybrania z listy innego procesora, szybkosci itd.
Pamięć: i tu podobnie, lista rozwijana.
itd

skrypt ma tylko umiescic wartosci w tekscie bądż liście elementów z których składa się urządzenie.

albo np twój komputer składa się z: Procesor: (zmienna_procesor), pamięć: (zmienna_pamiec), dysk twardy (zmienna_hdd) itd.
jesli zestaw zostanie już skonfigurowany wtedy tę konfigurację wysyłam sobie dalej gdzie będzie liczona cena i wrzucane to wszystko na drukarke, czy co tam będę chciał z tym zrobić.

Problem polega na tym, że nie wiem jak to zrobić w JS
W php zrobiłbym formularz, wysłał postem i w odpowiednich miejscach wstawił tylko <?php echo 'Costam: '.zmienna_costam; ?> i po zawodach w połączeniu z inputami moge zrobić co zechce.
a ponieważ MUSI to być w JS a nie w php.

aaaaa ok, czyli w tym przykladzie ktory napisales id=sample pokazuje to o co mi chodzi
teraz tylko zmodyfikowac , dodac rozwijane listy i powinno byc ok smile.gif
tylko jak teraz spowodowac, zeby informacja z listy rozwijanej zostala przekazana do zmiennej ?
Turson
tylko jak teraz spowodowac, zeby informacja z listy rozwijanej zostala przekazana do zmiennej ?
>> w poście #5 właśnie to pokazałem
php__amator
no tak, faktycznie, przynajmniej teoretycznie powinno działaś. Ale dlaczego nie działa ?
wybieram z listy ale nie widze zeby to sie gdziekolwiek pojawialo.
Turson
Włącz konsolę i zobacz co wywali. Pewnie nie podłączyłeś biblioteki jQuery w <head>
php__amator
aaaa a o tym nie napisales smile.gifsmile.gifsmile.gif
a tak w czystym jsie sie nie da ? bez ładowania jQuery ?
Nie wiem czy bede mogł załadować jQuery tam gdzie chciałbym ten skrypt zapakowac smile.gif


Rzuc okiem, tak wyglada:
link do jquery jest bezposrednio zrobiony wiec powinno byc ok ?

  1.  
  2. </head>
  3. <hr size="0" noshade=noshade>
  4.  
  5. Wybierz<br>
  6. Procesor
  7. <select id="procesor" onchange="sprawdz(this)">
  8. <option >Pentium 4</option>
  9. <option>Pentium D</option>
  10. <option>Dual Core</option>
  11. <option>Core Duo</option>
  12. <option selected>Core 2 Duo</option>
  13. <option>Core 2 Quad</option>
  14. <option>i3</option>
  15. <option>i5</option>
  16. <option>i7</option>
  17. <br>
  18. RAM
  19. <select id="ram" onchange="sprawdz(this)">
  20. <option>1 GB</option>
  21. <option selected>4 GB</option>
  22. <option>8 GB</option>
  23. <option>12 GB</option>
  24. <option>16 GB</option>
  25. <option>24 GB</option>
  26. <option>32 GB</option>
  27. <option>64 GB</option>
  28. <br>
  29. <hr size="0" noshade=noshade>
  30. Procesor: <div id="zestaw_procesor"></div><br>
  31. Ram: <div id="zestaw_ram"></div>
  32.  
  33. <script src="http://xxx.xxx.xxx.xx/js/jquery.js" type="text/javascript">
  34. function sprawdz(x){
  35. var typ = $(x).attr('id');
  36. $('#zestaw_'+typ).text(typ+": "+$(x).val());
  37. }

mimo to nie dziala ;(
a w konsoli wywala: Uncaught ReferenceError: sprawdz is not defined
Turson
Właduj jquery w head
<head>
<script src="http://xxx.xxx.xxx.xx/js/jquery.js"></script>
</head>
php__amator
Aaaa tu jest pies pogrzebany.
I teraz nie musze już za każdym razem ładować jquery.js ?
I wystarczy że kazdy skrypt bedzie sie zaczynał <script> i konczyl </script> chyba ze do wykonania danego skryptu bede potrzebował jakąś specyficzną biblioteke ?

OK a teraz jeszcze poprosze o prosty warunek:
if costam i costam = costam to link
i jestesmy w domu wink.gif
Jak powinna wygladac skladnia wrunku i gdzie powinna sie znajdowac ?
I jeszcze jedna sprawa, jesli <div id="costam"> bede chciał np zrobić w określonym miejscu i np w css ustawie mu parametry jak ma wygladac np ?
to div musi byc wtedy z
tagiem class="costam" ?
Turson
jquery.js ładujesz tylko raz w każdym dokumencie.
Tak, wystarczy <script>

http://www.doman.art.pl/kursjs/kurs/warunki.html
php__amator
Pytanie:
jesli z jakiegos powodu nie moge zaladowac jquery.js z zewnatrz i jednoczesnie nie moge umieścić go na lokalnym serwerze czy mogę go jakoś wkleić do samego pliku ?
Mam nadzieję, że się wyraziłem .... smile.gif
Turson
To czysty bezsens po prostu wink.gif
Skoro piszesz kod to czemu nie możesz dodatkowo dodać jquery z zewnętrznego źródła ohmy.gif
php__amator
Tak zapytałem, nie mam pewności czy serwer na ktorym chce umiescic skrypt pozwala na ladowanie zewnętrznych plików/bibliotek/includów.
W poniedziałem będę wiedział smile.gif
W międzyczasie przećwiczyłem kilka fajnych przykładów z użyciem jQuery. Fajne to ....


Ponawiam pytanie, czy mozna do kodu strony dodac jquery.js tak aby mozna bylo z niego korzystac bez odwolywania sie do niego na zewnatrz ?
Moze to i bez sensu, moze i debilny pomysl ale pytam bo np Ebay nie pozwala na umieszczanie odwolan do zewnetrznych skryptow z wyjatkiem chyba tylko plikow css natomiast moge umiescic go w kodzie strony jesli sie da.

Chcialbym wprowadzic troche zmian i wykorzystac jquery choc jesli sie nie da to moze uzyje samego "golego" javascriptu.
Oczywiscie wolalbym jQuery.
Da sie questionmark.gifquestionmark.gif
A jesli tak to jak to zrobic ?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.