Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML]obrazkowy checkbox, Czy da się zmienić kwadrat na obrazek?
brychu
post 25.01.2020, 14:15:05
Post #1





Grupa: Zarejestrowani
Postów: 61
Pomógł: 0
Dołączył: 10.04.2015

Ostrzeżenie: (0%)
-----

Witam.
Jak w temacie - czy da się zmienić kwadrat w obrazek?

[HTML] pobierz, plaintext 
  1. <form name="rezerwacja" method="POST" action="test2.php"> 
  2. Jest kwadrat a chce obrazek
  3. <input type="checkbox" type="image" src="http://www.taniepranie.zgora.pl/gfx2/zamowienie2.jpg" name="nazwa" value="wartość" onclick="document.getElementById('identyfikator').style.display = this.checked ? 'block' : 'none'; this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = !this.checked">
  4. <div id="identyfikator" style="display: none">
  5. 	<input type="text" name="nazwa2" value="1"><br>
  6. 	<input type="text" name="nazwa3" value="2">
  7. </div>
[HTML] pobierz, plaintext


Jeśli nie, to może pomożecie mi wynaleźć inne rozwiązanie.
Zamiast pól, które miałem dotychczas:

na kwadraciki z ikonami każdego z przedmiotów, które zmienią kolor i wysuną listę "dodatków" po kliknięciu myszką.

Jak ustawić ilość na 0 w przypadku gdy klient nie wybrał danego przedmiotu a jak na 1, gdy klinie przycisk-obrazek?

Będzie to wszystko trochę inaczej wyglądać. To są obrazki poglądowe.

Ten post edytował brychu 25.01.2020, 14:29:25
Go to the top of the page
+Quote Post
trueblue
post 25.01.2020, 14:29:31
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

https://www.google.com/search?q=checkbox+hack

Jeśli nie wybrał przedmiotu, to nie dostaniesz zmiennej $_POST['nazwa'] w odpowiedzi.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
vokiel
post 25.01.2020, 14:52:48
Post #3





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----

Możesz też dać input typu hidden, wstawić zwykłe obrazki i podpiąć do nich akcję wstawienia wartości do tego ukrytego inputa.


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
Go to the top of the page
+Quote Post
brychu
post 25.01.2020, 22:30:07
Post #4





Grupa: Zarejestrowani
Postów: 61
Pomógł: 0
Dołączył: 10.04.2015

Ostrzeżenie: (0%)
-----

Dziękuje. Mam teraz trochę materiałów do przestudiowania.

Co do checkbox hack to wole nie, bo czytam, że nie na każdej przeglądarce działa i może mieć problemy z androidem. Bla bla bla.
Wolałbym prostą metodę, bo nie dość, że jestem skamieliną programowania to jeszcze nie umiem zbyt wiele i działam na podstawowych informacjach.
Niby zrobiłem system rezerwacji online wraz z kalendarzem, ale to wszystko działa na zasadzie zapisz / odczytaj z bazy danych.

To jak by wyglądał kod na dodawanie wartości do hidden? W ogóle teraz tak się zastanawiam czy wszystko nie zacznie się na stronie rozjeżdżać jeśli użyję rozsuwanych obrazków.

To ja czekam na odpowiedź a sam zaczynam działać. Może coś się uda.
Go to the top of the page
+Quote Post
trueblue
post 26.01.2020, 08:09:36
Post #5





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Jeśli tworzysz stronę na IE6-8 lub Androida 2.0, to faktycznie lepiej nie stosować checkbox hack.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
brychu
post 26.01.2020, 12:37:30
Post #6





Grupa: Zarejestrowani
Postów: 61
Pomógł: 0
Dołączył: 10.04.2015

Ostrzeżenie: (0%)
-----

Albo jeszcze inaczej.

Tabelka 3x3. W każdej komórce obrazek. I teraz jak zrobić tak, żeby klient mógł zaznaczyć odpowiednie obrazki(podświetlają się na czerwono lub w jakikolwiek inny sposób wskazują, że zostały wybrane), tak, żebym mógł dostać w POST na następną stronę informację, które obrazki zostały wybrane?
Go to the top of the page
+Quote Post
trueblue
post 26.01.2020, 12:48:25
Post #7





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

To nie jest inaczej. To jest analogicznie jak wyżej, tyle, że opakowane w tabelkę.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
brychu
post 26.01.2020, 13:30:24
Post #8





Grupa: Zarejestrowani
Postów: 61
Pomógł: 0
Dołączył: 10.04.2015

Ostrzeżenie: (0%)
-----

Tak, ale ja nie wiem jak wstawić zwykłe obrazki i podpiąć do nich akcję wstawienia wartości do tego ukrytego inputa.
Gdybym dostał to w kodzie to już bym poszedł dalej. Proszę? ;]
Go to the top of the page
+Quote Post
vokiel
post 26.01.2020, 14:08:01
Post #9





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----

Wrzucasz je np wewnątrz buttona z przypisaną klasą i jakimś atrybutem zaiwierającym to co chcesz przekazać do serwera.
Potem w JS obsługujesz akcję kliknięcia w button, pobierasz z niego wartość tego atrybutu i ustawiasz value ukrytego inputa.

Jeśli chcesz przesyłać więcej niż jedną opcję to sobie zapisuj w JS w jakiejś zmiennej zaznaczone elementy i do inputa wstawiaj np po przecinku.

Oczywiście, żeby to dobrze działało to musisz sobie zapisywać stan każdego buttona (czy jest zaznaczony czy odznaczony) i obsługiwać obie akcje.


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
Go to the top of the page
+Quote Post
brychu
post 26.01.2020, 18:50:17
Post #10





Grupa: Zarejestrowani
Postów: 61
Pomógł: 0
Dołączył: 10.04.2015

Ostrzeżenie: (0%)
-----

Dobra. Sam tego nie zrobię, bo nie potrafię. Za niska znajomość programowania.

A jak stąd "wyciągnąć" dane na kolejnej stronie czy button jest wciśnięty czy nie? (W php)
[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Dailyweb checkbox</title>
  6. </head>
  7. <body>
  8.     <style>
  9.         .dwcheckbox{
  10.             display:none
  11.         }
  12.         .dwcheckbox + label{
  13.             width: 40px;
  14.             height: 40px;
  15.             background: url("dwcheckbox.png") 0px 0px;
  16.             display: block;
  17.             cursor: pointer;
  18.         }
  19.         .dwcheckbox:checked + label{
  20.             background-position:  0px -41px;
  21.         }
  22.         .dwcheckbox + label:hover,.dwcheckbox:checked + label:hover{
  23.             opacity: 0.8;
  24.         }
  25.         .dwradio{
  26.             display:none
  27.         }
  28.         .dwradio + label{
  29.             width: 40px;
  30.             height: 40px;
  31.             background: url("dwradio.png") 0px 0px;
  32.             display: block;
  33.             cursor: pointer;
  34.         }
  35.         .dwradio:checked + label{
  36.             background-position:  0px -41px;
  37.         }
  38.         .dwradio + label:hover,.dwradio:checked + label:hover{
  39.             opacity: 0.8;
  40.         }
  41.  
  42.     </style>
  43.     <input type="checkbox" id="check1" class="dwcheckbox"/>
  44.     <label for="check1"> </label>
  45. </body>
  46. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
trueblue
post 26.01.2020, 19:52:47
Post #11





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

A jak z normalnego checkboxa wyciągasz informację, że jest zaznaczony? Tu identycznie.
Pisałem Ci o tym w poście #2.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
brychu
post 26.01.2020, 20:26:21
Post #12





Grupa: Zarejestrowani
Postów: 61
Pomógł: 0
Dołączył: 10.04.2015

Ostrzeżenie: (0%)
-----

Aha. Dobra, dziękuję. : )
Zaraz prześle moje wypociny.
podgląd pliku
No i super. Wszystko działa. Ślicznie dziękuję. smile.gif

test1.html
[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html lang="pl">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Test</title>
  6. </head>
  7. <body>
  8.     <style>
  9.         .dwcheckbox{
  10.             display:none
  11.         }
  12.         .dwcheckbox + label{
  13.             width: 40px;
  14.             height: 40px;
  15.             background: url("dwcheckbox.png") 0px 0px;
  16.             display: block;
  17.             cursor: pointer;
  18.         }
  19.         .dwcheckbox:checked + label{
  20.             background-position:  0px -41px;
  21.         }
  22.         .dwcheckbox + label:hover,.dwcheckbox:checked + label:hover{
  23.             opacity: 0.8;
  24.         }
  25.     </style>
  26. <form name="rezerwacja" method="POST" action="checkbox2.php">
  27.     <input type="checkbox" id="check1" class="dwcheckbox" name="sprawdz1"/>
  28.     <label for="check1"> </label>
  29.  
  30. 	<input type="checkbox" id="check2" class="dwcheckbox" name="sprawdz2"/>
  31.     <label for="check2"> </label>
  32. <input class="button" value="Dalej" name="submit" type="submit" />
  33. </html>
[HTML] pobierz, plaintext


checkbox2.php
[PHP] pobierz, plaintext 
  1. <?php
  2. 	 $sprawdz1=$_POST['sprawdz1'];
  3. 	 $sprawdz2=$_POST['sprawdz2'];
  4. 	 echo $sprawdz1;
  5. 	 echo $sprawdz2;
  6. 	 ?>
[PHP] pobierz, plaintext


Ten post edytował brychu 26.01.2020, 20:55:54
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.04.2024 - 04:58
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn