Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [MySQL][JavaScript][PHP]Formularz zmiana ilosci atrybutu input
adus97
post 3.11.2020, 00:35:58
Post #1





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 3.11.2020

Ostrzeżenie: (0%)
-----


Cześć,
Podczas tworzenia swojej pracy dyplomowej wpadłem na pomysł, aby formularz z atrybutem input odpowiednio dopasowywał się do produktów, które chcę wysłać do swojej bazy danych.
O co mi dokładnie chodzi? Myślę, że ten obrazek idealnie zilustruje mój problem ;0



Domyślnie mam ustawione wprowadzonanie 10 produktów do formularza, a co jesli dany przepis ma tylko 3 produkty?
Dlatego chcę za pomocą buttonu stworzyć skrypt, który z każdym dodatkowym kliknięciem będzie generował dodatkowe pole z inputem tak abym mógł do określonego przepisu dopasować odpowiednią liczbę produktów smile.gif
Bez ingerencji w przycisk chcę aby tych pół było pierwotnie 6 (3 po stronie lewej i 3 po stronie prawej)

Czy takie rozwiązanie jest w ogóle możliwe? Jeśli tak to prosiłbym o pomoc, będę wdzięczny smile.gif
Go to the top of the page
+Quote Post
SmokAnalog
post 3.11.2020, 09:29:50
Post #2





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


Poczytaj o tagu <template>: The Content Template element

EDIT

Chyba, że chcesz się porwać na głębszą wodę, to polecam framework np. Vue.js - one są idealne do takich sytuacji, bo możesz np. zdefiniować szablon z pętlą i tylko podmieniać liczbę, jaka ma być wyświetlana.

Ten post edytował SmokAnalog 3.11.2020, 09:33:14
Go to the top of the page
+Quote Post
adus97
post 6.11.2020, 14:57:56
Post #3





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 3.11.2020

Ostrzeżenie: (0%)
-----


Problem generowania okreslonej liczby inputów został rozwiązany lecz napotkałem kolejny problem ;/

W momencie usunięcia przeze mnie okreslonego inputu blednie definiowany jest nr pola wyboru, przesyłam zdjęcie oraz kod





Poniżej kod

  1. <html>
  2. <head>
  3.  
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  8. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  9.  
  10. <!-- CDN link used below is compatible with this example -->
  11. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
  13. <style type="text/css">
  14. .hide {
  15. display: none!important;
  16. }
  17.  
  18. .category {
  19. margin-left: -12px;
  20. font-size: 1.3em;
  21. /*safari won't respect many/any of these but color?*/
  22. /*font-style: italic;*/
  23. font-weight: bold !important;
  24. color: #000000 !important;
  25. /*straight black makes it pop*/
  26. /*background: #000;*/
  27. }
  28. </style>
  29.  
  30. <script type='text/javascript'>
  31. $(document).ready(function() {
  32. var max_fields = 15;
  33. var wrapper = $(".dodane");
  34. var add_button = $(".add_form_field");
  35.  
  36. var x = 1;
  37. $(add_button).click(function(e) {
  38. e.preventDefault();
  39. if (x < max_fields) {
  40. x++;
  41. var n = $('.skladniki-list').length + 1;
  42. var temp = $('.form-group:last').clone(true).removeClass('wybierz-skladnik'+(n-1));
  43.  
  44. $('input[name="skladnik'+(n-1)+'_ilosc"]:last').attr("name", "skladnik"+n+"_ilosc");
  45. $('select[name="wybierz_skaldnik'+(n-1)+'"]:last').attr("name", "wybierz_skaldnik"+(n));
  46. console.log(n);
  47. $('input[name="ilosc_skladnikow"]').val(n);
  48. $('.control-label:first', temp).html('Składnik #' + n);
  49. $('.input-group', temp).html($('#select-model').html());
  50. $('.wybierz-skladnik1', temp).selectpicker();
  51. $('.form-group:last').after(temp);
  52. } else {
  53. alert('Max 15 składników')
  54. }
  55. });
  56.  
  57. $(wrapper).on("click", ".delete", function(e) {
  58. x--;
  59. e.preventDefault();
  60. $(this).parent('div').parent('div').remove();
  61.  
  62. })
  63. });
  64. </script>
  65. </head>
  66. <body >
  67. <div>
  68. <form class="dodane">
  69. <input type="text" hidden="hidden" id="ilosc_skladnikow" class="ilosc_skladnikow" name="ilosc_skladnikow" value="1">
  70. <div>
  71. <?php
  72. $skladniki_query = mysqli_query($connection, "SELECT * FROM `skladniki`");
  73. $skladniki_rows = mysqli_num_rows($skladniki_query);
  74. echo "<div class='form-group skladniki-list'>
  75. <label class='control-label'>Składnik #1 </label>";
  76. echo "<div class='input-group'>";
  77. if (mysqli_num_rows($skladniki_query) > 0) {
  78. // output data of each row
  79. echo "<select name='wybierz_skaldnik1' class='wybierz-skladnik selectpicker' data-live-search='true' title='Wybierz składnik'>";
  80. while($skladniki_row = mysqli_fetch_assoc($skladniki_query)) {
  81. echo "<option value=" . $skladniki_row['ID'] .">" . $skladniki_row['Produkt'] . "</option>";
  82. }
  83. echo "</select><input type='text' placeholder='Ilość' name='skladnik1_ilosc'>";
  84. } else {
  85. echo "<option disabled>Brak składników</option></select><input type='text' placeholder='Ilość' name='skladnik1_ilosc'>";
  86. }
  87. echo "</div>";
  88. echo "</div>";
  89. ?>
  90. </div>
  91.  
  92. <button class="add_form_field">Kolejny składnik &nbsp;
  93. <span style="font-size:16px; font-weight:bold;">+ </span>
  94. </button>
  95.  
  96. <input type="submit" name="wyslij" value="Wyślij">
  97. </form>
  98. </div>
  99.  
  100.  
  101. <?php
  102. $skladniki_query = mysqli_query($connection, "SELECT * FROM `skladniki`");
  103. $skladniki_rows = mysqli_num_rows($skladniki_query);
  104. echo "<div id='select-model' class='hide'>";
  105. if (mysqli_num_rows($skladniki_query) > 0) {
  106. // output data of each row
  107. echo "<select name='wybierz_skaldnik1' class='wybierz-skladnik1' data-live-search='true' title='Wybierz składnik'>";
  108. while($skladniki_row = mysqli_fetch_assoc($skladniki_query)) {
  109. echo "<option value=" . $skladniki_row['ID'] .">" . $skladniki_row['Produkt'] . "</option>";
  110. }
  111. echo "</select><input type='text' placeholder='Ilość' name='skladnik1_ilosc'>";
  112. } else {
  113. echo "<option disabled>Brak składników</option></select><input type='text' placeholder='Ilość' name='skladnik1_ilosc'>";
  114. }
  115. echo "<a href='#' class='delete'>Delete</a></div>";
  116. ?>
  117.  
  118. </body>
  119. </html>
Go to the top of the page
+Quote Post
SmokAnalog
post 6.11.2020, 15:31:26
Post #4





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


Ja bym to zrobił w CSS-ie:

  1. body {
  2. counter-reset: ingredient;
  3. }
  4.  
  5. .ingredient-count::before {
  6. counter-increment: ingredient;
  7. content: counter(ingredient);
  8. }


  1. <label class='control-label'>Składnik #<span class="ingredient-count"></span></label>


W ten sposób nic nie musisz robić po stronie JS-a, bo licznik sam o siebie zadba.
Go to the top of the page
+Quote Post
adus97
post 22.11.2020, 00:10:35
Post #5





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 3.11.2020

Ostrzeżenie: (0%)
-----


Czy mógłbyś wskazać, gdzie mam błąd w skrypcie?
Głowię się i troję i nie mogę znaleźć do tego rozwiązania.
W momencie, gdy dodaję nowy składnik atrybut "name" automatycznie się numeruje, czyli to na czym mi zależy, ale w momencie gdy zechcę usunąć dany składnik to zaczyna mi nadpisywać nieaktualny numer przy kolejnym składniku.
PRAWIDŁOWO:

Po wciśnięciu przycisku usuń wyskakuje już błąd


  1. <html>
  2. <head>
  3.  
  4. <script type="text/javascript" src="walidacja_hasel.js"></script>
  5. <meta charset="utf-8">
  6. <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7.  
  8. <meta content="" name="descriptison">
  9. <meta content="" name="keywords">
  10.  
  11.  
  12.  
  13. <!-- Google Fonts -->
  14. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Playfair+Display:ital,wght@
    0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700|Poppins:300,300i,400,400i,500,500
    i,600,600i,700,700i"
    rel="stylesheet">
  15.  
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22.  
  23. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  25. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  26. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  27.  
  28. <!-- CDN link used below is compatible with this example -->
  29. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
  30. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
  31. <style type="text/css">
  32. .hide {
  33. display: none!important;
  34. }
  35.  
  36. .category {
  37. margin-left: -12px;
  38. font-size: 1.3em;
  39. /*safari won't respect many/any of these but color?*/
  40. /*font-style: italic;*/
  41. font-weight: bold !important;
  42. color: #000000 !important;
  43. /*straight black makes it pop*/
  44. /*background: #000;*/
  45. }
  46.  
  47. body {
  48. counter-reset: ingredient;
  49. }
  50.  
  51. .ingredient-count::before {
  52. counter-increment: ingredient;
  53. content: counter(ingredient);
  54. }
  55. .wybierz-skladnik{
  56. max-width: 50%;
  57. height: 200%;
  58. }
  59. .wybierz-skladnik1{
  60. max-width: 50%;
  61. height: 200%;
  62. }
  63.  
  64. .dropdown.bootstrap-select {
  65. height: 40px;
  66. }
  67.  
  68. .filter-option-inner-inner {
  69. line-height: 28px;
  70. }
  71.  
  72. button.btn.dropdown-toggle.bs-placeholder.btn-light {
  73. height: 40px;
  74. }
  75.  
  76. button.btn.dropdown-toggle.btn-light {
  77. height: calc(1.5em + .75rem + 2px);;
  78. }
  79. textarea.form-control.wybierz-krok.kroki {
  80. height: calc(1.5em + .75rem + 2px);
  81. max-width: 80%;
  82. }
  83. </style>
  84.  
  85. <script type='text/javascript'>
  86. $(document).ready(function() {
  87. var max_liczba_skladnikow = 10;
  88. var wrapper = $(".dodane");
  89.  
  90. var x1 = 1;
  91. $(".add_form_field").click(function(e) {
  92. e.preventDefault();
  93. if (x1 < max_liczba_skladnikow) {
  94. x1++;
  95. var n = $('.skladniki-list').length + 1;
  96. var temp = $('.skladniki-list:last').clone(true).removeClass('wybierz-skladnik'+(n-1));
  97. $('input[name="skladnik_'+(n-1)+'"]:last').attr("name", "skladnik_"+n+"");
  98. console.log(n);
  99. $('input[name="ilosc_skladnikow"]').val(n);
  100. // $('.control-label:first', temp).html('Składnik #' + n);
  101. $('.input-group', temp).html($('#select-model').html());
  102. $('.skladniki-list:last').after(temp);
  103.  
  104. } else {
  105. alert('Max ' + max_liczba_skladnikow +' składników')
  106. }
  107. });
  108.  
  109.  
  110. $(wrapper).on("click", ".delete_skladnik", function(e) {
  111. x1--;
  112. e.preventDefault();
  113. $(this).parent('div').parent('div').remove();
  114. document.getElementById("myText1").name = x1;
  115. console.log(x1);
  116. })
  117.  
  118. });
  119. function auto_grow(element) {
  120. element.style.height = "5px";
  121. element.style.height = (element.scrollHeight)+"px";
  122. }
  123.  
  124. </script>
  125. </head>
  126. <body >
  127.  
  128.  
  129.  
  130.  
  131. <main id="main">
  132. <section id="specials" class="specials" style="margin-top: 5%;">
  133. <div class="container">
  134. <div class="section-title">
  135. <h2>Dodaj przepis</h2>
  136. <p>Dodawanie jest proste</p>
  137. </div>
  138. <form class="dodane" action="wyslij_test2.php" method="get">
  139. <div class="row">
  140.  
  141. <div class="col-lg-9 mt-4 mt-lg-0">
  142.  
  143.  
  144. <div class="tab-pane">
  145. <div class="row">
  146. <div class="col-lg-12 details order-2 order-lg-1">
  147. <h3>Podaj składniki</h3>
  148.  
  149.  
  150. <!-- TYTUŁOWY INPUT SKŁADNIKI !-->
  151. <div class='form-group skladniki-list'>
  152. <label class='control-label'>Składnik #<span class='ingredient-count'></span></label>
  153. <div class='input-group'>
  154. <input type='hidden' id='myText1' name='ilosc_skladnikow' value='1'>
  155. <input type='text' placeholder='Podaj składnik' name='skladnik_1' style='margin-left:1%;' required>
  156. </div>
  157. </div>
  158.  
  159.  
  160. <!-- DODAWANIE NOWEGO SKŁADNIKA !-->
  161. <button class="add_form_field btn btn-outline-warning">Kolejny składnik  
  162. <span style="font-size:16px; font-weight:bold;">+ </span>
  163. </button>
  164. <!-- WYSYŁANIE NOWEGO SKŁADNIKA !-->
  165. <button class="btn btn-outline-warning" type="submit" style="margin-left: 1%;">Wyślij  
  166. <span style="font-size:16px; font-weight:bold;">+ </span>
  167. </button>
  168.  
  169. <!-- DRUGI INPUT ODPOWIEDZIALNY ZA DODAWANIE/USUWANIE SKŁADNIKÓW !-->
  170. <div id='select-model' class='hide'>
  171. <input type='text' placeholder='Podaj składnik' name='skladnik_1' style='margin-left:1%;' required>
  172. <div class='col-lg-12 details order-2 order-lg-1'>
  173. </div>
  174. <a href='#' class='delete_skladnik btn btn-outline-warning' style='margin-left:1%;'>Usuń -</a></div></div>
  175. </div>
  176.  
  177.  
  178.  
  179.  
  180.  
  181.  
  182. </div>
  183. </div>
  184. <a href="#" class="back-to-top"><i class="bx bx-up-arrow-alt"></i></a>
  185.  
  186.  
  187.  
  188. </form>
  189.  
  190.  
  191.  
  192.  
  193.  
  194. </form>
  195. </section>
  196. </main><!-- End #main -->
  197.  
  198.  
  199.  
  200.  
  201.  
  202.  
  203.  
  204.  
  205. <!-- <script src="assets/js/main.js"></script> DO KARUZELI-->
  206.  
  207. </body>
  208.  
  209.  
  210. </html>


Ten post edytował adus97 22.11.2020, 00:11:12
Go to the top of the page
+Quote Post
trueblue
post 22.11.2020, 07:58:41
Post #6





Grupa: Zarejestrowani
Postów: 6 009
Pomógł: 1641
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Tak działa numeracja w CSS.


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 24.11.2020 - 16:09