[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ś]

Super, aż tak rozbudowanej odpowiedzi w sumie nie oczekiwałem (IMG:style_emoticons/default/smile.gif) , ale wszystko działa, lecz mam jeszcze jeden drobny problem..

Nie wiem dlaczego, ale nie przesyła mi danych z formularza w POST z tych dynamicznie utworzonych pół, cały kod wygląda tak:

[HTML] pobierz, plaintext 
<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>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
$(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});
});
});
[JAVASCRIPT] pobierz, plaintext 

No i wyświetlam sobie dane:

[PHP] pobierz, plaintext 
echo '<pre>';
	print_r($_POST);
echo '</pre>';
[PHP] pobierz, plaintext 

I dostaje wynik, przy dodaniu 2 dodatkowych opcji..

Kod

Array
(
    [kod] => Array
        (
            [1] => 1
        )

    [nazwa] => Array
        (
            [1] =>
        )

    [ilosc] => Array
        (
            [1] =>
        )

    [wartosc] => Array
        (
            [1] =>
        )

    [klient] => Array
        (
            [1] => Wybierz klienta
        )

)

Ogólnie to wiem, że nie działa mi póki co ta opcja z wyborem klienta i później samochodu, głównie przez te name itd.., ale póki co chciałbym z tymi przesyłaniami sobie jakoś poradzić (IMG:style_emoticons/default/smile.gif)


Pozdrawiam i z góry bardzo dziękuje za pomoc (IMG:style_emoticons/default/smile.gif)

Ten post edytował Giluś 23.06.2015, 09:56:28