Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][JavaScript][HTML] Dynamiczne tworzenie listy select + input wraz z pętlą mysql.
Forum PHP.pl > Forum > Przedszkole
Giluś
Hej, posiadam taki kod:

  1. <?php
  2. echo '<select name="opcja">';
  3. $wynik2 = mysql_query("SELECT * FROM opcje") or die('Błąd zapytania');
  4. while($r2 = mysql_fetch_assoc($wynik2)) {
  5. echo '<option value="'.$r2['id'].'">'.$r2['nazwa'].' / '.$r2['limit3'].' / '.$r2['limit2'].'</option>';
  6. }
  7. </select>
  8. <br />
  9.  
  10. Opcja 1:<br />
  11. <input type="text" name="o1" value=""/><br />
  12.  
  13. Opcja 2:<br />
  14. <input type="text" name="o2" value=""/><br />
  15. <p id="usun">Usuń</p>


I teraz chciałbym dynamicznie tworzyć w nieskończoność takie pola (czyli: Select/Opcja1/Opcja2 i guzik do usuwania wybranego "pola")
Po naciśnięciu jakiegoś guzika tworzyły by się automatycznie takie pola, później chciałbym obrabiać to w PHP..

Dodam jeszcze, że zapytanie do MySQL w każdym "polu" jest identyczne, oraz skrypt nie musi być jakoś mega optymalny, bo jest to do zastosowań domowych wiec nie będzie on narażony na miliony zapytań smile.gif

Nie potrafię ogarnąć jak tworzyć ten SELECT i później uzupełnić go w option'y które pochodzą z MySQL'a..

Może Wy mi coś pomoże ?

*użyte słowo "pole" oznacza cały fragment tego wyżej kodu.


Pozdrawiam i z góry dziękuje za pomoc smile.gif
gorden
1. javascript zdarzenie onclick
2. wysyłasz wiadomośc ajaxem do serwera co kliknął i w zależności odsyłasz wyniki
3. na tablicy wyników zapytania użyj fukncji json_encode
4. dane za pomocą javascript pobierz w formacie json
5. masz czystą tablicę z wynikami select, użyj pętli w js do wyświetlenia danych
6. ggwp
Giluś
Cytat(gorden @ 11.08.2014, 20:33:53 ) *
6. ggwp



Hmm, co to oznacza ?
golabow
good game, well played
Giluś
Hej, dzięki bardzo za pomoc z opisaniem jak to mniej więcej zrobić, lecz mam pewien problem, ale najpierw mój kod:

[JAVASCRIPT] pobierz, plaintext
  1.  
  2. $(document).ready(function() {
  3.  
  4. z = 0;
  5. var url="ajax.php";
  6.  
  7.  
  8. $("#klik").click(function(){
  9.  
  10. var myDiv = document.getElementById("myDiv");
  11.  
  12.  
  13. var selectList = document.createElement("select");
  14. selectList.setAttribute("id", "mySelect");
  15. selectList.setAttribute('name', 'op['+(z++)+'][id]');
  16. myDiv.appendChild(selectList);
  17.  
  18. for (var i = 0; i < 1; i++) {
  19. $.getJSON(url,function(data){
  20. $.each(data.op, function(i,op){
  21. var option = document.createElement("option");
  22. option.setAttribute("value", op.id);
  23. option.text = ""+op.nazwa+" / "+op.limit3+" / "+op.limit2+"";
  24. selectList.appendChild(option);
  25.  
  26. });
  27. });
  28. }
  29.  
  30. var br = document.createElement("br");
  31. myDiv.appendChild(br);
  32.  
  33. var input = document.createElement('input');
  34. input.setAttribute('name', 'op['+(z++)+'][opcja1]');
  35. myDiv.appendChild(input);
  36.  
  37. var br = document.createElement("br");
  38. myDiv.appendChild(br);
  39.  
  40. var input2 = document.createElement('input');
  41. input2.setAttribute('name', 'op['+(z++)+'][opcja2]');
  42. myDiv.appendChild(input2);
  43.  
  44.  
  45. var br = document.createElement("br");
  46. myDiv.appendChild(br);
  47. var br = document.createElement("br");
  48. myDiv.appendChild(br);
  49.  
  50.  
  51.  
  52. });
  53.  
  54. });
[JAVASCRIPT] pobierz, plaintext


  1. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
  2. <form action="" method="post">
  3. <div id="myDiv"></div><br />
  4. <input type="button" value="Dodaj" id="klik">
  5. <input type="submit" value="Guzik." />
  6. </form>


  1. <?php
  2. require_once('sql.php');
  3.  
  4. $var = array();
  5.  
  6. $wynik2 = mysql_query("SELECT * FROM opcje") or die('Błąd zapytania');
  7. while($obj = mysql_fetch_object($wynik2)) {
  8. $var[] = $obj;
  9. }
  10. echo '{"op":'.json_encode($var).'}';
  11.  
  12.  
  13.  
  14. ?>


Prawie wszystko działa jak należy..
- Nie wiem jak zrobić usunięcie danego wiersza..
- Oraz nie wiem jak zrobić aby ta moja lista select miała takie samo "z" - id jak i 2 poniżej inputy..

Kod
Edit:
Chociaż wstępnie chyba wiem, jak to zrobić:

Pod:
"var myDiv = document.getElementById("myDiv");"
Dodać:
"u = z++;"

I później wszystkie "z++" pozamieniać na "u"..

I chyba powinno być dobrze co nie ?

Tak wiec pozostałby jedynie jeden problem z usunięciem danego wiersza :)


I to chyba wszystko co nie wiem jak zrobić, może mi podpowiecie, ew. coś poprawicie..


Pozdrawiam i z góry bardzo dziękuje za pomoc smile.gif
gorden
po pierwsze skoro zaimplementowałeś do swojego kodu jQuery, to używaj go w pełni.. Twój problem za pomocą jQ można banalnie prosto rozwiązać, ale na początek kilka linków z dokumentacji:
http://api.jquery.com/jquery/ - jeśli opanujesz korzystanie z tego, Twój kod będzie co najmniej 2x krótszy, głównie chodzi tu o korzystanie z selektorów CSS. Korzystaj też z tego zamiast "createElement"
http://api.jquery.com/attr/ - zamiast setAttribute
http://api.jquery.com/append/ - zamiast appendChild, ale możesz użyć selektorów z użyciu jQuery() ($())

dobrze że przynajmniej zrozumiałeś mój pierwszy post i zastosowałeś się do instrukcji

co do samego problemu z usuwaniem elementów, nie wiem do końca o co Ci chodzi (który element chcesz usunąć), ale selektory + http://api.jquery.com/remove/ jest Twoim przyjacielem i ułatwi Ci życie. jeśli masz samo id elementu to wystarczy $("#id").remove()
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.