[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.

[Giluś]

Wszystko jest w 1 pliku, printuje na samej górze strony..
Całość wygląda tak:

[PHP] pobierz, plaintext 
<?php
ob_start();
require_once('var/ustawienia.php');
require_once('szablon_gora.php');
session_start();
?>
 
 <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Dodawanie pozycji do zamówień</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Dodawanie pozycji do konkretnego zamówienia.
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-8 col-lg-offset-2">
                                    <?php
 
 
 
									echo '<pre>';
									var_dump($_POST);
									echo '</pre>';
									?>
 
 
									<form role="form" method="POST">
 
                                        <div class="form-group">
                                            <label>Zamówienie <br /><a href="add_zamowienie.php">Dodaj zamówienie.</a></label>
											 <select name="nr_zamowienia" class="form-control">
                                            <?php
 
												$mysql_zamow = mysql_query("SELECT * FROM zamowienia ORDER BY `zamowienia`.`id` DESC 
") or die('Błąd zapytania'); 
 
												if(mysql_num_rows($mysql_zamow) > 0) { 
													while($rzam = mysql_fetch_assoc($mysql_zamow)) { 
														echo '<option value="'.$rzam['id'].'">'.$rzam['numer_zamowienia'].' ('.$rzam['firma'].' '.$rzam['data1'].')</option>';
													} 
												} 
												?>
												<option value="0">Inny</option>
                                            </select>
                                        </div>
 
								</div>
                                <!-- /.col-lg-6 (nested) -->
                            </div>
                            <!-- /.row (nested) -->		
 
 
							<div class="row">
 
								<div class="col-lg-2" id="input1">
									<div class="form-group">
											<input class="form-control" name="kod[1]" placeholder="Kod towaru">
									</div>
                                </div>
 
								<div class="col-lg-2" id="input2">
									<div class="form-group">
											<input class="form-control" name="nazwa[1]" placeholder="Nazwa towaru">
									</div>
                                </div>
 
								<div class="col-lg-2" id="input3">
									<div class="form-group">
											<input class="form-control" name="ilosc[1]" placeholder="Ilość">
									</div>
                                </div>
 
								<div class="col-lg-2" id="input4">
									<div class="form-group">
											<input class="form-control" name="wartosc[1]" placeholder="Wartość całkowita">
									</div>
                                </div>
 
 
								<div class="col-lg-2" id="input5">
									<div class="form-group">
											<select name="klient[1]" class="form-control">
												 <option>Wybierz klienta</option>
												 <?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" id="cars">
 
									</div>
								</div> 
                            </div>
 
 
 
 
 
 
							<div class="row">
                                <div class="col-lg-8 col-lg-offset-2">
 
 
 
                                        <button type="submit" class="btn btn-default">Dodaj</button>
                                        <button type="reset" class="btn btn-default">Wyczyść pola</button>
                                    </form>
 
 
									<button id="add">Add</button>
 
 
 
                                </div>
                                <!-- /.col-lg-6 (nested) -->
                            </div>
                            <!-- /.row (nested) -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /#page-wrapper -->
 
    </div>
    <!-- /#wrapper -->
 
    <!-- jQuery -->
    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
 
    <!-- Bootstrap Core JavaScript -->
    <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
 
    <!-- Metis Menu Plugin JavaScript -->
    <script src="/bower_components/metisMenu/dist/metisMenu.min.js"></script>
 
    <!-- Custom Theme JavaScript -->
    <script src="/dist/js/sb-admin-2.js"></script>
 
									<script>
										$(document).ready(function() {
											var i = 2;
											$('#add').on('click', function(e){
												var ii = i++;
												e.preventDefault();
													var input = '<div class="form-group"><input class="form-control" name="kod['+(ii)+']" placeholder="Kod towaru['+(ii)+']"></div>';
														$('#input1').append(input);
 
													var input = '<div class="form-group"><input class="form-control" name="nazwa['+(ii)+']" placeholder="Nazwa towaru['+(ii)+']"></div>';
														$('#input2').append(input);
 
													var input = '<div class="form-group"><input class="form-control" name="ilosc['+(ii)+']" placeholder="Ilość['+(ii)+']"></div>';
														$('#input3').append(input);
 
													var input = '<div class="form-group"><input class="form-control" name="wartosc['+(ii)+']" placeholder="Wartość całkowita['+(ii)+']"></div>';
														$('#input4').append(input);
 
													var input = '<div class="form-group"><select name="klient['+(ii)+']" class="form-control"><option>Wybierz klienta</option><?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>';
														$('#input5').append(input);
 
											});
 
											$('[name=klient]').on('change', function () {
												var id_klient = $(this).val();
													$("#cars").load("/var/option_samochod_zamowienie.php", {id_klient: id_klient});
											});
										});	
									</script>
</body>
 
</html>
 
 
<?php
ob_end_flush();
?>
[PHP] pobierz, plaintext