Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Formularz, IE nie łapie zaznaczania radio w <label>
Beneglih
post
Post #1





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 4.06.2011

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

Jak w temacie

mam formularz w którym mam różne obrazki
chcę, aby kliknięcie bezpośrednio na obrazek zaznaczało mi radio

w firefoxie i chrome działa takie rozwiązanie
<label><input type="radio"/><img src="obrazek" /></label>

niestety IE ma swoje humory i kliknięcie na obrazek nie powoduje żadnej reakcji
trzeba ręcznie klikać w radio

jak to obejść aby w IE kliknięcie w obrazek zaznaczało radio formularza?
Go to the top of the page
+Quote Post
luckyps
post
Post #2





Grupa: Zarejestrowani
Postów: 153
Pomógł: 41
Dołączył: 28.06.2011
Skąd: Częstochowa

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

Moze takie rozwiazanie Cie zadowoli (użyłem JQuery):

[HTML] pobierz, plaintext 
  1. <label><input type="radio"><img src="sciezka/do/obrazka" /></input></label>
  2.  
  3. <script  type='text/javascript'>
  4. $("img").click(function(){
  5.     element = this.previousSibling;
  6.     element.checked = true;
  7. })
  8. </script>
[HTML] pobierz, plaintext


Ten post edytował luckyps 28.06.2011, 11:44:24
Go to the top of the page
+Quote Post
Korab
post
Post #3





Grupa: Zarejestrowani
Postów: 202
Pomógł: 36
Dołączył: 10.06.2011
Skąd: Dokąd

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

Albo bez konieczności ładowania zewnętrznych bibliotek typu jQuery - w ten sposób:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script  type='text/javascript'>
  4. function zaznacz(co){
  5.     element = co.previousSibling;
  6.     element.checked = true;
  7. }
  8. </script>
  9. </head><body>
  10.  
  11. <form>
  12.  <label>
  13.    <input type="radio">
  14.       <img src="sciezka/do/obrazka" onClick="zaznacz(this);" />
  15.    </input>
  16.  </label>
  17. </form>
  18.  
  19. </body></html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Beneglih
post
Post #4





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 4.06.2011

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

podsunęliście mi tym jquery pewien pomysł
pytanie czy wykonalny?

Tj. czy dałoby się ukryć w ogóle przycisk radio, a zamiast niego zastosować jakiś hover na obrazku?

czyli użytkownik klika w obrazek, ten np. szarzeje i staje się w ten sposób zaznaczonym buttonem
kliknie na inny, to inny zsarzeje, a poprzedni odzyska kolor

domyślam się, że trzeba by kombinować z klasą :active?
Go to the top of the page
+Quote Post
luckyps
post
Post #5





Grupa: Zarejestrowani
Postów: 153
Pomógł: 41
Dołączył: 28.06.2011
Skąd: Częstochowa

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

Wszystko sie da (IMG:style_emoticons/default/wink.gif)
Mam nadzieje, ze o to Ci chodzilo....

[HTML] pobierz, plaintext 
  1. <label><input name="radiobutton" type="radio"><img class="image" src="adres/do/obrazka" /></input></label>
  2. <label><input name="radiobutton" type="radio"><img class="image" src="adres/do/obrazka" /></input></label>
  3.  
  4. <script type='text/javascript'>
  5.  
  6. $("input:radio").hide(); // na dzien dobry ukrywamy wszystkie radiobuttony
  7.  
  8. $("img").click(function(){
  9.     element = this.previousSibling;
  10.     element.checked = true;
  11.  
  12.     $("input:radio").hide();
  13.     $(".image").fadeIn("slow");
  14.  
  15.     $(this).fadeOut("slow", function() {
  16.         $(element).fadeIn("slow");
  17.     });
  18. })
  19. </script>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Beneglih
post
Post #6





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 4.06.2011

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

jest prawie super, tylko że po zaznaczeniu element znika całkowicie,
dałoby się tak zrobić, żeby po prostu przyszarzał, przyciemnił obojętne, ale żeby nie zniknął?
Go to the top of the page
+Quote Post
luckyps
post
Post #7





Grupa: Zarejestrowani
Postów: 153
Pomógł: 41
Dołączył: 28.06.2011
Skąd: Częstochowa

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

Jestem jeszcze troche spiacy - ciekawe czy dobrze zrozumialem (IMG:style_emoticons/default/wink.gif) 

[HTML] pobierz, plaintext 
  1. $("input:radio").hide();
  2. $(".image").css({opacity: "0.5"});
  3.  
  4. $("img").click(function(){
  5.     element = this.previousSibling;
  6.     element.checked = true;
  7.  
  8.     $("input:radio").hide();
  9.     $(".image").animate({
  10.         opacity: "0.5", // 
  11.     }, 500 );   // szybkosc animacji w ms
  12.  
  13.     $(this).animate({
  14.         opacity: "1.0",
  15.     }, 500 );   // szybkosc animacji w ms
  16.  
  17. })
[HTML] pobierz, plaintext


w takim rozwiazaniu radiobuttony bedzie zawsze ukryty, ale zaznaczenie go przez klkikniecie obrazka bedzie dzialac.
Go to the top of the page
+Quote Post
toaspzoo
post
Post #8





Grupa: Zarejestrowani
Postów: 778
Pomógł: 84
Dołączył: 29.07.2010
Skąd: Gliwice / Pławniowice Mistrz niezmordowanej klawiatury.

Ostrzeżenie: (20%)
X----

<input type=radio style="background:URL('obrazek.jpg');">

Ten post edytował toaspzoo 29.06.2011, 08:02:46
Go to the top of the page
+Quote Post
Beneglih
post
Post #9





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 4.06.2011

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

@luckyps DZIĘKI WIELKIE (IMG:style_emoticons/default/thumbsupsmileyanim.gif)
wszystko działa tak jak chciałem (przestawiłem sobie tylko wartości na odwrót bo chciałem żeby wszystko było w kolorze a po zaznaczeniu szarzało)

innym również dziękuję za bezinteresowną pomoc (IMG:style_emoticons/default/smile.gif)




W sumie jeszcze pojawił się mały problem,
tj. wciśnięcie reset w formularzu resetuje zaznaczenia, ale zaznaczone elementy nie odzyskują koloru, po prostu reset formularza nie wpływa na efekty jquery

I WIĘKSZY PROBLEM tj.
w formularzu mam wiele różnych nazw inputów

czyli <input name="1" value="x" /><input name="2"/ value="x">

a ten skrypt powoduje, że nie ma różnicy w ogóle nazwa inputu
zawsze efekt działa tylko na 1 inpucie, czyli wiele różnych rzeczy można sobie klikać i zaznaczać, a efekt będzie widoczny tylko na 1 ostatnio klikniętym elemencie
jak "zostawić" efekt na już klikniętych radiach?

Ten post edytował Beneglih 29.06.2011, 08:31:20
Go to the top of the page
+Quote Post
luckyps
post
Post #10





Grupa: Zarejestrowani
Postów: 153
Pomógł: 41
Dołączył: 28.06.2011
Skąd: Częstochowa

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

ad. mniejszey problem:

do input odpowiedzialnego za reset formularza dodac zdarzenie onclick
[HTML] pobierz, plaintext 
  1. <form id="mojformularz">
  2. .
  3. .
  4. .
  5. <input type="reset" onclick="nazwaFunkcji();">
  6. </form>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. nazwaFunkcji() {
  2.     $(".image").css({opacity: "0.5"}); // wywolac funkcje, ktora znow tak jak na poczatku ustawi przezroczystosc elementow na odpowiednim poziomie
  3.     $("#mojformularz").reset();
  4. }
[HTML] pobierz, plaintext


ad. wiekszy problem:
znow bede strzelal czy o to chodzi (IMG:style_emoticons/default/tongue.gif) 

[HTML] pobierz, plaintext 
  1. // zakomentuj ta czesc kodu:
  2. /*$(".image").animate({
  3. //opacity: "0.5", 
  4. /}, 500 ); // szybkosc animacji w ms*/
[HTML] pobierz, plaintext

Go to the top of the page
+Quote Post
Beneglih
post
Post #11





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 4.06.2011

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

co do ad. mniejszy problem

nie wiem czemu, ale to w ogóle nie działa,
tj. pojawiają się butony radio i przestaje działać cały skrypt

co do ad. większy problem

to ten kawałek kodu który podałeś jest identyczny jak ten który podałeś wcześniej w całym skrypcie,
więc chcąc nie chcąc, żadnych zmian w działaniu nie odnotowuje (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
luckyps
post
Post #12





Grupa: Zarejestrowani
Postów: 153
Pomógł: 41
Dołączył: 28.06.2011
Skąd: Częstochowa

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

ad.1 musze pomyslec...
ad.2 chodzi, zebys wywalil ze skryptu ta czesc kodu ktora tam pokazalem (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
Beneglih
post
Post #13





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 4.06.2011

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

reset już sobie rozwiązałem w ten sposób:

$("#reset").click(function(){
$(".image").css({opacity: "1.0"});
});

i dałem id inputa resetu na #reset



a jak wywalę ten fragment, o którym piszesz to wtedy radio działa jak checkbox
kliknięcie w KAŻDY input powoduje jego bezpowrotne poszarzenie

a jak mam kilka różnych elementów formularza

JEST OK
załatwiłem to daniem różnych klas dla wybranych obrazków
czyli np.
<input name="1"/><img class="1"/>
<input name="2"/><img class="2"/>

i w skrypcie pododawałem klasy w ciągu
$(".1 , .2")



Ten post edytował Beneglih 29.06.2011, 10:42:31
Go to the top of the page
+Quote Post
luckyps
post
Post #14





Grupa: Zarejestrowani
Postów: 153
Pomógł: 41
Dołączył: 28.06.2011
Skąd: Częstochowa

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

i masz racje, w taki sposob bedziesz mial dostep do tego do czego chcesz (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
Sephirus
post
Post #15





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

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

Mały komentarz z mojej strony - zabawa zabawą, kombinowanie kombinowaniem ale ja przede wszystkim zacząłbym od tego:

[HTML] pobierz, plaintext 
  1. <input type="radio" name="nazwa" value="1" id="radio1"><label for="radio1"><img src="obrazek1.jpg" alt="obrazek"/></label>
  2. <input type="radio" name="nazwa" value="1" id="radio2"><label for="radio2"><img src="obrazek2.jpg" alt="obrazek"/></label>
  3. <input type="radio" name="nazwa" value="1" id="radio3"><label for="radio3"><img src="obrazek3.jpg" alt="obrazek"/></label>
[HTML] pobierz, plaintext


I niezależnie od tego czy input typu radio będzie ukryty czy nie - to zawsze zadziała pod każdą przeglądarką... nawiasem mówiąc...

Pozdrawiam (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
Galakar
post
Post #16





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 29.05.2011
Skąd: Warszawa

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

Mam nadzieję, że nikt nie będzie miał nic przeciwko odświeżeniu tego tematu. Skorzystałem ze skryptu luckyps, ale mam ten sam problem co na początku Beneglih. Niestety jQuery jest dla mnie czarną magią, więc nie wiem co poszło nie tak.

Tak wygląda kod formularza:
[HTML] pobierz, plaintext 
  1. <input type = "radio" name = "vote" value = "Test 1"/><img class = "pic1" src = "/pics/1.jpg"/>
  2. 	  <input type = "radio" name = "vote" value = "Test 2"/><img class = "pic1" src = "/pics/2.jpg"/>
  3.   <input type = "radio" name = "vote1" value = "Test 3"/><img class = "pic2" src = "/pics/3.jpg"/>
  4. 	  <input type = "radio" name = "vote1" value = "Test 4"/><img class = "pic2" src = "/pics/4.jpg"/>
[HTML] pobierz, plaintext


A oto skrypt luckyps (dodałem drugą wartość, tak jak sugerował Beneglih, ale z jakiegoś powodu nie działa jak powinno):
[HTML] pobierz, plaintext 
  1. <script type='text/javascript'>
  2. //Skrypt autorstwa luckyps: <a href="http://forum.php.pl/index.php?s=&showtopic=179131&view=findpost&p=877218" target="_blank">http://forum.php.pl/index.php?s=&showt...st&p=877218</a>
  3. $("input:radio").hide();
  4. $(".pic1, .pic2").css({opacity: "0.5"});
  5.  
  6. $("img").click(function(){
  7.     element = this.previousSibling;
  8.     element.checked = true;
  9.  
  10.     $("input:radio").hide();
  11.     $(".pic1, .pic2").animate({
  12.         opacity: "0.5", // 
  13.     }, 500 );   // szybkosc animacji w ms
  14.  
  15. 	$(this).animate({
  16.         opacity: "1.0",
  17.     }, 500 );   // szybkosc animacji w ms
  18.  
  19. })
  20. </script>
[HTML] pobierz, plaintext


Zrobiłem to w takiej kolejności:
[HTML] pobierz, plaintext 
  1.  <tr>
  2.   <td><input type = "radio" name = "vote" value = "Test 1"><img class = "pic1" src = "/pics/1.jpg"/></input>
  3. 	  <input type = "radio" name = "vote" value = "Test 2"><img class = "pic1" src = "/pics/2.jpg"/></input></td>
  4. <script type='text/javascript'>
  5. //Skrypt autorstwa luckyps: <a href="http://forum.php.pl/index.php?s=&showtopic=179131&view=findpost&p=877218" target="_blank">http://forum.php.pl/index.php?s=&showt...st&p=877218</a>
  6. $("input:radio").hide();
  7. $(".pic1").css({opacity: "0.5"});
  8.  
  9. $("img").click(function(){
  10.     element = this.previousSibling;
  11.     element.checked = true;
  12.  
  13.     $("input:radio").hide();
  14.     $(".pic1").animate({
  15.         opacity: "0.5", // 
  16.     }, 500 );   // szybkosc animacji w ms
  17.  
  18. 	$(this).animate({
  19.         opacity: "1.0",
  20.     }, 500 );   // szybkosc animacji w ms
  21.  
  22. })
  23. </script>
  24.   <td><input type = "radio" name = "vote1" value = "Test 3"><img class = "pic2" src = "/pics/3.jpg"/></input>
  25. 	  <input type = "radio" name = "vote1" value = "Test 4"><img class = "pic2" src = "/pics/4.jpg"/></input></td>
  26. <script type='text/javascript'>
  27. //Skrypt autorstwa luckyps: <a href="http://forum.php.pl/index.php?s=&showtopic=179131&view=findpost&p=877218" target="_blank">http://forum.php.pl/index.php?s=&showt...st&p=877218</a>
  28. $("input:radio").hide();
  29. $(".pic2").css({opacity: "0.5"});
  30.  
  31. $("img").click(function(){
  32.     element = this.previousSibling;
  33.     element.checked = true;
  34.  
  35.     $("input:radio").hide();
  36.     $(".pic2").animate({
  37.         opacity: "0.5", // 
  38.     }, 500 );   // szybkosc animacji w ms
  39.  
  40. 	$(this).animate({
  41.         opacity: "1.0",
  42.     }, 500 );   // szybkosc animacji w ms
  43.  
  44. })
  45. </script>
  46.  </tr>
[HTML] pobierz, plaintext

Wszystko działa tak długo, jak klika po kolei. Czyli najpierw Test1/Test2 a później Test3/Test4. Problem występuje wtedy kiedy najpierw zaznaczam Test3/Test4, a następnie Test1/Test2. Wtedy odznaczeniu ulega Test3/Test4. Da się to jakoś usprawnić, aby kolejność nie była ważna?

Mógłbym prosić o jakąś poradę? Niestety nadal nie jestem w stanie rozwiązać tego problemu (IMG:style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
luckyps
post
Post #17





Grupa: Zarejestrowani
Postów: 153
Pomógł: 41
Dołączył: 28.06.2011
Skąd: Częstochowa

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

zamien
[HTML] pobierz, plaintext 
  1. $("img").click(function(){
[HTML] pobierz, plaintext

na
[HTML] pobierz, plaintext 
  1. $("img.pic1").click(function(){
[HTML] pobierz, plaintext


i w drugim skrypcie analogicznie na img.pic2

Jesli dalej to nie to co chcesz uzyskac - daj znac.
Go to the top of the page
+Quote Post
Galakar
post
Post #18





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 29.05.2011
Skąd: Warszawa

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

Wielkie dzięki. To rozwiązało problem.
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 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 Aktualny czas: 23.09.2025 - 06:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn