Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][HTML][JavaScript] Dynamiczne kopiowanie elementów strony po naciśnięciu przycisku.
Forum PHP.pl > Forum > Przedszkole
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:
  1. <div class="row">
  2.  
  3. <div class="col-lg-2">
  4. <div class="form-group">
  5. <input class="form-control" name="model" placeholder="Kod towaru">
  6. </div>
  7. </div>
  8.  
  9. <div class="col-lg-2">
  10. <div class="form-group">
  11. <input class="form-control" name="model" placeholder="Nazwa towaru">
  12. </div>
  13. </div>
  14.  
  15. <div class="col-lg-2">
  16. <div class="form-group">
  17. <input class="form-control" name="model" placeholder="Ilość">
  18. </div>
  19. </div>
  20.  
  21. <div class="col-lg-2">
  22. <div class="form-group">
  23. <input class="form-control" name="model" placeholder="Wartość całkowita">
  24. </div>
  25. </div>
  26.  
  27. <div class="col-lg-2">
  28. <div class="form-group">
  29. <select name="klient" class="form-control">
  30. <?php
  31. $mysql_klient = mysql_query("SELECT * FROM klient") or die('Błąd zapytania');
  32.  
  33. if(mysql_num_rows($mysql_klient) > 0) {
  34. while($rklient = mysql_fetch_assoc($mysql_klient)) {
  35. echo '<option value="'.$rklient['id'].'">'.$rklient['imie'].' '.$rklient['nazwisko'].'</option>';
  36. }
  37. }
  38. ?>
  39. </select>
  40. </div>
  41. </div>
  42.  
  43. <div class="col-lg-2">
  44. <div class="form-group">
  45. <select name="klient" class="form-control">
  46. <?php
  47. $mysql_sam = mysql_query("SELECT * FROM samochod") or die('Błąd zapytania');
  48.  
  49. if(mysql_num_rows($mysql_sam) > 0) {
  50. while($rsam = mysql_fetch_assoc($mysql_sam)) {
  51. echo '<option value="'.$rsam['id'].'">'.$rsam['model'].' '.$rsam['marka'].'</option>';
  52. }
  53. }
  54. ?>
  55. </select>
  56. </div>
  57. </div>
  58.  
  59. </div>


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 smile.gif


Pozdrawiam i z góry bardzo dziękuje za pomoc.
prz3kus
Takich przykładów na tym forum w ciagu ostatniego miesiaca bylo podane kilka smile.gif
Użyj opcji szukaj.
rad11
Cytat
Chciałbym na stronie zrobić dynamiczne tworzenie input, tak że można ich stworzyć nawet i 100 i zawsze wyglądają tak samo.

  1. <button id="add">Add</button>
  2.  
  3. <div id="input_container">
  4. </div>
  5.  
  6. $('#add').on('click', function(e){
  7. e.preventDefault();
  8. var input = '<input type="text" name="data[]"/><br/>';
  9. $('#input_container').append(input);
  10. });

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

Zeby uzyskac taki efekt musisz stworzyc w JS`ie strukture ktora Cie interesuje wraz z ajaxem aby pobrac dane do selectow.

Cytat
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ć.

Tutaj rowniez powiniennes uzyc ajaxa i eventu on change.

Napisz jakis kod to bedzie sie myslec dalej.
Giluś
Zrobiłem coś takiego:

[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. $('#add').on('click', function(e){
  3. e.preventDefault();
  4. var input = '<div class="form-group"><input class="form-control" name="model" placeholder="Kod towaru"></div>';
  5. $('#input1').append(input);
  6.  
  7. var input = '<div class="form-group"><input class="form-control" name="model" placeholder="Nazwa towaru"></div>';
  8. $('#input2').append(input);
  9.  
  10. var input = '<div class="form-group"><input class="form-control" name="model" placeholder="Ilość"></div>';
  11. $('#input3').append(input);
  12.  
  13. var input = '<div class="form-group"><input class="form-control" name="model" placeholder="Wartość całkowita"></div>';
  14. $('#input4').append(input);
  15.  
  16.  
  17. });
  18. });
[JAVASCRIPT] pobierz, plaintext


No i mam problem z powieleniem kodu PHP (tych 2 kolumn ostatnich):
  1. <div class="col-lg-2">
  2. <div class="form-group">
  3. <select name="klient" class="form-control">
  4. <?php
  5. $mysql_klient = mysql_query("SELECT * FROM klient") or die('Błąd zapytania');
  6.  
  7. if(mysql_num_rows($mysql_klient) > 0) {
  8. while($rklient = mysql_fetch_assoc($mysql_klient)) {
  9. echo '<option value="'.$rklient['id'].'">'.$rklient['imie'].' '.$rklient['nazwisko'].'</option>';
  10. }
  11. }
  12. ?>
  13. </select>
  14. </div>
  15. </div>
  16.  
  17. <div class="col-lg-2">
  18. <div class="form-group">
  19. <select name="klient" class="form-control">
  20. <?php
  21. $mysql_sam = mysql_query("SELECT * FROM samochod") or die('Błąd zapytania');
  22.  
  23. if(mysql_num_rows($mysql_sam) > 0) {
  24. while($rsam = mysql_fetch_assoc($mysql_sam)) {
  25. echo '<option value="'.$rsam['id'].'">'.$rsam['model'].' '.$rsam['marka'].'</option>';
  26. }
  27. }
  28. ?>
  29. </select>
  30. </div>
  31. </div>


No i zbytnio nie wiem jak zrobić te połączone dwie listy rozwijane..
rad11
Mozesz to zrobic na dwa sposoby uzywajac np funkcji ajax lub load. Tak wiec:

  1. <div class="form-group">
  2. <select name="klient" class="form-control">
  3. <?php
  4. $mysql_klient = mysql_query("SELECT * FROM klient") or die('Błąd zapytania');
  5.  
  6. if (mysql_num_rows($mysql_klient) > 0) {
  7. while ($rklient = mysql_fetch_assoc($mysql_klient)) {
  8. echo '<option value="' . $rklient['id'] . '">' . $rklient['imie'] . ' ' . $rklient['nazwisko'] . '</option>';
  9. }
  10. }
  11. ?>
  12. </select>
  13. </div>
  14.  
  15.  
  16. <div class="col-lg-2">
  17. <div class="form-group" id="cars">
  18.  
  19. </div>
  20. </div>
  21. <script>
  22.  
  23. $(document).ready(function () {
  24. $('[name=klient]').on('change', function () {
  25. var id_klient = $(this).val();
  26.  
  27. $("#cars").load("/ajax/option.php", {id_klient: id_klient});
  28. });
  29. });
  30.  
  31. </script>


plik option.php
  1. <select name="klient" class="form-control">
  2. <?php
  3. $mysql_sam = mysql_query("SELECT * FROM samochod WHERE id_klient = " . $_POST['id_klient'] . "") or die('Błąd zapytania');
  4.  
  5. if (mysql_num_rows($mysql_sam) > 0) {
  6. while ($rsam = mysql_fetch_assoc($mysql_sam)) {
  7. echo '<option value="' . $rsam['id'] . '">' . $rsam['model'] . ' ' . $rsam['marka'] . '</option>';
  8. }
  9. }
  10. ?>
  11. </select>


Mozesz tez uzyc funckji ajax:

  1. <div class="form-group">
  2. <select name="klient" class="form-control">
  3. <?php
  4. $mysql_klient = mysql_query("SELECT * FROM klient") or die('Błąd zapytania');
  5.  
  6. if (mysql_num_rows($mysql_klient) > 0) {
  7. while ($rklient = mysql_fetch_assoc($mysql_klient)) {
  8. echo '<option value="' . $rklient['id'] . '">' . $rklient['imie'] . ' ' . $rklient['nazwisko'] . '</option>';
  9. }
  10. }
  11. ?>
  12. </select>
  13. </div>
  14.  
  15.  
  16. <div class="col-lg-2">
  17. <div class="form-group" id="cars">
  18.  
  19. </div>
  20. </div>
  21. <script>
  22.  
  23. $(document).ready(function () {
  24. $('[name=klient]').on('change', function () {
  25. var id_klient = $(this).val();
  26.  
  27. $.ajax({
  28. method: "POST",
  29. url: "ajax/option.php",
  30. data: {
  31. id_klient: id_klient
  32. },
  33. dataType: "JSON",
  34. success: function (res) {
  35. var html = '<select name="klient" class="form-control">';
  36. $.each(res, function(k, v){
  37. html += '<option value='+v.id+'>'+v.model+' '+ v.marka</option>';
  38. });
  39. html += '</select>';
  40. $('#cars').html(html);
  41. }
  42. });
  43. });
  44. });
  45.  
  46. </script>


option.php
  1. <?php
  2. function klient() {
  3. $mysql_sam = mysql_query("SELECT * FROM samochod WHERE id_klient = " . $_POST['id_klient'] . "") or die('Błąd zapytania');
  4. $rsam = mysql_fetch_assoc($mysql_sam);
  5. return json_encode($rsam);
  6. }
  7. klient();
  8. ?>
Giluś
Super, aż tak rozbudowanej odpowiedzi w sumie nie oczekiwałem 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:

  1. <div class="row">
  2.  
  3. <div class="col-lg-2" id="input1">
  4. <div class="form-group">
  5. <input class="form-control" name="kod[1]" placeholder="Kod towaru">
  6. </div>
  7. </div>
  8.  
  9. <div class="col-lg-2" id="input2">
  10. <div class="form-group">
  11. <input class="form-control" name="nazwa[1]" placeholder="Nazwa towaru">
  12. </div>
  13. </div>
  14.  
  15. <div class="col-lg-2" id="input3">
  16. <div class="form-group">
  17. <input class="form-control" name="ilosc[1]" placeholder="Ilość">
  18. </div>
  19. </div>
  20.  
  21. <div class="col-lg-2" id="input4">
  22. <div class="form-group">
  23. <input class="form-control" name="wartosc[1]" placeholder="Wartość całkowita">
  24. </div>
  25. </div>
  26.  
  27.  
  28. <div class="col-lg-2" id="input5">
  29. <div class="form-group">
  30. <select name="klient[1]" class="form-control">
  31. <option>Wybierz klienta</option>
  32.  
  33. <?php
  34. $mysql_klient = mysql_query("SELECT * FROM klient") or die('Błąd zapytania');
  35.  
  36. if(mysql_num_rows($mysql_klient) > 0) {
  37. while($rklient = mysql_fetch_assoc($mysql_klient)) {
  38. echo '<option value="'.$rklient['id'].'">'.$rklient['imie'].' '.$rklient['nazwisko'].'</option>';
  39. }
  40. }
  41. ?>
  42. </select>
  43. </div>
  44. </div>
  45.  
  46. <div class="col-lg-2">
  47. <div class="form-group" id="cars"></div>
  48. </div>
  49. </div>


[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. var i = 2;
  3. $('#add').on('click', function(e){
  4. var ii = i++;
  5. e.preventDefault();
  6. var input = '<div class="form-group"><input class="form-control" name="kod['+(ii)+']" placeholder="Kod towaru['+(ii)+']"></div>';
  7. $('#input1').append(input);
  8.  
  9. var input = '<div class="form-group"><input class="form-control" name="nazwa['+(ii)+']" placeholder="Nazwa towaru['+(ii)+']"></div>';
  10. $('#input2').append(input);
  11.  
  12. var input = '<div class="form-group"><input class="form-control" name="ilosc['+(ii)+']" placeholder="Ilość['+(ii)+']"></div>';
  13. $('#input3').append(input);
  14.  
  15. var input = '<div class="form-group"><input class="form-control" name="wartosc['+(ii)+']" placeholder="Wartość całkowita['+(ii)+']"></div>';
  16. $('#input4').append(input);
  17.  
  18. 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>';
  19. $('#input5').append(input);
  20.  
  21. });
  22.  
  23. $('[name=klient]').on('change', function () {
  24. var id_klient = $(this).val();
  25. $("#cars").load("/var/option_samochod_zamowienie.php", {id_klient: id_klient});
  26. });
  27. });
[JAVASCRIPT] pobierz, plaintext


No i wyświetlam sobie dane:
  1. echo '<pre>';
  2. print_r($_POST);
  3. echo '</pre>';


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ć smile.gif


Pozdrawiam i z góry bardzo dziękuje za pomoc smile.gif
rad11
Dopisal bys ktory plik jest ktorym i gdzei robisz var_dumpa
Giluś
Wszystko jest w 1 pliku, printuje na samej górze strony..
Całość wygląda tak:

  1. <?php
  2. require_once('var/ustawienia.php');
  3. require_once('szablon_gora.php');
  4. ?>
  5.  
  6. <div id="page-wrapper">
  7. <div class="row">
  8. <div class="col-lg-12">
  9. <h1 class="page-header">Dodawanie pozycji do zamówień</h1>
  10. </div>
  11. <!-- /.col-lg-12 -->
  12. </div>
  13. <!-- /.row -->
  14. <div class="row">
  15. <div class="col-lg-12">
  16. <div class="panel panel-default">
  17. <div class="panel-heading">
  18. Dodawanie pozycji do konkretnego zamówienia.
  19. </div>
  20. <div class="panel-body">
  21. <div class="row">
  22. <div class="col-lg-8 col-lg-offset-2">
  23. <?php
  24.  
  25.  
  26.  
  27. echo '<pre>';
  28. var_dump($_POST);
  29. echo '</pre>';
  30. ?>
  31.  
  32.  
  33. <form role="form" method="POST">
  34.  
  35. <div class="form-group">
  36. <label>Zamówienie <br /><a href="add_zamowienie.php">Dodaj zamówienie.</a></label>
  37. <select name="nr_zamowienia" class="form-control">
  38. <?php
  39.  
  40. $mysql_zamow = mysql_query("SELECT * FROM zamowienia ORDER BY `zamowienia`.`id` DESC
  41. ") or die('Błąd zapytania');
  42.  
  43. if(mysql_num_rows($mysql_zamow) > 0) {
  44. while($rzam = mysql_fetch_assoc($mysql_zamow)) {
  45. echo '<option value="'.$rzam['id'].'">'.$rzam['numer_zamowienia'].' ('.$rzam['firma'].' '.$rzam['data1'].')</option>';
  46. }
  47. }
  48. ?>
  49. <option value="0">Inny</option>
  50. </select>
  51. </div>
  52.  
  53. </div>
  54. <!-- /.col-lg-6 (nested) -->
  55. </div>
  56. <!-- /.row (nested) -->
  57.  
  58.  
  59. <div class="row">
  60.  
  61. <div class="col-lg-2" id="input1">
  62. <div class="form-group">
  63. <input class="form-control" name="kod[1]" placeholder="Kod towaru">
  64. </div>
  65. </div>
  66.  
  67. <div class="col-lg-2" id="input2">
  68. <div class="form-group">
  69. <input class="form-control" name="nazwa[1]" placeholder="Nazwa towaru">
  70. </div>
  71. </div>
  72.  
  73. <div class="col-lg-2" id="input3">
  74. <div class="form-group">
  75. <input class="form-control" name="ilosc[1]" placeholder="Ilość">
  76. </div>
  77. </div>
  78.  
  79. <div class="col-lg-2" id="input4">
  80. <div class="form-group">
  81. <input class="form-control" name="wartosc[1]" placeholder="Wartość całkowita">
  82. </div>
  83. </div>
  84.  
  85.  
  86. <div class="col-lg-2" id="input5">
  87. <div class="form-group">
  88. <select name="klient[1]" class="form-control">
  89. <option>Wybierz klienta</option>
  90. <?php
  91. $mysql_klient = mysql_query("SELECT * FROM klient") or die('Błąd zapytania');
  92.  
  93. if(mysql_num_rows($mysql_klient) > 0) {
  94. while($rklient = mysql_fetch_assoc($mysql_klient)) {
  95. echo '<option value="'.$rklient['id'].'">'.$rklient['imie'].' '.$rklient['nazwisko'].'</option>';
  96. }
  97. }
  98. ?>
  99. </select>
  100. </div>
  101. </div>
  102.  
  103. <div class="col-lg-2">
  104. <div class="form-group" id="cars">
  105.  
  106. </div>
  107. </div>
  108. </div>
  109.  
  110.  
  111.  
  112.  
  113.  
  114.  
  115. <div class="row">
  116. <div class="col-lg-8 col-lg-offset-2">
  117.  
  118.  
  119.  
  120. <button type="submit" class="btn btn-default">Dodaj</button>
  121. <button type="reset" class="btn btn-default">Wyczyść pola</button>
  122. </form>
  123.  
  124.  
  125. <button id="add">Add</button>
  126.  
  127.  
  128.  
  129. </div>
  130. <!-- /.col-lg-6 (nested) -->
  131. </div>
  132. <!-- /.row (nested) -->
  133. </div>
  134. <!-- /.panel-body -->
  135. </div>
  136. <!-- /.panel -->
  137. </div>
  138. <!-- /.col-lg-12 -->
  139. </div>
  140. <!-- /.row -->
  141. </div>
  142. <!-- /#page-wrapper -->
  143.  
  144. </div>
  145. <!-- /#wrapper -->
  146.  
  147. <!-- jQuery -->
  148. <script src="/bower_components/jquery/dist/jquery.min.js"></script>
  149.  
  150. <!-- Bootstrap Core JavaScript -->
  151. <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  152.  
  153. <!-- Metis Menu Plugin JavaScript -->
  154. <script src="/bower_components/metisMenu/dist/metisMenu.min.js"></script>
  155.  
  156. <!-- Custom Theme JavaScript -->
  157. <script src="/dist/js/sb-admin-2.js"></script>
  158.  
  159. <script>
  160. $(document).ready(function() {
  161. var i = 2;
  162. $('#add').on('click', function(e){
  163. var ii = i++;
  164. e.preventDefault();
  165. var input = '<div class="form-group"><input class="form-control" name="kod['+(ii)+']" placeholder="Kod towaru['+(ii)+']"></div>';
  166. $('#input1').append(input);
  167.  
  168. var input = '<div class="form-group"><input class="form-control" name="nazwa['+(ii)+']" placeholder="Nazwa towaru['+(ii)+']"></div>';
  169. $('#input2').append(input);
  170.  
  171. var input = '<div class="form-group"><input class="form-control" name="ilosc['+(ii)+']" placeholder="Ilość['+(ii)+']"></div>';
  172. $('#input3').append(input);
  173.  
  174. var input = '<div class="form-group"><input class="form-control" name="wartosc['+(ii)+']" placeholder="Wartość całkowita['+(ii)+']"></div>';
  175. $('#input4').append(input);
  176.  
  177. 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>';
  178. $('#input5').append(input);
  179.  
  180. });
  181.  
  182. $('[name=klient]').on('change', function () {
  183. var id_klient = $(this).val();
  184. $("#cars").load("/var/option_samochod_zamowienie.php", {id_klient: id_klient});
  185. });
  186. });
  187. </script>
  188. </body>
  189.  
  190. </html>
  191.  
  192.  
  193. <?php
  194. ?>
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.