Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Odblokowywanie inputa za pomocą listy select
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
jurcio6
Witam.

Mam problem, z którym nie mogę sobie poradzić - otóż mam formularz, w którym jest kilka pól, ale skupię się tylko na trzech: lista wyboru oraz dwa text boxy. Czy istnieje możliwość, aby napisać funkcję, która spowoduje to, że gdy na liście select zostanie wybrana opcja o konkretnej nazwie/id, to wówczas odblokowane zostaną te dwa pola tekstowe (zakładając, że przy wczytywaniu strony sprawdzam, czy został wysłany formularz i czy odpowiednie pole na liście zostało zaznaczone - jeśli tak, to wtedy już przy wczytaniu strony text boxy są odblokowane, jeśli nie, to są 'disabled')? Formularz obsługuję PHP'em.

Przykład:
  1. <form name="abc" id="abc">
  2. <select name="select_dev">
  3. <option id="opt1">opcja 1</option>
  4. <option id="opt2">opcja 1</option>
  5. <option id="opt3">podaj inny zakres</option>
  6. <input type="text" name="tekst_1" disabled="true" />
  7. <input type="text" name="tekst_2" disabled="true" />
  8.  
  9. <input type="submitt" value="wyślij" />
  10. </form>

Gdy wybrana zostanie opcja numer 3 (onClick czy coś w tym stylu), wówczas odblokowują się pola input tekst_1 i tekst_2. Dodatkowo przy wczytywaniu strony sprawdzam, czy formularz został wysłany (to PHPem), jeśli tak, to zaznaczam odpowiednie opcje w formularzu (również PHP), natomiast Java powinna sprawdzić, czy w select jest zaznaczona opcja 3 - jeśli tak, to ma odblokować texty - taka funkcja typu eval.

Czy może mi ktoś z tym pomóc? Jakieś pomysły?
jaworr
  1. $('select').change(function (){
  2. var selected = $(this).attr("id");
  3. if(selected == "opt3"){
  4. $('input').removeAttr("disabled");
  5. }
  6. });


Coś w ten deseń, można zrobić za pomocą jQuery. Polecam dokumentacje wszystko ładnie opisane.

Jeśli chodzi o PHP to instrukcje warunkowe gdzie sprawdzasz wartości przesłane z formularza i wywołujesz HTML'a zaznaczającego odpowiednie opcje.

kaznodzieja
Witam!
Właśnie poszukuje takiego rozwiązania, ale zaproponowane przez jaworr mi nie działa.
kamil4u
Umieść kod np. na http://jsfiddle.net/

Można to równie łatwo osiągnąć bez jquery, więc jak nie chcesz używać biblioteki to napisz to dam Ci jakieś rady. Chociaż zasada jest identyczna jak tak pokazana przez ~jaworr
jurcio6
W zasadzie bibliotekę jQuerry i tak mam podpiętą, więc sądzę, iż będzie to najprostsze rozwiązanie. Jeśli o PHP chodzi, to mam już wszystko zrobione, tyle, że sprawdzanie opcji po wysłaniu formularza jest tu dla mnie zbędne - chodzi o zmianę wyglądu formularza dynamicznie, po wybraniu pozycji z listy przez użytkownika, więc raczej PHP na nic się tu zda.

Dzięki za propozycje, postaram się coś wymodzić, choć w JS poruszam się jeszcze po omacku.. smile.gif

Może ktoś ma ewentualnie jakieś gotowe propozycje?

//EDIT:
http://jsfiddle.net/K9whM/

Najprostsza rzecz nie działa.. jakby funkcja change w ogóle nie śmigała.
kaznodzieja
Udało mi się coś takiego wymodzić i działa, oczywiście na jquery. Przepraszam za brzydki kod ale wycinałem to z działającego skryptu, przetestowałem to w takiej formie jak jest wklejone.
Jak wybierze pole inne to input stanie się aktywny, jak zmienisz pole z inne na inną wartość to input będzie nie aktywny.

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2. <select id="czesci" class="czesci" name="czesci" >
  3. <option selected="selected" ></option>
  4. <option>aaa</option>
  5. <option>bbb</option>
  6. <option>inne</option>
  7. </select>
  8.  
  9. <input id="cos" disabled="disabled" />
  10. <script>
  11. $(".czesci").change(function () {
  12. var str = "";
  13. $(".czesci option:selected").each(function () {
  14. str += $(this).text();
  15. if(str == "inne"){
  16. $("#cos").removeAttr("disabled");
  17. }else{
  18. $("#cos").attr("disabled", "true");
  19. }
  20. });
  21. }).change();
  22. </script>
jurcio6
Mnie również się już udało to zrobić smile.gif

http://jsfiddle.net/K9whM/5/

Brakuje mi jedynie funkcji, która sprawdza na początku, czy została wybrana dana opcja po wysłaniu formularza, ale to już zrobię sobie php'em smile.gif Dzięki za pomoc.

EDIT:
Dodałem jeszcze jedną linijkę, która podczas ponownego blokowania pola przez wybranie innej opcji z listy, usuwa wpisaną wartość z inputa:
http://jsfiddle.net/K9whM/7/
by_ikar
A ja bym to ugryzł tak: http://jsfiddle.net/K9whM/9/ lub tylko z blokowaniem inputów: http://jsfiddle.net/K9whM/10/ wink.gif
jurcio6
Myślałem już o chowaniu ich - być może jest to faktycznie lepsza metoda, bo czego nie widzi użytkownik, tego nie będzie tykał smile.gif
potreb
Czego nie widzi użytkownik widzi użyszkodnik smile.gif Więc lepiej pomyśl czy twoja metoda przy okazji będzie bezpieczna smile.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.