[PHP][HTML][JavaScript] Dynamiczne kopiowanie elementów strony po naciśnięciu przycisku. Opcje

[Giluś]

Hej,

Chciałbym na stronie zrobić dynamiczne tworzenie input, tak że można ich stworzyć nawet i 100 i zawsze wyglądają tak samo.

Mam taki kod:

[PHP] pobierz, plaintext 
<div class="row">
 
								<div class="col-lg-2">
									<div class="form-group">
											<input class="form-control" name="model" placeholder="Kod towaru">
									</div>
                                </div>
 
								<div class="col-lg-2">
									<div class="form-group">
											<input class="form-control" name="model" placeholder="Nazwa towaru">
									</div>
                                </div>
 
								<div class="col-lg-2">
									<div class="form-group">
											<input class="form-control" name="model" placeholder="Ilość">
									</div>
                                </div>
 
								<div class="col-lg-2">
									<div class="form-group">
											<input class="form-control" name="model" placeholder="Wartość całkowita">
									</div>
                                </div>
 
								<div class="col-lg-2">
									<div class="form-group">
											<select name="klient" class="form-control">
												 <?php
												$mysql_klient = mysql_query("SELECT * FROM klient") or die('Błąd zapytania'); 
 
												if(mysql_num_rows($mysql_klient) > 0) { 
													while($rklient = mysql_fetch_assoc($mysql_klient)) { 
														echo '<option value="'.$rklient['id'].'">'.$rklient['imie'].' '.$rklient['nazwisko'].'</option>';
													} 
												} 
												?>
                                            </select>
									</div>
                                </div>
 
								<div class="col-lg-2">
									<div class="form-group">
											<select name="klient" class="form-control">
												<?php
												$mysql_sam = mysql_query("SELECT * FROM samochod") or die('Błąd zapytania'); 
 
												if(mysql_num_rows($mysql_sam) > 0) { 
													while($rsam = mysql_fetch_assoc($mysql_sam)) { 
														echo '<option value="'.$rsam['id'].'">'.$rsam['model'].' '.$rsam['marka'].'</option>';
													} 
												} 
												?>
                                            </select>
									</div>
                                </div>
 
                            </div>
[PHP] pobierz, plaintext 

I chciałbym aby po naciśnięciu przycisku np.: "Dodaj" powielało się ten cały kod, tylko wiadomo później trzeba zrobić odpowiednie name="" tak aby rozpoznać je po stronie PHP..

Dodatkowo chciałbym zrobić tak aby po wyborze Klienta z pierwszej listy (select) dynamicznie się wyświetlała lista z Samochodami (drugi select) dla danego klienta, nie wiem zbytnio jak to zrobić.


W sumie poradziłbym sobie z tworzeniem tych samych gołych inputów, ale nie wiem jak później dodać ten kod PHP, Divy itd.., dlatego liczę na waszą pomoc (IMG:style_emoticons/default/smile.gif)


Pozdrawiam i z góry bardzo dziękuje za pomoc.

[rad11]

Mozesz to zrobic na dwa sposoby uzywajac np funkcji ajax lub load. Tak wiec:

[PHP] pobierz, plaintext 
<div class="form-group">
    <select name="klient" class="form-control">
        <?php
        $mysql_klient = mysql_query("SELECT * FROM klient") or die('Błąd zapytania');
 
        if (mysql_num_rows($mysql_klient) > 0) {
            while ($rklient = mysql_fetch_assoc($mysql_klient)) {
                echo '<option value="' . $rklient['id'] . '">' . $rklient['imie'] . ' ' . $rklient['nazwisko'] . '</option>';
            }
        }
        ?>
    </select>
</div>
 
 
<div class="col-lg-2">
    <div class="form-group" id="cars">
 
    </div>
</div>
<script>
 
    $(document).ready(function () {
        $('[name=klient]').on('change', function () {
            var id_klient = $(this).val();
 
            $("#cars").load("/ajax/option.php", {id_klient: id_klient});
        });
    });
 
</script>
[PHP] pobierz, plaintext 

plik option.php

[PHP] pobierz, plaintext 
<select name="klient" class="form-control">
    <?php
    $mysql_sam = mysql_query("SELECT * FROM samochod WHERE id_klient = " . $_POST['id_klient'] . "") or die('Błąd zapytania');
 
    if (mysql_num_rows($mysql_sam) > 0) {
        while ($rsam = mysql_fetch_assoc($mysql_sam)) {
            echo '<option value="' . $rsam['id'] . '">' . $rsam['model'] . ' ' . $rsam['marka'] . '</option>';
        }
    }
    ?>
</select>
[PHP] pobierz, plaintext 

Mozesz tez uzyc funckji ajax:

[PHP] pobierz, plaintext 
<div class="form-group">
    <select name="klient" class="form-control">
        <?php
        $mysql_klient = mysql_query("SELECT * FROM klient") or die('Błąd zapytania');
 
        if (mysql_num_rows($mysql_klient) > 0) {
            while ($rklient = mysql_fetch_assoc($mysql_klient)) {
                echo '<option value="' . $rklient['id'] . '">' . $rklient['imie'] . ' ' . $rklient['nazwisko'] . '</option>';
            }
        }
        ?>
    </select>
</div>
 
 
<div class="col-lg-2">
    <div class="form-group" id="cars">
 
    </div>
</div>
<script>
 
    $(document).ready(function () {
        $('[name=klient]').on('change', function () {
            var id_klient = $(this).val();
 
            $.ajax({
                method: "POST",
                url: "ajax/option.php",
                data: {
                    id_klient: id_klient
                },
                dataType: "JSON",
                success: function (res) {
                    var html = '<select name="klient" class="form-control">';
                    $.each(res, function(k, v){
                        html += '<option value='+v.id+'>'+v.model+' '+ v.marka</option>';
                    });
                    html += '</select>';
                    $('#cars').html(html);
                }
            });
        });
    });
 
</script>
[PHP] pobierz, plaintext 

option.php

[PHP] pobierz, plaintext 
<?php
function klient() {
    $mysql_sam = mysql_query("SELECT * FROM samochod WHERE id_klient = " . $_POST['id_klient'] . "") or die('Błąd zapytania');
    $rsam = mysql_fetch_assoc($mysql_sam);
    return json_encode($rsam);
}
klient();
?>
[PHP] pobierz, plaintext