Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][jQuery] Dynamiczny formularz z różnymi danymi
Forum PHP.pl > Forum > PHP
pleban16
Witam,
Zazwyczaj każdy problem rozwiązywałem sam, przy użyciu Google smile.gif Lecz tym razem nie mogę nic znaleźć.
Chce mieć dynamiczny formularz w którym wybiera się np. model routera a następnie adres MAC. Po wybraniu takiego adresu MAC, powinien być już nie dostępny dla kolejnego wyboru tego samego modelu. Mam już działający kod pod pierwszy wybór. Jeśli dodam kolejne pola z wyborem, nie działa już wybór adresu MAC w tym samym, nowym rzędzie danych. Jeśli zmienię w pierwszym rzędzie danych model routera to adres MAC można już wybrać w każdym rzędzie danych. Mogłoby to być gdyby nie to, że jeśli się wybierze inny model routera w np. 2 rzędzie danych to adresy mac nadal są z pierwszego modelu. Może lepiej będzie to zrozumiałe na zdjęciu.


Kod jQuery

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. // tworzymy zmienną i, wykorzystamy ją do identyfikowania wierszy
  4. // ustawiamy jej wartość 2, ponieważ jeden wiersz jest już w tabeli
  5. var i = 2;
  6. // tworzymy zmienną szablonWiersza i wczytujemy do niej szablon z textarea #szablon
  7. var szablonWiersza = jQuery.format($("#szablon").val());
  8. // tworzymy funkcję, która dodaje szablon do właściwej tabeli
  9. function dodajWiersz() {
  10. var ii = i++;
  11. // dodajemy wiersz do właściwej tabeli
  12. $("#listaOsob tbody").append(szablonWiersza(ii));
  13. // Nowy wiersz jest już widoczny.
  14. // Każdy element nowego wiersza posiada swoje id
  15. // tr na id: wiersz_2, ikona minus ma id: usunOsobe_2
  16. // Do nowo dodanej ikony - dodajmy zdarzenie.
  17. // W momencie kliknięcia minusa, wiersz zostanie usunięty.
  18. $("#usunOsobe_" + ii).click(function(){
  19. $("#wiersz_" + ii).remove();
  20. });
  21. }
  22. // do przycisku #dodajOsobe dodajemy zdarzenie,
  23. // kliknięcie na przycisk plus wywoła fukcję dodajWiersz
  24. $("#dodajOsobe").click(dodajWiersz);
  25.  
  26. $(".marka").change(function()
  27. {
  28. var id = $(this).val();
  29. var dataString = 'id='+ id;
  30.  
  31. $.ajax
  32. ({
  33. type: "POST",
  34. url: "ajax_model.php",
  35. data: dataString,
  36. cache: false,
  37. success: function(html)
  38. {
  39. $(".model").html(html);
  40. }
  41. });
  42. });
  43. });
  44. </script>


plik ajax_model.php

  1. <?php
  2. $mid = $_POST['id'];
  3. if(!empty($mid)) {
  4. include 'inc/db.php';
  5. $result2 = mysql_query("SELECT typ, adres_mac FROM magazyn_glowny WHERE typ=".$mid." ORDER BY adres_mac");
  6.  
  7. while ($row = mysql_fetch_array($result2)) {
  8. $id = intval($row['typ']);
  9. $model = $row['adres_mac'];
  10. echo '<option value="'.$id.'">'.$model.'</option>';
  11. }
  12. }
  13. ?>
[/quote]

Kod formularza.

[quote]
  1. echo"<form enctype=\"multipart/form-data\" method=\"post\" action=\"#\">
  2. <input type=\"hidden\" name=\"wyslane\" value=\"TRUE\" />
  3. <textarea id=\"szablon\" style=\"display:none;\" cols=\"1\" rows=\"1\">
  4. <tr id=\"wiersz_{0}\">
  5. <td>{0}.</td>
  6. <td>";include 'inc/db.php';
  7. echo '<select name="marka[]" class="marka" width="25">'
  8. .'<option value="">--wybierz sprzęt--</option>';
  9. $result2 = mysql_query("SELECT id, nazwa FROM nazwa ORDER BY nazwa");
  10. while ($row = mysql_fetch_array($result2)) {
  11. $id = intval($row['id']);
  12. $marka = $row['nazwa'];
  13. echo '<option value="'.$id.'">'.$marka.'</option>';
  14. }
  15. echo '</select><br>';
  16. echo"</td>
  17. <td><select class=\"model\" name=\"model[]\">'
  18. .'<option selected=\"selected\">--wybierz adres mac--</option>'
  19. .'</select></td>
  20. <td><img src=\"../img/minus.png\" id=\"usunOsobe_{0}\" alt=\"usun\"></td>
  21. </tr>
  22. </textarea>";
  23.  
  24. include 'inc/db.php';
  25. $zapytanie_monter = mysql_query ("SELECT * FROM monter ORDER BY nazwa ASC");
  26. echo '<select name="monter">';
  27. while($options = mysql_fetch_assoc($zapytanie_monter)) {
  28. echo '<option value="'.$options['nazwa'].'">'.$options['nazwa'].'</option>';
  29. }
  30. echo "</select>
  31.  
  32. <table id=\"listaOsob\">
  33. <thead>
  34. <tr>
  35. <th>Lp</th>
  36. <th>Nazwa</th>
  37. <th>Adres MAC</th>
  38. <th>+/-</th>
  39. </tr>
  40. </thead>
  41. <tfoot>
  42. <tr>
  43. <th colspan=\"4\">
  44. <input type=\"submit\" name=\"dodaj_z\" value=\"Zatwierdz\">
  45. </th>
  46. </tr>
  47. </tfoot>
  48. <tbody>
  49. <tr>
  50. <td>1.</td>
  51. <td>";include 'inc/db.php';
  52. echo '<select name="marka[]" class="marka" width="25">'
  53. .'<option value="">--wybierz sprzęt--</option>';
  54. $result2 = mysql_query("SELECT id, nazwa FROM nazwa ORDER BY nazwa");
  55. while ($row = mysql_fetch_array($result2)) {
  56. $id = intval($row['id']);
  57. $marka = $row['nazwa'];
  58. echo '<option value="'.$id.'">'.$marka.'</option>';
  59. }
  60. echo '</select><br>';
  61. echo"</td>
  62. <td><select class=\"model\" name=\"model[]\">'
  63. .'<option selected=\"selected\">--wybierz adres mac--</option>'
  64. .'</select></td>
  65. <td><img src=\"../img/plus.png\" id=\"dodajOsobe\" alt=\"dodaj\"></td>
  66. </tr>
  67. </tbody>
  68. </table>
bostaf
Cytat(pleban16 @ 20.12.2013, 15:37:15 ) *
Po wybraniu takiego adresu MAC, powinien być już nie dostępny dla kolejnego wyboru tego samego modelu.

Fajne zagadnienie. Próbowałem zakombinować tak jak to opisałeś, ale po kilku godzinach rzeźbienia wpadłem na pomysł, że może niekoniecznie trzeba usuwać danego MACa z listy, a zamiast tego zresetować listę, która miała tego MACa wybranego? Tak jak ty chcesz też da się zrobić, ale to będzie dłuższe i nie jestem pewien czy funkcjonalnie konieczne.
Zobacz to co wymyśliłem: http://jsfiddle.net/bostaf/7va9z/. Sam HTML nie jest oparty na Twoim, ale może wykorzystane funkcje pomogą Ci dostosować kod JS do swoich potrzeb. Pierwsza kolumna selectów (ta z routerami) nie ma żadnej funkcjonalności, jest tylko dla zobrazowania po co jest grupowanie selectów.
Poklikaj sobie po tej drugiej kolumnie i przeanalizuj kod.

EDIT: Zapomniałem napisać, że listę domyślnych opcji dla selectów:
[JAVASCRIPT] pobierz, plaintext
  1. var adresy_mac = {"m1":"MAC 1","m2":"MAC 2","m3":"MAC 3","m4":"MAC 4"};
[JAVASCRIPT] pobierz, plaintext

możesz przekazać z kodu PHP funkcją json_encode:
  1. $php_array = array(
  2. 'm1' => 'MAC 1',
  3. 'm2' => 'MAC 2',
  4. 'm3' => 'MAC 3',
  5. 'm4' => 'MAC 4'
  6. );
  7. echo json_encode($php_array);
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.