[JavaScript] prosty fromularz - pierwsze kroki Opcje

[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 ?

[HTML] pobierz, plaintext 
<script type="text/javascript">
//Funkcja zwraca tablicę z wartościami pól z danego formularza
function pokaz() {
        formularz = document.getElementById(hdd);
        var hdd = document.upgrades.hdd.value;
        var odd = document.upgrades.odd.value;
        var ram = document.upgrades.ram.value;
		document.write(hdd) ;
		document.write(odd) ;
		document.write(ram) ;
}
</script>
 
Twoja konfiguracja:</br>
HDD:<script type="text/javascript"> document.write(hdd);</script></br>
ODD:<script type="text/javascript"> document.write(odd);</script></br>
RAM:<script type="text/javascript"> document.write(ram);</script></br>
 
Wybierz upgrade'y
====================
<form name="upgrades" id="upgrades" action="java script:pokaz()">
<select name="hdd" id="hdd">
    <option value=""> </option>
    <option value="80">80 GB</option>
        <option value="120">120 GB</option>
            <option value="250">250 GB</option>
                <option value="500" selected>500 GB</option>
                    <option value="1.0">1.0 TB</option>
                        <option value="1.5">1.5 TB</option>
</select>
<select name="odd" id="odd">
    <option value=""> </option>
    <option value="CD">CD Rom</option>
        <option value="DVD" selected>DVD Rom</option>
            <option value="COMBO">COMBO</option>
                <option value="CDRW">CD-RW</option>
                    <option value="DVD-RW">DVD-RW</option>
                        <option value="BluRay">BluRay</option>
</select>                        
<select name="ram" id="ram">
    <option value=""> </option>
    <option value="1">1 GB</option>
        <option value="2" selected>2 GB</option>
            <option value="4">4 GB</option>
                <option value="8">8 GB</option>
                    <option value="16">16 GB</option>
                        <option value="32">32 GB</option>
</select>
<input type="submit" name="submit" value="submit"/>
</form>
[HTML] pobierz, plaintext 

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

Pozdrawiam
phpamator

Ten post edytował Kshyhoo 24.01.2014, 16:27:45

[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]

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

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

Tak czy siak, poprawie sie w niedalekiej przyszlosci

Pozdrawiam
phpamator

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

Pozdrawiam jeszcze raz

[Turson]

Przykład

[HTML] pobierz, plaintext 
Wybierz<br>
Procesor
<select id="procesor" onchange="sprawdz(this)">
	<option>i3</option>
	<option>i5</option>
	<option>i7</option>
</select>
<br>
RAM
<select id="ram" onchange="sprawdz(this)">
	<option>1 GB</option>
	<option>4 GB</option>
	<option>8 GB</option>
</select>
 
<div id="zestaw_procesor"></div>
<div id="zestaw_ram"></div>
 
<script>
function sprawdz(x){
	var typ = $(x).attr('id');
	$('#zestaw_'+typ).text(typ+": "+$(x).val());
}
</script>
[HTML] pobierz, plaintext 

Ten post edytował Turson 24.01.2014, 16:09:58

[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

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

[HTML] pobierz, plaintext 
function sprawdz(x){
	var typ = $(x).attr('id');
	$('#zestaw_'+typ).text(typ+": "+$(x).val());
}
[HTML] pobierz, plaintext 

Ten post edytował phpamator 25.01.2014, 01:00:39

[Turson]

Nie rozumiem, jaki masz zamysł.

Czy document.write to odpowiednik echo w php ?
>> Powiedzmy, że do diva chcesz wstawić tekst

[HTML] pobierz, plaintext 
<div id="sample"></div>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
var string = "Lorem Ipsum";
/* JavaScript */
document.getElementById('sample').innerHTML = string;
/* jQuery */
$('#sample').text(string);
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował Turson 25.01.2014, 12:12:30

[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
tylko jak teraz spowodowac, zeby informacja z listy rozwijanej zostala przekazana do zmiennej ?

Ten post edytował phpamator 25.01.2014, 12:37:10

[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
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


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

[HTML] pobierz, plaintext 
<head>
 
</head>
<hr size="0" noshade=noshade>
 
Wybierz<br>
Procesor
<select id="procesor" onchange="sprawdz(this)">
	<option >Pentium 4</option>
	<option>Pentium D</option>
	<option>Dual Core</option>
	<option>Core Duo</option>
	<option selected>Core 2 Duo</option>
	<option>Core 2 Quad</option>
	<option>i3</option>
	<option>i5</option>
	<option>i7</option>
</select>
<br>
RAM
<select id="ram" onchange="sprawdz(this)">
	<option>1 GB</option>
	<option selected>4 GB</option>
	<option>8 GB</option>
	<option>12 GB</option>
	<option>16 GB</option>
	<option>24 GB</option>
	<option>32 GB</option>
	<option>64 GB</option>
</select>
<br> 
<hr size="0" noshade=noshade>
Procesor: <div id="zestaw_procesor"></div><br>
Ram: <div id="zestaw_ram"></div>
 
<script src="http://xxx.xxx.xxx.xx/js/jquery.js" type="text/javascript">
function sprawdz(x){
	var typ = $(x).attr('id');
	$('#zestaw_'+typ).text(typ+": "+$(x).val());
}
</script>
[HTML] pobierz, plaintext 

mimo to nie dziala ;(
a w konsoli wywala: Uncaught ReferenceError: sprawdz is not defined

Ten post edytował phpamator 25.01.2014, 13:21:09

[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
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" ?


Ten post edytował phpamator 25.01.2014, 13:43:10

[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 ....

Ten post edytował phpamator 25.01.2014, 21:47:01

[Turson]

To czysty bezsens po prostu
Skoro piszesz kod to czemu nie możesz dodatkowo dodać jquery z zewnętrznego źródła

[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ł
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
A jesli tak to jak to zrobic ?

Ten post edytował phpamator 26.01.2014, 01:41:48