Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jquery] uwidacznianie div'a po wyborze w formularzu
MalyKazio
post
Post #1





Grupa: Zarejestrowani
Postów: 168
Pomógł: 1
Dołączył: 19.11.2005

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

Mam mniej więcej taki kod:
[HTML] pobierz, plaintext 
  1. <head>
  2. <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  3. <link rel="stylesheet" type="text/css" href="style.css" />
  4. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  5. <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
  6. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  7. </head>
  8. <body>
  9. Wybór 1:<br />
  10. <form action="index.php" method="post" enctype="multipart/form-data">
  11. <input type="radio" name="wybor1" value="tak" checked="checked"/>Opis wyboru na tak
  12. <br />
  13. <input type="radio" name="wybor1" value="nie" />Opis wyboru nie
  14. <div id="tekst1" class="ukryte">tutaj jakiś tekst</div>
  15. </form>
  16. </body>
[HTML] pobierz, plaintext


Teraz moje pytanie, bo nie jestem sobie w stanie poradzić. Standardowo div o id=tekst1 jest niewidoczny. Jak zrobić by pojawiał sie tylko w przypadku wyboru inputa opisanego "nie" (tzn. chodzi mi albo o usuniecie klasy "ukryte" albo o jej zmiane na klasę powiedzmy "widoczne")? Próbowałem znaleźć coś w dokumentacji jquery, ale niestety nie radzę sobie z tym najlepiej.

Ten post edytował MalyKazio 11.06.2014, 10:23:33
Go to the top of the page
+Quote Post
nospor
post
Post #2





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Problem z AJAX nie ma zadnego zwiazku.... patrz prosze gdzie piszesz.... przenosze.
No ale czego nie wiesz? Jak zmenic klase?
Go to the top of the page
+Quote Post
Turson
post
Post #3





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

http://jsfiddle.net/3Auqm/
Go to the top of the page
+Quote Post
MalyKazio
post
Post #4





Grupa: Zarejestrowani
Postów: 168
Pomógł: 1
Dołączył: 19.11.2005

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

Turson: Dzięki, o coś takiego mi właśnie chodziło. A da się zrobić tak, żeby dla kilku miejsc było tak samo (żeby dla każdej wersji nie pisać oddzielnego JS)?
Jest taki kod:
[HTML] pobierz, plaintext 
  1. $('input[name="wybor1"]').on('change', function(){
  2.     var value = $(this).val();
  3.     if(value=='nie')
  4.         $('div#tekst1').show();
  5.     else
  6.         $('div#tekst1').hide();
  7. })
[HTML] pobierz, plaintext


A żeby tym samym kodem zapłatwić jeszcze wybor2 (i powiazany z nim tekst2), wybor3 itd?
Go to the top of the page
+Quote Post
Turson
post
Post #5





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

http://jsfiddle.net/3Auqm/1/
Go to the top of the page
+Quote Post
MalyKazio
post
Post #6





Grupa: Zarejestrowani
Postów: 168
Pomógł: 1
Dołączył: 19.11.2005

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

Śmiga, że aż miło. Dziękuję bardzo, jestem wdzięczny.
Mam jednak jeszcze ostatnie pytanie.
Kod wygląda mniej więcej tak:
[HTML] pobierz, plaintext 
  1. <head>
  2. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  3. <title> - jsFiddle demo</title>
  4. <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
  5. <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  6. <style type='text/css'>
  7.     .tekst{display:none}
  8. </style>
  9. <script type='text/javascript'>//<![CDATA[ 
  10. $(window).load(function(){
  11. $('input.radio').on('change', function(){
  12.     var value = $(this).val();
  13.     if(value=='nie')
  14.         $(this).parent('.container').find('div.tekst').show();
  15.     else
  16.         $(this).parent('.container').find('div.tekst').hide();
  17. })
  18. });//]]>  
  19. </script>
  20. </head>
  21. <body>
  22.   Wybór 1:<br />
  23. <form action="index.php" method="post" enctype="multipart/form-data">
  24. <div class="container">
  25.     <input type="radio" class="radio" name="wybor1" value="tak" checked="checked"/>Opis wyboru na tak
  26. <br />
  27. <input type="radio" class="radio" name="wybor1" value="nie" />Opis wyboru nie
  28. <div class="tekst">tutaj jakiś tekst</div>
  29.     </div>
  30.     <br><br>
  31.   Wybór 2:<br />
  32.         <div class="container">
  33.     <input type="radio" class="radio" name="wybor2" value="tak" checked="checked"/>Opis wyboru na tak
  34. <br />
  35. <input type="radio" class="radio" name="wybor2" value="nie" />Opis wyboru nie
  36. <div class="tekst">tutaj jakiś tekst</div>
  37.     </div>
  38. </form>
  39. <div id="suma">0</div>
  40. </body>
[HTML] pobierz, plaintext

Jak zrobić by w przypadku ustawienia "nie" przy polu "wybor1" do sumy (na końcu) dodawana była liczba np. 5, zaś przy wyborze "nie" przy polu "wybór2" np. liczba 10? Chodzi mi o to, by oprócz pokazywania się diva było wykonywane działanie i podmieniany był wynik w divie "suma".
Czy coś takiego ma sens:
[HTML] pobierz, plaintext 
  1. <script type='text/javascript'>//<![CDATA[ 
  2. $(window).load(function(){
  3. $('input.radio').on('change', function(){
  4.     var value = $(this).val();
  5.     var wybor1 = 5;
  6.     var wybor2 = 10;
  7.     if(value=='nie')
  8.         $(this).parent('.container').find('div.tekst').show();
  9.     else
  10.         $(this).parent('.container').find('div.tekst').hide();
  11. })
  12. });//]]>  
  13. </script>
[HTML] pobierz, plaintext

Hmm... zadeklarowałem dwie wartości i utknąłem. W php bym sobie poradził ale JS to czarna magia. Powinno być pewnie coś takiego:
if(value=='nie')
$(this).parent('.container').find('div.tekst').show();
tu dodatkowy warunek if nazwa pola = wybor1 to wtedy bierzemy wartość z diva "suma", zwiększamy o wybor1 i wklejamy na miejsce;
tu dodatkowy warunek if nazwa pola = wybor2 to wtedy bierzemy wartość z diva "suma", zwiększamy o wybor2 i wklejamy na miejsce;
else
$(this).parent('.container').find('div.tekst').hide();
})
Nie wiem jak to zrealizować w praktyce.
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · 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: 25.08.2025 - 13:36
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn