Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [AJAX] Pojawiający się input
Emku
post
Post #1





Grupa: Zarejestrowani
Postów: 15
Pomógł: 1
Dołączył: 18.01.2013

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

Witam serdecznie,

Problem jest banalny, ale potrzebuję najlepsze rozwiązania, im szybciej tym lepiej.
Posiadam w html select z listą modeli motocykli. Na końcu jest pozycja "Inne", po wybraniu której powinien się pojawić input do którego można wpisać jaki konkretnie model.

Korzystamy oczywiście z jQuery.
Go to the top of the page
+Quote Post
sajegib
post
Post #2





Grupa: Zarejestrowani
Postów: 352
Pomógł: 59
Dołączył: 16.01.2013

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

Polecam koledze skorzystać z .change() i .show() w jquery, gdzie po zmianie .(change) na konkretna wartosc pokazujesz .show() konkretny input
Go to the top of the page
+Quote Post
Emku
post
Post #3





Grupa: Zarejestrowani
Postów: 15
Pomógł: 1
Dołączył: 18.01.2013

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

Ja bym chyba na select dodał onchange funkcyjkę z show jedynie.
Ale jak zidentyfikować, że wybrana została pozycja "Inne" ?

Ten post edytował Emku 18.01.2013, 10:10:42
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #4





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

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

Załóżmy, że tak wygląda nasz select:

[HTML] pobierz, plaintext 
  1. <select class="check">
  2. <option value="costam">Costam</option>
  3. <option value="inne">Inne</option>
  4. </select>
[HTML] pobierz, plaintext


Kod JS:

[HTML] pobierz, plaintext 
  1. $(function() {
  2. $('.check').change(function(){
  3.   if ($(this).val() == 'inne') {
  4.     $('body').append('<input type="text" />');
  5.   }
  6. });
  7. });
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Emku
post
Post #5





Grupa: Zarejestrowani
Postów: 15
Pomógł: 1
Dołączył: 18.01.2013

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

Już coraz bliżej.
Tylko takie rozwiązanie ma dwa minusy:
- input będzie sie pojawiał za każdym razem jak wybiorę jakiś model i z powrotem na "inne", wtedy po jakimś czasie mam sto inputów obok (IMG:style_emoticons/default/tongue.gif)
- wybieram "inne" - pojawia mi się input, wybieram z powrotem jakiś model - input nie znika.
Go to the top of the page
+Quote Post
sajegib
post
Post #6





Grupa: Zarejestrowani
Postów: 352
Pomógł: 59
Dołączył: 16.01.2013

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

Nadaj twojemu inputowi jakieś ID albo klasę i show/hide


[HTML] pobierz, plaintext 
  1. $(function() {
  2. $('.check').change(function(){
  3.   if ($(this).val() == 'inne') {
  4.     $('#input').show();
  5.   }
  6.   else{
  7.      $('#input').hide();
  8.   }
  9. });
  10. });
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Emku
post
Post #7





Grupa: Zarejestrowani
Postów: 15
Pomógł: 1
Dołączył: 18.01.2013

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

Noi bajobongo.
[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html lang="pl">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>bajeera</title>
  6. <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  7.  
  8. <script>
  9. $(function() {
  10.    	$('.check').change(function(){
  11.  
  12. 	if ($(this).val() == 'inne') {
  13. 		$('#inny_model').show();
  14. 	} else {
  15. 		$('#inny_model').hide();
  16. 	}
  17. 	});
  18. });
  19. </script>
  20. </head>
  21. <body>
  22.     <select class="check">
  23.     <option value="costam">Costam</option>
  24.     <option value="inne">Inne</option>
  25.     </select>
  26. 	<input style="display:none;" type="text" id="inny_model" />
  27. </body>
  28. </html>
[HTML] pobierz, plaintext


Działa jak należy.
Go to the top of the page
+Quote Post
sajegib
post
Post #8





Grupa: Zarejestrowani
Postów: 352
Pomógł: 59
Dołączył: 16.01.2013

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

Gratulacje :-)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: 27.09.2025 - 16:47
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn