[jQuery]Ukrywanie pól formularza

[jQuery]Ukrywanie pól formularza - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [jQuery]Ukrywanie pól formularza (/thread-jquery-ukrywanie-pol-formularza)

[jQuery]Ukrywanie pól formularza - knapior - 24-02-2011

Użyłem skryptu ze strony:
http://websta.pl/download/jquery-pokazywanie-i-ukrywanie-dodatkowych-pol-formularza-plugin
Mój kod JS w <body> wygląda następująco:

Kod:
<script type="text/javascript">

    $(function() {

        $('#male').ukryjpola({docelowy : 'skinmale',szybkoscpokaz : 'normal'});

        $('#female').ukryjpola({docelowy : 'skinfemale',szybkoscpokaz : 'normal'});

    });

</script>

Input'y:

Kod:
<input type=\"radio\" name=\"plec\" id=\"male\" value=\"1\"/>Mężczyzna<br /><input type=\"radio\" name=\"plec\" id=\"female\" value=\"2\"/>Kobieta

Div'y, które mają się chować/pokazywać:

Kod:
<tr><td class=\"trow1\" colspan=\"2\">(Po wyborze płci pojawią się tutaj ubrania do wyboru)<br /><div id=\"skinmale\">".$male."</div><div id=\"skinfemale\">".$female."</div></td></tr>

Poniżej przedstawiam wytyczne dot. zmiennych zawartych w div'ach.

Kod:
$female i $male="<span style=\"float: left; text-align: center; margin: 2px;\"><img src=\"images/gamecp/skins/".$row['id'].".png\" alt=\"Skin id ".$row['id']."\" /><br /><input type=\"radio\" name=\"skin\" value=\"".$row['id']."\" /></span>";

Odnośnie slaszów przed cudzysłowami - jest to w zmiennej, więc proszę się do tego nie przyczepiać. Wszystko działa pięknie, lecz dodając do div'a, który ma się chować/pokazywać inny element blokowy typu span, p, div po zamianie obecnie wybranego pola div'y się sumują, zamiast podmieniać.

RE: [jQuery]Ukrywanie pól formularza - Kartofelek - 24-02-2011

Ale po co tak mącić? Nie lepiej

$('#male, #female')..click(function() {
$(this).next().slideToggle() ?
});

Żadne bzdurne pluginy wtedy nie są potrzebne, a całość mieści się w powyższym kodzie ;]

RE: [jQuery]Ukrywanie pól formularza - Labsta.com - 24-02-2011

Tak na marginesie, to mój "bzdurny plugin", to coś innego niż next().slideToggle().

Czekam na jakiegoś linka do strony z problemem, bo nie wiem czy dobrze Cię rozumiem knapior.

RE: [jQuery]Ukrywanie pól formularza - knapior - 24-02-2011

Nie mam zbytnio jak tego umieścić. Napiszę to w punktach.
1. Wybieram pierwsze pole.
2. Pokazuje się pierwszy div.
3. Wybieram drugie pole.
4. Pokazuje się pierwszy oraz drugi div. Dwa div'y zlewają się ze sobą.
Co chciałbym osiągnąć?
1. Wybieram pierwsze pole.
2. Pokazuje się pierwszy div.
3. Wybieram drugie pole.
4. Pokazuje się drugi div.
Dzieje się tak kiedy w div'e, który ma się pokazywać/chować jest umieszczony element blokowy. Czyli np.

Kod:
<div id="skinmale">

<span style="float: left; text-align: center; margin: 2px;"><img src="images/gamecp/skins/7.png" alt="Skin id 7" /><br /><input type="radio" name="skin" value="7" /></span><span style="float: left; text-align: center; margin: 2px;"><img src="images/gamecp/skins/17.png" alt="Skin id 17" /><br /><input type="radio" name="skin" value="17" /></span><span style="float: left; text-align: center; margin: 2px;"><img src="images/gamecp/skins/14.png" alt="Skin id 14" /><br /><input type="radio" name="skin" value="14" /></span><span style="float: left; text-align: center; margin: 2px;"><img src="images/gamecp/skins/20.png" alt="Skin id 20" /><br /><input type="radio" name="skin" value="20" /></span><span style="float: left; text-align: center; margin: 2px;"><img src="images/gamecp/skins/21.png" alt="Skin id 21" /><br /><input type="radio" name="skin" value="21" /></span>

</div>

Jak widać w moim kodzie wykorzystuję span. Próbowałem już z div i p, lecz dalej się to wszystko zlewało. Teraz rozumiesz?
//EDIT: Dobra, Websta mi pomógł. Dziękuję Ci za pomoc i stawiam reputację. Problem rozwiązał się po dodaniu do id skinmale i skinfemale overflow: hidden. Smile

Temat do zamknięcia.