[PHP][jQuery] Dynamiczny formularz z różnymi danymi Opcje

[pleban16]

Witam,
Zazwyczaj każdy problem rozwiązywałem sam, przy użyciu Google 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

[PHP] pobierz, plaintext 
<script type="text/javascript">
            $(document).ready(function(){
                // tworzymy zmienną i, wykorzystamy ją do identyfikowania wierszy
                // ustawiamy jej wartość 2, ponieważ jeden wiersz jest już w tabeli
                var i = 2;
                // tworzymy zmienną szablonWiersza i wczytujemy do niej szablon z textarea #szablon
                var szablonWiersza = jQuery.format($("#szablon").val());
                // tworzymy funkcję, która dodaje szablon do właściwej tabeli
                function dodajWiersz() {
                    var ii = i++;
                    // dodajemy wiersz do właściwej tabeli
                    $("#listaOsob tbody").append(szablonWiersza(ii));
                    // Nowy wiersz jest już widoczny.
                    // Każdy element nowego wiersza posiada swoje id
                    // tr na id: wiersz_2, ikona minus ma id: usunOsobe_2
                    // Do nowo dodanej ikony - dodajmy zdarzenie.
                    // W momencie kliknięcia minusa, wiersz zostanie usunięty.
                    $("#usunOsobe_" + ii).click(function(){
                        $("#wiersz_" + ii).remove();
                    });
                }
                // do przycisku #dodajOsobe dodajemy zdarzenie,
                // kliknięcie na przycisk plus wywoła fukcję dodajWiersz
                $("#dodajOsobe").click(dodajWiersz);
 
				$(".marka").change(function()
				 {
				 var id = $(this).val();
				 var dataString = 'id='+ id;
 
				 $.ajax
					  ({
						   type: "POST",
						   url: "ajax_model.php",
						   data: dataString,
						   cache: false,
						   success: function(html)
						   {
								$(".model").html(html);
						   }
					  });
				 });
            });
        </script>
[PHP] pobierz, plaintext 

plik ajax_model.php

[PHP] pobierz, plaintext 
<?php
      $mid = $_POST['id'];
      if(!empty($mid)) {
        include 'inc/db.php';
        $result2 = mysql_query("SELECT typ, adres_mac FROM magazyn_glowny WHERE typ=".$mid." ORDER BY adres_mac");
 
        while ($row = mysql_fetch_array($result2)) {
          $id = intval($row['typ']);
          $model = $row['adres_mac'];
          echo '<option value="'.$id.'">'.$model.'</option>';
        }
       }
?>
[PHP] pobierz, plaintext 

[/quote]

Kod formularza.

[quote]

[PHP] pobierz, plaintext 
echo"<form enctype=\"multipart/form-data\" method=\"post\" action=\"#\">
<input type=\"hidden\" name=\"wyslane\" value=\"TRUE\" />
<textarea id=\"szablon\" style=\"display:none;\" cols=\"1\" rows=\"1\">
            <tr id=\"wiersz_{0}\">
                <td>{0}.</td>
                <td>";include 'inc/db.php';
echo '<select name="marka[]" class="marka" width="25">'
        .'<option value="">--wybierz sprzęt--</option>';
        $result2 = mysql_query("SELECT id, nazwa FROM nazwa ORDER BY nazwa");
        while ($row = mysql_fetch_array($result2)) {
          $id = intval($row['id']);
          $marka = $row['nazwa'];
          echo '<option value="'.$id.'">'.$marka.'</option>';
        }
        echo '</select><br>';
echo"</td>
                        <td><select class=\"model\" name=\"model[]\">'
.'<option selected=\"selected\">--wybierz adres mac--</option>'
.'</select></td>
                <td><img src=\"../img/minus.png\" id=\"usunOsobe_{0}\" alt=\"usun\"></td>
            </tr>
        </textarea>";
 
include 'inc/db.php';
$zapytanie_monter = mysql_query ("SELECT * FROM monter ORDER BY nazwa ASC");
echo '<select name="monter">';
while($options = mysql_fetch_assoc($zapytanie_monter)) {
	echo '<option value="'.$options['nazwa'].'">'.$options['nazwa'].'</option>';
}
echo "</select>		
 
<table id=\"listaOsob\">
                <thead>
                    <tr>
                        <th>Lp</th>
                        <th>Nazwa</th>
						<th>Adres MAC</th>
                        <th>+/-</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th colspan=\"4\">
                            <input type=\"submit\" name=\"dodaj_z\" value=\"Zatwierdz\">
                        </th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>1.</td>
                        <td>";include 'inc/db.php';
echo '<select name="marka[]" class="marka" width="25">'
        .'<option value="">--wybierz sprzęt--</option>';
        $result2 = mysql_query("SELECT id, nazwa FROM nazwa ORDER BY nazwa");
        while ($row = mysql_fetch_array($result2)) {
          $id = intval($row['id']);
          $marka = $row['nazwa'];
          echo '<option value="'.$id.'">'.$marka.'</option>';
        }
        echo '</select><br>';
echo"</td>
                        <td><select class=\"model\" name=\"model[]\">'
.'<option selected=\"selected\">--wybierz adres mac--</option>'
.'</select></td>
                        <td><img src=\"../img/plus.png\" id=\"dodajOsobe\" alt=\"dodaj\"></td>
                    </tr>
                </tbody>
            </table>	
[PHP] pobierz, plaintext 

Ten post edytował pleban16 20.12.2013, 15:47:21

[bostaf]

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 
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:

[PHP] pobierz, plaintext 
$php_array = array(
  'm1' => 'MAC 1',
  'm2' => 'MAC 2',
  'm3' => 'MAC 3',
  'm4' => 'MAC 4'
);
echo json_encode($php_array);
[PHP] pobierz, plaintext 

Ten post edytował bostaf 1.01.2014, 22:57:47