Forum PHP.pl > [jquery] uwidacznianie div'a po wyborze w formularzu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jquery] uwidacznianie div'a po wyborze w formularzu

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

MalyKazio

11.06.2014, 10:22:30

Mam mniej więcej taki kod:

[HTML] pobierz, plaintext 
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
Wybór 1:<br />
<form action="index.php" method="post" enctype="multipart/form-data">
<input type="radio" name="wybor1" value="tak" checked="checked"/>Opis wyboru na tak
<br />
<input type="radio" name="wybor1" value="nie" />Opis wyboru nie
<div id="tekst1" class="ukryte">tutaj jakiś tekst</div>
</form>
</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.

nospor

11.06.2014, 10:26:44

Problem z AJAX nie ma zadnego zwiazku.... patrz prosze gdzie piszesz.... przenosze.
No ale czego nie wiesz? Jak zmenic klase?

Turson

11.06.2014, 10:28:08

http://jsfiddle.net/3Auqm/

MalyKazio

11.06.2014, 10:59:56

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 
$('input[name="wybor1"]').on('change', function(){
    var value = $(this).val();
    if(value=='nie')
        $('div#tekst1').show();
    else
        $('div#tekst1').hide();
})
[HTML] pobierz, plaintext

A żeby tym samym kodem zapłatwić jeszcze wybor2 (i powiazany z nim tekst2), wybor3 itd?

Turson

11.06.2014, 11:06:40

http://jsfiddle.net/3Auqm/1/

MalyKazio

11.06.2014, 12:27:51

Ś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 
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
    .tekst{display:none}
</style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('input.radio').on('change', function(){
    var value = $(this).val();
    if(value=='nie')
        $(this).parent('.container').find('div.tekst').show();
    else
        $(this).parent('.container').find('div.tekst').hide();
})
});//]]>  
</script>
</head>
<body>
  Wybór 1:<br />
<form action="index.php" method="post" enctype="multipart/form-data">
<div class="container">
    <input type="radio" class="radio" name="wybor1" value="tak" checked="checked"/>Opis wyboru na tak
<br />
<input type="radio" class="radio" name="wybor1" value="nie" />Opis wyboru nie
<div class="tekst">tutaj jakiś tekst</div>
    </div>
    <br><br>
  Wybór 2:<br />
        <div class="container">
    <input type="radio" class="radio" name="wybor2" value="tak" checked="checked"/>Opis wyboru na tak
<br />
<input type="radio" class="radio" name="wybor2" value="nie" />Opis wyboru nie
<div class="tekst">tutaj jakiś tekst</div>
    </div>
</form>
<div id="suma">0</div>
</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 
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('input.radio').on('change', function(){
    var value = $(this).val();
    var wybor1 = 5;
    var wybor2 = 10;
    if(value=='nie')
        $(this).parent('.container').find('div.tekst').show();
    else
        $(this).parent('.container').find('div.tekst').hide();
})
});//]]>  
</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.

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.