Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [MySQL][JavaScript][PHP]Formularz zmiana ilosci atrybutu input
Forum PHP.pl > Forum > Przedszkole
adus97
3.11.2020, 00:35:58
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
SmokAnalog
3.11.2020, 09:29:50
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.
adus97
6.11.2020, 14:57:56
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 

[PHP] pobierz, plaintext 
  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.     error_reporting(-1);
  103.     $skladniki_query = mysqli_query($connection, "SELECT * FROM `skladniki`");
  104.     $skladniki_rows = mysqli_num_rows($skladniki_query);
  105.     echo "<div id='select-model' class='hide'>";
  106.     if (mysqli_num_rows($skladniki_query) > 0) {
  107.         // output data of each row
  108.         echo "<select name='wybierz_skaldnik1' class='wybierz-skladnik1' data-live-search='true' title='Wybierz składnik'>";
  109.         while($skladniki_row = mysqli_fetch_assoc($skladniki_query)) {
  110.         echo "<option value=" . $skladniki_row['ID'] .">" . $skladniki_row['Produkt'] . "</option>";
  111.         }
  112.         echo "</select><input type='text' placeholder='Ilość' name='skladnik1_ilosc'>";
  113.     } else {
  114.         echo "<option disabled>Brak składników</option></select><input type='text' placeholder='Ilość' name='skladnik1_ilosc'>";
  115.     }
  116.     echo "<a href='#' class='delete'>Delete</a></div>";
  117. ?>
  118.  
  119. </body>
  120. </html>
[PHP] pobierz, plaintext
SmokAnalog
6.11.2020, 15:31:26
Ja bym to zrobił w CSS-ie:

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


[HTML] pobierz, plaintext 
  1. <label class='control-label'>Składnik #<span class="ingredient-count"></span></label>
[HTML] pobierz, plaintext


W ten sposób nic nie musisz robić po stronie JS-a, bo licznik sam o siebie zadba.
adus97
22.11.2020, 00:10:35
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


[PHP] pobierz, plaintext 
  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>
[PHP] pobierz, plaintext
trueblue
22.11.2020, 07:58:41
Tak działa numeracja w CSS.
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.