Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [AJAX][JavaScript] Skrypt dodawania inputów
nikestylex7
post
Post #1





Grupa: Zarejestrowani
Postów: 386
Pomógł: 7
Dołączył: 22.04.2010
Skąd: Ziemia

Ostrzeżenie: (20%)
X----


Witam napisałem skrypt który dodaje po kliknięciu inputy. Do każdego inputa jest kolejny button obok, który odsłania dodatkowe opcje do wypełnienia lecz one się nie pojawiają. Problem jest w kodzie który ma się właśnie pojawiać bo gdy go zastąpię obojętnie czym np : "dupa" to już działa i się pojawia , więc nie wiem co jest nie tak może opcje zwiększania nazwy o +1. Mam też pytanie jak zrobić żeby ilość inputów była maksymalnie równa 10. a jak ktoś dalej będzie chciał powiększyć to pokaże się napis nie można dodać kolejnego inputa.

  1. <script>$(document).ready(function(){$('input[name="dodaj"]').click(function(){$('#inputy').append("<div class='kombi-row'><div class='kombi-line'><input type='text' name='imie" + ($('input[type= \"text\"]').size() + 1) + "'/></div><div class='kombi-line'> X </div><div class='kombi-line'><input type='text' name='imie" + ($('input[type= \"text\"]').size() + 1) + "'/></div><div class='kombi-line'> <input type='button' name='odkryj' onClick=showHide('jakisid" + ($('input[type= \"text\"]').size() + 1) + "','but" + ($('input[type= \"text\"]').size() + 1) + "') id='but" + ($('input[type= \"text\"]').size() + 1) + "' value='+'/></div><div style='display:none;' id='jakisid" + ($('input[type= \"text\"]').size() + 1) + "'><div>
  2. <span class='label'>Dodatkowe dane:</span>
  3. </div>
  4. <div id='inputy'>
  5. <div class='kombi-row'>
  6. <div>
  7. <span class='label'>Pozycja w lidze:</span>
  8. </div>
  9. <div class='kombi-line'><input type='text' name='mecz2" + ($('input[type= \"text\"]').size() + 1) + "' title='min. 3 znaki max. 16'/></div>
  10. <div class='kombi-line'>X</div>
  11. <div class='kombi-line'><input type='text' name='mecz22" + ($('input[type= \"text\"]').size() + 1) + "' title='min. 3 znaki max. 16'/></div>
  12. </div>
  13.  
  14. <div class='kombi-row'>
  15. <div>
  16. <span class='label'>Forma:</span>
  17. </div>
  18. <div class='kombi-line'><input type='text' name='mecz3" + ($('input[type= \"text\"]').size() + 1) + "' title='min. 3 znaki max. 16'/></div>
  19. <div class='kombi-line'>X</div>
  20. <div class='kombi-line'><input type='text' name='mecz33" + ($('input[type= \"text\"]').size() + 1) + "' title='min. 3 znaki max. 16'/></div>
  21. </div>
  22. <div class='kombi-row'>
  23. <div>
  24. <span class='label'>Ostatnie 5 spotkań:</span>
  25. </div>
  26. <div class='kombi-line'><input type='radio' name='mecz4" + ($('input[type= \"radio\"]').size() + 1) + "' value='1' checked='checked' />Zwycięstwo<input type='radio' name='mecz4" + ($('input[type= \"radio\"]').size() + 1) + "' value='2' checked='checked' />Remis<input type='radio' name='mecz4" + ($('input[type= \"radio\"]').size() + 1) + "' value='3' checked='checked' />Porażka</div><br />
  27. <div class='kombi-line'><input type='radio' name='mecz5" + ($('input[type= \"radio\"]').size() + 1) + "' value='1' checked='checked' />Zwycięstwo<input type='radio' name='mecz5" + ($('input[type= \"radio\"]').size() + 1) + "' value='2' checked='checked' />Remis<input type='radio' name='mecz5" + ($('input[type= \"radio\"]').size() + 1) + "' value='3' checked='checked' />Porażka</div><br />
  28. <div class='kombi-line'><input type='radio' name='mecz6" + ($('input[type= \"radio\"]').size() + 1) + "' value='1' checked='checked' />Zwycięstwo<input type='radio' name='mecz6" + ($('input[type= \"radio\"]').size() + 1) + "' value='2' checked='checked' />Remis<input type='radio' name='mecz6" + ($('input[type= \"radio\"]').size() + 1) + "' value='3' checked='checked' />Porażka</div><br />
  29. <div class='kombi-line'><input type='radio' name='mecz7" + ($('input[type= \"radio\"]').size() + 1) + "' value='1' checked='checked' />Zwycięstwo<input type='radio' name='mecz7" + ($('input[type= \"radio\"]').size() + 1) + "' value='2' checked='checked' />Remis<input type='radio' name='mecz7" + ($('input[type= \"radio\"]').size() + 1) + "' value='3' checked='checked' />Porażka</div><br />
  30. <div class='kombi-line'><input type='radio' name='mecz8" + ($('input[type= \"radio\"]').size() + 1) + "' value='1' checked='checked' />Zwycięstwo<input type='radio' name='mecz8" + ($('input[type= \"radio\"]').size() + 1) + "' value='2' checked='checked' />Remis<input type='radio' name='mecz8" + ($('input[type= \"radio\"]').size() + 1) + "' value='3' checked='checked' />Porażka</div><br />
  31. </div>
  32. </div></div></div>"); }); }); </script >


Ten post edytował nikestylex7 18.10.2012, 11:01:51
Go to the top of the page
+Quote Post
wookieb
post
Post #2





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk




Zarąbisty opis - a kodu brak.


--------------------
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #3





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

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


Ale sieczka, wpakowałeś wszystko w skrypt? Co do drugiego pytania, zliczaj zwyczajnie ile jest inputów o danej class np. i jeśli się okaże że 10 to nie dodajesz już nowego.

Czytam ten kod i czytam i zrozumieć nie mogę o co tu w tym wszystkim chodzi. Oddziel HTML od jQuery. Przedstaw formularz w czystym HTML, jakie zawiera pola i przyciski i napisz co chcesz by się z nim działo po kliknięciu w co. Np.

  1. <input type="text" /><a href="#">klik</a> <!-- po kliknieciu w link dodanie kolejnego inputa text -->
  2. </form>


Ten post edytował b4rt3kk 18.10.2012, 11:13:24


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
nikestylex7
post
Post #4





Grupa: Zarejestrowani
Postów: 386
Pomógł: 7
Dołączył: 22.04.2010
Skąd: Ziemia

Ostrzeżenie: (20%)
X----


tylko że ja mam kod html wpakowany w skrypt.

  1. <script>$(document).ready(function(){$('input[name="dodaj"]').click(function(){$('#inputy').append("<div class='kombi-row'><div class='kombi-line'><input type='text' name='imie" + ($('input[type= \"text\"]').size() + 1) + "'/></div><div class='kombi-line'> X </div><div class='kombi-line'><input type='text' name='imie" + ($('input[type= \"text\"]').size() + 1) + "'/></div><div class='kombi-line'> <input type='button' name='odkryj' onClick=showHide('jakisid" + ($('input[type= \"text\"]').size() + 1) + "','but" + ($('input[type= \"text\"]').size() + 1) + "') id='but" + ($('input[type= \"text\"]').size() + 1) + "' value='+'/></div><div style='display:none;' id='jakisid" + ($('input[type= \"text\"]').size() + 1) + "'>TUTAJ BYŁ KOD Z INPUTAMI DO WYSWIETLENIA JAKO DODATKOWE</div></div></div>"); }); }); </script >


Ten kod dodaje mi inputy. widzimy tutaj miejsce w ktorym mialem formularz z dodatkowymi danymi. Chciałbym to jakoś uporządkować. Czyli skrypt dodaje mi inputy po kliknieciu butonu. Jak doda inputa to razem z nim dodaje dodatkowe opcje czyli button jak nacisniemy to wyswietla formularz z dodatkowymi danymi. To jest takie jedno w drugim. Jeszcze raz klikam buton dodaje inputa klikam obok buton pojawia mi się dodatkowa opcja do tego inputa.

Mogę to jeszcze jakoś wytłumaczyć. To jest na takiej zasadzie najpierw imie i nazwisko osoby pierwszej klikamy plus wyswietlaja sie dane dodatkowa wiek itp dodajemy plus i dodaje nam się kolejny input i to samo .

Ten post edytował nikestylex7 18.10.2012, 11:37:38
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #5





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

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


Owszem, można się tak bawić, ale po co? To strasznie upierdliwe. Mam dwie propozycje. Skoro wiesz, że ma być max. 10 takich pól, to najpierw je sobie przygotowujesz:

  1. <div id="box1"><!-- zawartosc boxa --></div>
  2. <div id="box2"><!-- zawartosc boxa --></div>
  3. <div id="box3"><!-- zawartosc boxa --></div>
  4. <div id="box4"><!-- zawartosc boxa --></div>
  5. <!-- itd. -->


możesz wygenerować to np. w pętli PHP. Nadajesz w css lub za pomocą jQuery tym które mają być z początku niewidoczne display: none, po kliknięciu zmieniasz na display: block. Przy okazji to rozwiązuje problem dodawania pól powyżej 10-ciu.

Druga opcja, robisz jeden box:

  1. <div id="container">
  2. <div id="box1" class="box"><!-- zawartosc boxa --></div>
  3. </div>


i go kopiujesz w całości za pomocą jQuery, ew. później zmieniasz za pomocą jQuery czy to id, czy to klasę, czy też inne właściwości czy treści dzieci tego elementu, będzie to bardziej przejrzyste i przyjazne w edycji.

http://api.jquery.com/clone/

Ten post edytował b4rt3kk 18.10.2012, 11:39:06


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
nikestylex7
post
Post #6





Grupa: Zarejestrowani
Postów: 386
Pomógł: 7
Dołączył: 22.04.2010
Skąd: Ziemia

Ostrzeżenie: (20%)
X----


hmmm czyli całkowicie to zmienić i zastąpić czymś w podobie tego
  1. $(INPUT).clone().val('').appendTo(CONTAINER);
po kliknięciu ma dodać inputa i tyle. a jak zrobić żeby odkrywało po kliknięciu inputy z display none ale nie że wszystkie naraz tylko pojedyńczo ?


Ten post edytował nikestylex7 18.10.2012, 11:50:26
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #7





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

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


Cytat(nikestylex7 @ 18.10.2012, 12:49:52 ) *
hmmm czyli całkowicie to zmienić i zastąpić czymś w podobie tego
  1. $(INPUT).clone().val('').appendTo(CONTAINER);
po kliknięciu ma dodać inputa i tyle. a jak zrobić żeby odkrywało po kliknięciu inputy z display none ale nie że wszystkie naraz tylko pojedyńczo ?


Tak najlepiej, po co sobie życie utrudniać. Nadaj inputom kolejne id i albo sprawdzaj które są widoczne, pobieraj id i odsłaniaj ten o kolejnym id, albo nadaj id przyciskom, które mają je odsłaniać jak i inputom i odsłaniaj ten dla którego przycisk został kliknięty. Też musisz pobrać id i sprawdzić kolejne.


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
nikestylex7
post
Post #8





Grupa: Zarejestrowani
Postów: 386
Pomógł: 7
Dołączył: 22.04.2010
Skąd: Ziemia

Ostrzeżenie: (20%)
X----


mógłbyś podać jakiś przykład do tego co powiedziałeś ? z js jestem noga a w php tego nie da się zrobić smile.gif
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #9





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

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


Proszę bardzo, oto przykład.

  1. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  2. <script type="text/javascript">
  3. $(function(){
  4. $('.button').click(function(){
  5. show = 'inp' + ($('.field:visible').length+1);
  6. $('input[id='+show+']').show();
  7. });
  8. });
  9. </head>
  10.  
  11.  
  12. <input id="inp1" type="text" class="field" />
  13. <input id="inp2" type="text" class="field" />
  14. <input id="inp3" type="text" class="field" style="display: none;"/>
  15. <input id="inp4" type="text" class="field" style="display: none;"/>
  16. <input id="inp5" type="text" class="field" style="display: none;"/>
  17. <input id="inp6" type="text" class="field" style="display: none;"/>
  18. <input id="inp7" type="text" class="field" style="display: none;"/>
  19. <input id="inp8" type="text" class="field" style="display: none;"/>
  20.  
  21. <input type="submit" class="button" value="Kliknij mnie" />


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
nikestylex7
post
Post #10





Grupa: Zarejestrowani
Postów: 386
Pomógł: 7
Dołączył: 22.04.2010
Skąd: Ziemia

Ostrzeżenie: (20%)
X----


a jak do tego dodać info że jak 10 inputów zostanie już odkrytych pokaże że większa ilość jest niemożliwa? Zliczyć inputy ? jakiś przykład ?
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #11





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

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


Wystarczy dodać do poprzedniej funkcji:

  1. $(function(){
  2. $('.button').click(function(){
  3. show = 'inp' + ($('.field:visible').length+1);
  4. if ($('.field:visible').length+1<=10) {
  5. $('input[id='+show+']').show();
  6. } else {
  7. alert('juz jest max inputow');
  8. }
  9. });
  10. });


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
nikestylex7
post
Post #12





Grupa: Zarejestrowani
Postów: 386
Pomógł: 7
Dołączył: 22.04.2010
Skąd: Ziemia

Ostrzeżenie: (20%)
X----


hmm a jak zastąpić alert żeby zamiast niego pojawił się wciśnięty div z komunikatem?
Go to the top of the page
+Quote Post
wpaski
post
Post #13





Grupa: Zarejestrowani
Postów: 206
Pomógł: 6
Dołączył: 25.12.2011

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


nie do końca rozumiem co to oznacza wciśnięty (jeśli style to poprostu ostyluj),ale może to?:

  1.  
  2.  
  3. <head>
  4. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  5. <script type="text/javascript">
  6. $(function(){
  7. $('.button').click(function(){
  8. show = 'inp' + ($('.field:visible').length+1);
  9. if($('.field:visible').length+1<=10) {
  10. console.log(show);
  11. $('input[id='+show+']').show();
  12. } else {
  13. $('div[id=komunikat]').show();
  14. }
  15. });
  16. });
  17. </script>
  18. </head>
  19.  
  20.  
  21. <input id="inp1" type="text" class="field" />
  22. <input id="inp2" type="text" class="field" />
  23. <input id="inp3" type="text" class="field" style="display: none;"/>
  24. <input id="inp4" type="text" class="field" style="display: none;"/>
  25. <input id="inp5" type="text" class="field" style="display: none;"/>
  26. <input id="inp6" type="text" class="field" style="display: none;"/>
  27. <input id="inp7" type="text" class="field" style="display: none;"/>
  28. <input id="inp8" type="text" class="field" style="display: none;"/>
  29. <input id="inp9" type="text" class="field" style="display: none;"/>
  30. <input id="inp10" type="text" class="field" style="display: none;"/>
  31.  
  32. <div id="komunikat" class="komunikat" style="display: none;">
  33.  
  34. Jakiś komunikat
  35.  
  36. </div>
  37.  
  38. <input type="submit" class="button" value="Kliknij mnie" />


Ten post edytował wpaski 19.10.2012, 17:25:58
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #14





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

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


Może być i tak, jak wpaski zaproponował. smile.gif


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 22.08.2025 - 01:03